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.
First, make sure the flipbook is published. You can't embed a flipbook that hasn't been published yet.
On the main dashboard (My flipbooks), hover your mouse over your flipbook and click on Embed.
Next, you’ll see the Embed tab and some customization options.
At the top, you have a button that takes you to the customization tab, where you can change the background color that appears behind the flipbook, or make it transparent for perfect integration with your site's design. Make sure you republish if you make any changes.
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.
Now, you just have to copy the embed code, so click on the Copy button which is right next to the embed code box.
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 it can be integrated into any medium that supports HTML iframe integration.
If you want to make sure that the embedding of your flipbook will not work anywhere else other than your site, check out our article on domain restriction.