How to embed flipbook publications on your blog or website
Creating a digital edition of your printed material is a great way to re-use your material and to reach your audience on different channels. With FlowPaper, we have made it easy for you to embed any online publication onto your blog or website. Follow these easy steps and you will have it up and running in no time.
In this video tutorial, we are uploading a digital publication onto SquareSpace, but the same method can be used to embed your flipbook or slide presentation onto any blog or website, using WordPress, your self-hosted website, or other web host providers. To make it easier for you, we have included a written tutorial for embedding on WordPress, Squarespace, and WIX.
What are embed tags?
Embed tags are small code snippets that allow you to place the publication on your website and surround it with a layout and graphics that match your styles.
If you are new to FlowPaper Publisher you can find our Beginner Basics tutorial here: https://flowpaper.com/Create-Interactive-PDF-Documents/
How to create an Embed Tag for a flipbook
Once you have finished importing and editing your document in the FlowPaper publisher, you need to publish it. You can do that by clicking the publish button in the top right corner. A drop-down menu will appear, where you can choose to either self-host on a custom domain or use the FlowPaper cloud-hosting. For this tutorial, we have selected to cloud-host the digital publication.
Once the document has been processed, press the Start Upload button and once the upload is finished you will have the option to copy a link to share the URL for social media or email or to use a code snippet to embed on the website.
With the code snippet, you can select between clickable miniature or full publication. Copy the code snippet you selected to use from FlowPaper.
Embedding flipbooks into Squarespace
Make sure you have the correct code snippet copied from FlowPaper, For the video tutorial, we have used a clickable miniature.
In Squarespace, go into the website edit mode, use the plus sign on the right-hand side of the page and add a block. Use the search bar to find a code block, click the code bar to add it. A code block will be added to the bottom of the page. Replace the code that is already in there with the line of code from FlowPaper. This will prompt a preview to pop up, which should be the miniature publication.
You can easily make changes and some alterations can be made straight in the code, such as height and width. Click the Apply button once you are happy with the changes.
Embedding flipbooks on on WIX
You first need to upload the publication to your website or to FlowPaper cloud for the publication to be available online. Here we use FlowPaper cloud as our way of uploading the publication. Switch over to WIX and in the left-hand menu bar, you will see a plus (+) icon, click that and move your cursor to select the Embed option, go to Custom Embed and select the HTML frame. Add the copied FlowPaper code snippet. The publication should now show up inside the iFrame box. Resize the resulting component so that it fits your page.
Embedding flipbook PDFs on WordPress using FlowPaper Cloud
Open your PDF document in the FlowPaper Publisher, make the adjustments you want to make to your page flip publication. Click the publish button in the top right corner and select the cloud hosting option. Once the document has been processed, start the upload. Your publication has now been created and is available to the public.
All we need to do is to get it into your WordPress Blog. Click 'view online' to verify that it works, and copy the URL to your publication. Download and install the FlowPaper Wordpress plugin from the official WordPress home page. It only takes a minute and does not require any third-party components to be installed on your server.
Once the plugin has been installed, simply create a new WordPress page or blog post and paste in the copied code snippet from FlowPaper.