Skip to content
  • There are no suggestions because the search field is empty.

How to embed Flipsnack flipbooks and bookshelves in Notion

Keep training materials and internal resources inside your Notion workspace

Overview

For enterprise teams, keeping internal communications, employee handbooks, and training materials centralized is crucial for productivity. By embedding your interactive Flipsnack publications directly into your Notion workspace, your team can easily access essential resources without switching apps.

Note: The embed process and the structure of the iframe code are exactly the same whether you are embedding a single flipbook or an entire bookshelf.

Notion Embed Breakdown

Similar to Confluence, Notion does not take a full HTML block. Instead, it requires you to isolate the source link. 

Requirements

  • Role: Edit permissions for the target Notion page
  • A Flipsnack account with a published flipbook or bookshelf (available on all plans, including the free plan).
  • Edit permissions for the target Notion page.

How to get your embed code

Before moving to Notion, you need to grab the embed code from your Flipsnack workspace. You can access this code from the Overview screen or by clicking the three dots (More options) on your flipbook/bookshelf card and selecting Embed.

For a detailed walkthrough on generating your initial iframe code, please visit our guide on how to embed flipbooks into your website.

How to embed the publication in Notion

  • Go to your Notion workspace and choose your target page or create a new one.

Notion flipbook embed Step 1 - Select your page

  • Add a new element by typing the /embed command or by clicking the + button to pull up the block menu. Select the Embed element.

Pick the embed element from the Notion block menu

  • An empty embed block will appear, asking for a link. Keep this page open and head over to your Flipsnack workspace.

Empty embed link field in Notion

  • In Flipsnack, click the 3 dots on your flipbook's card, select Embed in the context menu, and click Copy to copy the full iframe code.

Copy the Flipsnack embed code from the pop-up

  • Paste the copied HTML code into a basic text editor (like Notepad or TextEdit). Locate the src="..." part of the code and copy only the URL inside the quotation marks.

Paste the code into a text editor and extract the source URL

  • Return to Notion and paste the extracted URL directly into the link field of the embed element. Click Embed link.

Paste the extracted link into the Notion embed field

  • Once you do that, the flipbook will render on the page. Use the drag handles on the sides or corners of the block to resize it and change the alignment according to your needs.

Edit the size and alignment of the embedded flipbook

  • Finish editing, then set your page live by pressing the Share button and selecting Publish.

Publish your Notion page

  • Your page is now live and features a fully interactive embedded flipbook!

The embedded flipbook is live on your Notion page

Troubleshooting

  • Flipbook fails to load: If your Notion page displays an error message or a plain text hyperlink instead of the interactive reader, double-check that you only pasted the direct URL into the embed block. Notion cannot process standard HTML tags. Ensure you have not pasted the entire HTML snippet into the field.

Next steps

Request a native integration or get help

Need expert support?

Our team is here to help. Connect with our team experts or message us via the live chat for personalized assistance.