Setting up a HTML5 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 HTML5 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. If a two page publication is displayed on a small screen, it will switch to single page mode to provide a better viewing experience.
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 HTML5.
If a user's browser does not support HTML5, the publication will be launched in Flash instead; if they do not have Flash, they will be prompted to install it. When using Flash instead, the publication will record the statistics associated with the Flash viewer rather than the more limited HTML5 set.
You can test your browser's ability to support HTML5 here: http://html5test.com/
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 HTML5 viewer, pages are displayed as high-resolution images which can be scaled up 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 to display. Add custom branding to the load screen by applying an image. Select how long to display the load screen before proceeding. 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. This will effect links across all devices. 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 HTML5 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 Search does not function until activated)
Enable or disable Facebook sharing, allowing your end users to post the Publication directly to their Facebook wall.
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.
Enables the publication to be launched from the browser and display in full screen mode. Not supported on mobile devices, or in Internet Explorer. We recommend using JS-based fullscreen functionality instead.
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, such as a simple password. For more information, see the following tutorials:
- Setting Up Password Security on a Publication
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 HTML5 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 HTML5 Verge Viewer can be found here.