Embedding flipbooks in the Hubspot landing page builder

This is a short guide on how to embed your Flipsnack material using the Hubspot CMS for your landing pages.

Table of Contents

Overview

If you're using HubSpot CMS and Flipsnack, you may find it challenging to embed your flipbooks directly on a landing page since the CMS does not provide a built-in iFrame block. However, there is a simple workaround using the Video block. This guide will show you how to embed Flipsnack flipbooks in HubSpot CMS pages.

Key Benefits

  • Seamless integration: Add interactive flipbooks to HubSpot pages without additional coding.

  • Better content presentation: Display catalogs, brochures, and reports within your marketing pages.

  • Enhanced engagement: Encourage visitors to interact with embedded flipbooks directly on your website.

Requirements

  • HubSpot CMS (CMS Hub account required)

  • Flipsnack account with an embeddable flipbook

  • Editor access in HubSpot to modify pages

How to Embed Flipsnack Flipbooks in HubSpot CMS

Step 1: Copy the Flipbook Embed Code from Flipsnack

  1. Navigate to the flipbook you want to embed.

  2. Click Share > Embed and customize the embed settings if needed.

  3. Copy the embed code.

Screenshot 2025-02-24 at 16.10.12

Step 2: Use the Video Block in HubSpot CMS

Since HubSpot CMS does not provide a native iFrame block, you can use the Video block as an alternative.

Add a video widget

1. Open HubSpot CMS and navigate to your page editor.

2. Click Add Module and select Video.

3. In the Video settings panel, choose the Embed code option.

Embed flipbook code

4. Paste the Flipsnack embed code into the field.

5. Adjust the size and positioning to fit your page layout.

6. Click Apply and Publish the page.

Embed flipbook

Your Flipsnack flipbook will now be embedded and functional on your HubSpot CMS landing page.

Alternative Embedding Options

If your HubSpot CMS theme supports custom HTML, you can also embed the flipbook manually:

  1. Add an HTML block if available.

  2. Paste the Flipsnack embed code inside the HTML editor.

  3. Save and preview the page.

Next Steps

For more ways to use HubSpot together with Flipsnack, check out:

Need Expert Support?

Our team is here to help. Connect with our team experts or message us via the in-app chat for a personalized demo.