Creating HTML content to deliver a seamless shopping experience using Lightbox functionality
Introduction:
The Lightbox functionality enables a Client to create a seamless shopping experience for a reader in a Zmags catalog, without requiring a complex implementation. The Client should only have to create HTML pages that are specifically built to be viewed in a Lightbox.
The purpose of this document is to serve as a guide for what to consider for such a solution.
Overview of solution:
· Client should build product pages in HTML that are fitted to be viewed in a lightbox.
· Catalog should be linked to the right HTML product pages inside Zmags publicator.
· When reader clicks a lightbox link inside a Zmags catalog, the specific HTML page will show in lightbox in front of a Zmags catalog.
· The reader will be able to interact with the HTML page inside the lightbox.
Description:
The solution is described below using an example consisting of mock-up screen shots, and is intended to illustrate the experience a reader gets when adding an item to cart.
For this application, it could look something like this:
When clicking Go to checkout, same call should be made, and the specific URL for where the client specific checkout page is located should be loaded in a new window.
Frequently Asked Questions:
What about content that does not fit into the Lightbox?
· All content should be created to fit within a Lightbox, as the Lightbox will work as a browser window for the shopping experience.
· The lightbox has scroll functionality in both directions, but it’s not recommended that the content is larger, especially not in the width.
Can I change the size of the Lightbox?
· The size of the lightbox (in pixels) can be configured from Zmags end, and is configured on the viewer level. Usually 600x400 pixels is a good size for both Desktop and Tablet. But 800x600 pixels usually works well too.
Can I have a login screen as a part of the experience?
· Yes, basically anything is possible, but if a login screen is desired, it is recommended that the login screen only shows up the first time a user add something to the cart. A cookie setup could take care of this.
Can the Lightbox have different sizes in the same catalog?
· The size of the Lightbox will remain the same throughout the complete catalog and each add-to-cart session, so the size of the Lightbox cannot change. It can be configured to be different sizes if using different viewers.
How should I include the product ID?
· The URL for a specific page is recommended to be something like this:
https://www.customerdomain.com/LightboxView/{productID}
(then it will be possible auto-link using the product ID, if it is present in the pdf)
What is the recommended approach for tablet and phones?
· Tablets usually works out of the box if the setup is optimized for Desktop, but for phone the content should be fitted to fit into a smaller lightbox, defined to show only on phone.
Live example:
Here is an example of using external content in a Zmags lightbox in front of a catalog:
http://viewer.zmags.com/publication/f940917d?viewType=pubPreview#/f940917d/1 (click the Callaway cap on page 1)
(The “close lightbox from within the lightbox” call has not been implemented in this example, so only option for closing the lightbox is to click the (X) button the upper right corner)
Responsibilities:
Client is required to:
· Build an HTML product page, with a unique URL
· Build a login page (if required at this stage)
· Build a "checkout” page, where a Zmags call to close lightbox should be implemented when clicking the bottons.
Zmags is required to:
· Provide catalogue platform
· Establish Light-box functionality, that can be managed from the publicator
Code example to close a lightbox from within the lightbox:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Lightbox API Test</title>
<script src="http://api.viewer.zmags.com/lightbox/lightbox.js" type="text/javascript"></script>
</head>
<body>
<button type="button" onClick="com.zmags.api.Lightbox.close();">Close</button>
</body>
</html>