Embed a flipbook on Sharepoint

Learn how to embed your flipbook into Microsoft Sharepoint and easily share it with your audience.

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. In this article, we’ll see how to embed a flipbook on Sharepoint.

But first, let’s start with the basics. And if you already know these steps, feel free to skip ahead.

How do I get the embed code?

In order to integrate a flipbook on Sharepoint, 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. From your Homepage, select the desired flipbook, click on the three vertical dots, and select Embed

flipbook-options-menu-in-flipsnacks-app-homepage

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. Find out more about our Customization options and how they can help you enhance your designs. Out to the right of this, you have a preview of how it will all come together once embedded.

3. 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 and flexible images, then check the Responsive box. By default, it's on. 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.

4. Now, you just have to copy the embed code, so click on the Copy button, which is right next to the embed code box.

flipbook-embed-pageLet’s see how to make the embed code work in Sharepoint. 

1. Firstly, go to Sharepoint and click on Pages.

pages-tab-highlighted-on-sharepoint2. Select New, and click on Site Page

create-new-site-page-in-sharepoint

3. Make sure to add a title, then click the plus icon to Add a new web part in column one, and select the Embed option. 

insert-a-new-section-in-a-web-page-on-sharepoint

4. Now, go to the right column, and paste the embed code from Flipsnack.  

embed-option-on-sharepoint-pages5. This error will appear. 

embed-error-on-sharepoint

6. No worries, from the embed code, select only the “http://” until “.net” like in the example below. You can paste it into a Word and then easily select the correct text. 

flipbook-iframe-code-with-a-highlighted-section7. Save the document as a draft.

save-a-page-as-a-draft-on-sharepoint8. Now go to Site contents, and then click on Site settings.

site-contents-tab-selected-and-site-settings-on-a-share-point-web-page9. Select the HTML Field Security.

html-field-security-highlighted-on-the-site-security-page10. Ensure that the Allow contributors to insert iframes only from the following domain is checked. Now, add the copied link in the check box below Allow iframes from this domain, and click on the Add button. Scroll down to check if it was added, and then simply click OK.

necessary-steps-to-allow-enternal-iframes-on-sharepoint11. Go back to Pages. 

pages-menu-on-site-setting-page-on-sharepoint12. Select the draft you created earlier, and go to Edit. 

edit-web-page-button-on-share-point13. Then click on Add embed code. Now, simply copy and paste the entire iframe code.

embed-option-on-sharepoint-pagesAnd now, you can see your embedded content in Sharepoint. 

final-preview-of-the-embedded-flipbook-on-sharepoint

I hope this article was helpful, and if you have any questions, don't hesitate to contact our support team.