Learn how to embed your flipbook into your website
What is the embed code?
The embed code is a piece of HTML code that makes it possible for you to integrate your interactive page-flip catalog into a website, blog, or intranet.
Below you can see an example of a Flipsnack catalog embedded on a website. The image is a screenshot of a flipbook placed on a website. If you want to see it on the site, click on the image, then scroll down until you reach the section captured in the screenshot.
In the example above, the catalog is placed on the left, but you can place the animated flipbook wherever you want, on any page. It can be bigger or smaller, according to your wish.
How do I get the embed code?
In order to integrate a flipbook on your site, you need to copy the embed code provided by Flipsnack.
1. First, make sure the flipbook is published. You can't embed a flipbook that hasn't been published yet.
Important: If your flipbook is published as a private flipbook, you won’t be able to embed it anywhere as it is private.
2. On the main dashboard (My flipbooks), click on the three vertical dots out to the far right of your flipbook.
3. Once clicked, you will see the embed options. Click on them, and you will be taken to a new tab.
At the top, you'll see a blue button that says 'Customize appearances'. By clicking this, you'll be able to change how your flipbook appears when it's embedded. Out to the right of this, you have a preview of how it will all come together once embedded.
4. Next, you can change the size of the flipbook. In case you want the flipbook to be mobile-friendly and to adapt the layout to the viewing environment by using fluid, proportion-based grids, flexible images, then check the Responsive box. By default, it's on. Here you can see how your responsive flipbook can look. Feel free to play with the size of your browser and check it on a mobile device as well. If you encounter any issues while embedding, you can contact us on the live chat or easily submit a ticket.
By default, the flipbook will display the cover when visitors check the embedded flipbook, but you can change that. If you want to feature an article on page 5, update the Start from page number.
5. Now, you just have to copy the embed code, so click on the Copy button, which is right next to the embed code box.
6. On your website, paste the code in an HTML supporting medium, like the page's HTML code, or in an embed box. Our embed code is an iframe and can be integrated into any medium that supports HTML iframe integration.
Note: To track analytics for your embedded flipbook, you must integrate the GTM ID in the flipbook from its Customize page. If the GTM ID is added to the Flipsnack profile, data for the embedded flipbook will not be collected.
If you want to ensure that the embedding of your flipbook will not work anywhere other than your site, check out our article on domain restriction.
If I make any modifications to the flipbook, is the embed code automatically updated?Yes, if you edit the flipbook after you embedded it somewhere, the changes will appear automatically on your website. You don't have to re-embed it.
If you have any more questions, don't hesitate to contact our support team via live chat.