Setting up a Verge Viewer
Log into the Zmags Publicator, and click 'Viewers' on the left side.
Adding a new Viewer
When in the Viewers tab, scroll to the bottom of the page and select Add. Pick the new Viewer to base the custom Viewer on (one of the 4 above). Once 1 of the 4 Publications is selected then select Next to start customizing.
Customizing the Verge Viewer
The new Viewer will need to be re-named, to differentiate it from the one it is based on, before you can save it.
Select whether to display content in Viewer one page at a time, or in two page spreads.
Preferred desktop viewer:
Select whether to display the desktop viewer using Adobe Flash or HTML5. (The mobile viewer is always displayed in HTML5.) This tutorial covers Flash, the default setting. This currently has the best support for statistics and animations, but it also requires that your readers have Adobe Flash installed.
To read about the HTML5 viewer instead, click here!
Enable or disable the thumbnail page browser and section name / page number display at the bottom of the viewer.
Page Change Arrows:
Enable or disable the buttons on the left and right side of the publication used to turn pages.
Enable or disable the zoom function. In the Flash viewer, pages are displayed as SWF graphics which can be scaled up using vector math when the reader wishes to zoom in.
The Base Color is the color of the panels within the Viewer and is set to black or white. The Base Color Opacity can be adjusted as a %. The icons within the panels have a choice of color. To adjust the default background color select Custom Background and input the specific color of the background
The viewer effect or "Peeker" gives the end user a look at the previous page or the next page when moving the cursor towards it. The opacity can be adjusted so you can see more or less of the pages forth and back.
Load Screen Styles:
Define the color of the background and spinner as the Zmags Viewer loads. Add custom branding to the load screen by applying an image. The image must be pre- uploaded to the Images area of the Publicator account
Mobile Link Style:
Choose a link style (outline, underline, solid fill, or invisible), color and opacity for links on mobile devices. Link appearance on desktops and laptops is instead determined by how the links are created in the Enriched tools. Mobile links can be hidden by setting the opacity to 0% or choosing the "invisible" style.
The action bar is the control panel that houses the Verge Viewer features. Any of the enabled features can be ordered using the drag and drop functionality. Icons dragged into the left box will only be shown when the < > (expand toolbar) button is clicked, as demonstrated in the screenshots above. When any button is clicked, an API event is launched, which may be used for adding additional functionality via an embedded viewer page.
If none of the features below are enabled the action bar will not be displayed.
When enabling the home icon it can either be linked to a specific page or a URL. By definition it is recommended to link the home icon back to page 1 or a homepage/website. If linking externally to a URL the page will load in a separate browser tab
The Table of Contents (TOC) icon is similar to the Home icon in that it links to a specific page in the Publication. The icon has been created and designed to deep link to a Publications TOC page.
Enabling the search allows the end user to enter some text or key word and the Viewer will identify any pages that match the entry into the search box
The Share option can either be specific to Facebook (allowing your end users to post the Publication directly to their Facebook wall), or use the general share functionality, which features many different social networks: Facebook, Twitter, del.iclo.us, digg, Tumblr, Windows Live Spaces, MySpace, reddit, StumbleUpon, LinkedIn, and many more. The general sharing button is only supported in the to the desktop viewer, however; if this is selected, the share button will not appear in the mobile viewer.
Allow the original PDF to be downloaded locally from the viewer in whole or in part.
Allow the original PDF to be printed directly from the viewer. Please note that this is a desktop-only function and the button will not carry over to the mobile viewer. See here for more information on the limitations of the direct-print functionality:
Issues with printing a Zmags publication
Enables the publication to be launched from the browser and display in full screen mode.
This button can either launch another web page or merely run an API event in the embedded viewer, allowing for better integration with your own digital checkout system. Available exclusively to Commerce and CommercePro accounts.
Action Bar Position:
Select whether to position the Action Bar in the Top Center or Top Left. To remove the action bar all features can be disabled.
This section handles appearance sections for the built-in lightbox functionality. For more information, see the following tutorial:
Create a Lightbox Link
This section enables you to add security to your viewer, either a simple password or more advanced single sign-on authentication. For more information, see the following tutorials:
- Setting Up Password Security on a Publication
- Advanced Security: Remote Authentication and Single Sign On
Check "Enable Google Analytics" to link publications using this viewer to your Google Analytics account and send statistics periodically. For more information, see the following tutorial:
Un-check "Enable search engine indexing" to prevent publications using this viewer from appearing in external search results, such as Google or Yahoo. For more information, see the following tutorial:
How Can I Make My Zmag Non-Searchable On Google
Applying the Verge Viewer
Once the Viewer is created and saved it can be applied by going back into My Publications. Edit the Publication that the Viewer is to be applied to and select the Viewer from the drop down then Save. You can Preview the Viewer at any time but it will take up to 15 minutes for the Viewer to be applied to any live Publication.
Apply Viewer and Save
A full video run through for Verge Viewer can be found here.