Website Embedding
Embedding Your Publication
Embed a Zmags publication in your organization’s own site rather than using the direct viewer.zmags.com URL. This will allow the use of a vanity URL, and also additional functionality via JavaScript and our provided API.
Embedding Examples
In this article we will share examples of embedding Publicator in your website. You can take a look at how these examples look visually and we also provide full embed codes so that you can achieve the same look on your website as well.
Embedding in WordPress
Detiails how to embed a Zmags publication in your Wordpress website.
HTTPS and Embedding
Some notes regarding how to embed on a secured HTTPS page rather than the usual HTTP.
Additional Functionality
Dynamic Deep Linking an Embedded Viewer
This will allow you to link directly to any particular page in your embedded publication. Also allows you to provide a URL that opens to any specific page. This can be useful for re-targeting, marketing, social, and email campaigns
JavaScript Based Fullscreen
Ensure that your full screen icon launches full browser width and doesn’t override a user’s browsing experience. This is particularly effective to ensure lightboxes lay on top of content even when in full screen (Not possible using the standard full screen functionality as it overrides your browser).
Custom Navigation Buttons
Select alternative images to use for forward / back page turn buttons, and styling to place them in one of several positions outside of or overlapping with the embedded viewer.
Custom Page Numbering
Include special labels or shifting of page numbers in the embedded viewer. This can be used to mark out table of contents / forward sections, appendices, advertising pages, and so on.
Limit Viewable Page Range
Prevent readers from browsing outside a specified minimum and maximum page number. This is one approach to breaking up a single publication into several discrete pieces.
Jump to Next Publication from Last Page
Chain a list of multiple publications together, and automatically switch to viewing the next when the last page of the current one is reached.
HTML Archive and Table of Contents
Add custom functionality for browsing to other publications, or other places in the same publication. Provides a useful organizational tool for series of publication or large publications with many sections.
HTML Archive via the Schedule API
Similar to the above example, but able to populate archive entries automatically from the Publicator system, so that they do not need to be manually added to the embed page each time.
HTML5 Showcase
A demonstration of several different features available in the Verge HTML5 viewer.
Slideshow in Verge Viewer
A demonstration of how the Standard Viewer's slideshow functionality (automatic flipping of a publication's pages) can be replicated in the Verge Viewer using our API.
HTML5 Widgets
Creator Experiences in Publicator
Details how to load Zmags Creator experiences into a widget or lightbox link.
Animated GIFs
Demonstrates the proper way for loading animated GIFs into a widget, and provides a more advanced loader for non-looping animations to "play once and stop" when the page they're featured on is turned to.
Opening a Lightbox from a Widget
Using the Widget API, it is possible to run viewer functionality from within an IFrame widget. One such example is opening a lightbox link. This can be useful when you want to have an animated call-to-action in the HTML5 viewer.
Horizontal Swipe within IFrame Widgets
Ensures that the swipe functionality is preserved when swiping on top of an iframe widget. Otherwise widgets may sometime interfere with smooth navigation of the reading experience.
Lightboxes (Advanced) and Custom Links
A general tutorial for an older implementation of the lightbox functionality. This is primarily kept for backwards-compatibility reasons, and is not recommended for use with new projects.
Multiple Lightbox Styles in Publication
Using an embedded viewer page, it is possible to apply differing CSS styles to lightbox popups from one link to another within the same Zmags publication. (Something not normally possible via the built-in lightbox settings.)
Lightboxes that Pop Up Automatically
Using an embedded viewer page, it is possible to have a lightbox pop up without the reader prompting it to do so.
Custom Scrollbars in HTML5 Widget
Demonstration for adding scroll bars to your widget which can be custom-styled and will appear on mobile devices.
Commerce & Analytics
Reusing your Site's Existing Product Windows with Zmags
This tutorial covers how to use your site’s own shoppable quickviews with a Zmags publication.
Google Analytics and Product Links
Some notes on gathering analytics data in regards to product links (links which open a product quickview) within a Zmags publication.
Search & Social Sharing
Optimizing an embedded publication for search engines
Some notes on how to best prepare your publications for SEO optimization.
Social Sharing Toolbar
A demo covering a more fully-featured social toolbar available for embedded API publications on your site.
Device & Browser Handling
Handling Mobile Devices
Some notes on how to create special-case handling for mobile devices with your Zmags publications. This is a good read for those concerned about screen size / scaling issues with smaller mobile screens.
Preferred Viewers and the Custom Channel
Further information on Preferred Viewers, which are used to load a different viewer skin for your publication in certain contexts.
Website Functionality
Banner Ads Template for Embedded Publications
An example template to adding banner ads to your embedded publication page.
IFraming Part of a Larger Webpage
Demonstrates how to feature just one smaller part of an outside website in one of your publication’s HTML5 widgets. Useful for when you would like to feature something from a site which would otherwise be inconveniently large, such as isolating the core product information and checkout button on a product page.
Comments
0 comments
Please sign in to leave a comment.