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

How to embed flipbooks and bookshelves in Google Sites

Keep training materials and internal resources inside your company's intranet

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 Google Sites, your team can easily access essential resources without ever leaving your company's intranet or project hubs.

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.

Google Sites Embed Breakdown

Google Sites accepts full HTML iframe blocks, making it very easy to paste the code directly from Flipsnack. If you want to customize how large the flipbook appears on your site, you can edit specific variables in the code. 

Requirements

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

How to get your embed code

Before moving to Google Sites, 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 Google Sites

  • Go to your Google Sites dashboard and select the page you wish to edit, or create a new one.

Select your page or create a new one in Google Sites

  • In the right-hand Insert menu, select the Embed option.

Select the Embed element from the menu

  • Choose the Embed code option in the next pop-up window.

Select the Embed code option

  • Go to your Flipsnack workspace and copy the full iframe embed code for your flipbook or bookshelf. Paste your Flipsnack code into the dedicated embed code field in Google Sites and click Next.

Paste the embed code into the Google Sites field

  • A preview of your flipbook will appear. Verify that it looks correct, and then click Insert.

Preview your flipbook and click Insert

  • Adjust the size of the embedded element on your page using the blue drag handles so it fits your layout perfectly.

Resize the iframe to the desired size on the page

  • If needed, use the section settings on the left side of the block to change the section color or background.

Change the section color if needed

  • Once you are satisfied with the layout, click Publish in the top right corner.

Press Publish to save changes

  • Review your changes in the side-by-side comparison screen, and hit Publish one last time to set it live.

Review your drafted changes and set them live

Troubleshooting

  • Flipbook too small or cut off: If your embedded flipbook appears constrained or requires a scrollbar to view fully, you likely need to adjust the element's height. You can either use the blue drag handles in the Google Sites editor to physically pull the container down, or click the edit pencil icon over the embed to return to the code view and manually increase the height="480" value (e.g., to height="700").

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.