Embedding Your Publication – Fastr Publicator Community

What is an embedded viewer?
What can it do for me?
Publication Requirements
Schedule Embedding
Additional Demonstration

What is an embedded viewer?

An embedded viewer is a Javascript component which allows you to easily place your Zmags publication inside a web page on your site. We also offer a feature-rich API where you can utilize Javascript calls to interact with your publication in a variety of ways:
- Review API Documentation

If you are using one of the Zmags Commerce Plug-ins then embedding is done via the Commerce back-end - further information can be found below:

- Magento Publication Embedding

- Demandware Publication Embedding

What can it do for me?

Some benefits of using an embedded viewer include:

- Retain URL branding through embedding on your site.
- Place other elements around your publication, such as ads or menus.
- Create your own navigation buttons in any style you wish.
- Use Javascript events to communicate with other elements on the page.
- Place multiple viewers on one page.

Publication Requirements

- Publication must be activated.
- The HTML page must be hosted on a web server, not just viewed locally.
- Use the alphanumeric "publication ID", not the older numeric "legacy ID".
(More on this below.)

Example 1: Embedding the publication into an existing webpage or template:

The following code, when used in an HTML file on your website, will allow for a publication to be displayed occupying a box of a specified size. The advantage of this is that you are free to place other elements around the publication, such as a header and footer matching the rest of your website.

See this example in action by clicking here

<!DOCTYPE html>
<html>
<head>
    <title>YOUR_TITLE_HERE</title>
</head>
<body>
    <h1>Page Title Here</h1>
    <p>There's space around the publication, so you can place other content!</p>

    <!-- This loads the viewer API code in from Zmags' website. -->
    <div id="myViewerContent" style="width:800px; height:600px;"></div>
    <script type="text/javascript" src="http://api.viewer.zmags.com/viewer/viewer.js"></script>
    <script>
        <!-- This code creates a new viewer pointing to your pub. -->
        var viewer = new com.zmags.api.Viewer();
        viewer.setPublicationID("PUB_ID_HERE");
        viewer.setParentElementID("myViewerContent");
        viewer.show();
    </script>

    <p>More regular content...</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>YOUR_TITLE_HERE</title>
</head>
<body>
    <div id="myViewerContent" style="position:fixed; top:0px; left:0px; height:100%; width:100%;"></div>
    <script src="http://api.viewer.zmags.com/viewer/viewer.js" type="text/javascript"></script>
    <script>
        var viewer = new com.zmags.api.Viewer();
        viewer.setPublicationID("PUB_ID_HERE");
        viewer.setParentElementID("myViewerContent");
        viewer.show();
    </script>
</body>
</html>

To use the code above, copy the entire example into an HTML file, fill in the red text with your own information, save the file, and place it on your website. The "pub_ID" is your publication ID, which can be found by clicking on your publication's name in the "All Publications" list while logged into the Zmags Publicator and selecting the "Publish" tab.

Schedule Embedding

Much like an individual publication, schedules can be embedded into a page as well. (For more information on what a publication schedule is, click here.) To embed a schedule, simply swap out the command viewer.setPublicationID("PUB_ID_HERE"); in the examples above and use viewer.setScheduleID("SCHEDULE_ID_HERE"); instead. The "schedule ID" can be found by clicking "Schedules" on the left side of the Zmags Publicator. A list of all schedules you've created will be displayed, and one of the columns titled "Schedule ID" will tell you the necessary number.

See example 1: partial page display using the schedule ID by clicking here
See example 2: full page display using the schedule ID by clicking here

Additional Demonstration

These demos are simple iterations on the concepts explained above, and should be fairly straightforward to use without further instruction. They can each be viewed online individually, or downloaded together in a single package.

Click here to download all demo code
Review Documentation

Related articles