The cover of a printed catalog is often an extension of your shopfront: designed to entice and draw shoppers in. Your digital catalog is no different: show it to the world! And why not start with putting it on your website?
Embedding the Flipbook on your website is a great way to drive traffic to it, and an easy way to share.
Get embed code
To embed your Flipbook on your website, you have to add a small iFrame in your HTML. Luckily, we've made it easy! Here's how to do it:
Select the Flipbook you wish to embed.
Navigate to the Embeds pane.
You'll now see a number of available fields that allow you to customize your embed code:
Page: This field informs the embed code generator which page to use when rendering an image for your embed code. By default, this will be the first page of your Flipbook. However, you can change it to any page within your Flipbook.
⚠️ Please note: Any pages that are part of a spread within your Flipbook will be generated as such. For example, if you select page 4, the generator will render an image showing pages 4-5 as a spread.
Width: In this field, you can define the width, in pixels, of your embed.
Height: The vertical counterpart to the width field, here you can set the height, in pixels, of your Flipbook embed.
⚠️ Please note: If you enter a single value in either the fields, i.e., only a value in the Width field, the Height field will be automatically set to the best fit in relation to the width.
If both fields are left blank, as they are by default, the embed will the available space defined for the embed, on your webpage.View: Here you can pick how you want your Flipbook to be presented on your site. You have several options of how to present your Flipbook: Perspective, Single page, Spread, or Page slider.
You can also see a preview of your selection in the preview pane to the right.
Once you've found the perfect way to present your Flipbook, click Get embed code at the bottom.
We've written up the code needed to show the Embed the way you want it, so now it's simply pasting it into your website's HTML in the desired location.