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

How to add iframes in flipbooks using Google Tag Manager

The simplest way to overlay third‑party content in your flipbooks via GTM

Table of contents

Overview

If you want to display third‑party content (chatbots, forms, banners) over your Flipsnack flipbooks, use Google Tag Manager (GTM) to inject a lightweight overlay. You’ll manage everything from GTM without editing the flipbook itself.

View example

Important: Overlays appear on top of the flipbook player, not inside the flipbook pages. 

Common use-cases

  • Customer support chat: Add an Intercom, Drift, or Zendesk widget to assist readers while they browse your catalog.

  • Lead capture forms: Embed a Typeform or Google Form to collect emails and grow your subscriber list.

  • Feedback & surveys: Launch a survey after readers finish the flipbook to measure engagement or satisfaction.

  • Marketing campaigns: Display a promotional banner or pop-up with discount codes, new product launches, or event invites.

  • Educational content: Insert quiz forms, extra reading resources, or sign-up sheets for webinars and courses.

  • Publishing & media: Show a “Subscribe to newsletter” overlay for magazines or newsletters embedded via Flipsnack.

  • Internal communications: Use an overlay to link to company resources, policy acknowledgments, or HR forms inside corporate flipbooks.

Requirements:
Enterprise Plan with Google Tag Manager enabled.

How to create a Custom HTML tag in GTM

Before pasting any of the code examples, you’ll need to create a Custom HTML tag inside your Google Tag Manager container.

  1. Log in to Google Tag Manager and select the container used for your flipbooks.

  2. In the left-hand menu, click Tags.

  3. Click New → name your tag (for example, Flipbook iframe overlay).

  4. Click Tag Configuration → choose Custom HTML.

  5. Paste the code snippet provided in this guide.

  6. Scroll down to Triggering → click + to add a new trigger.

    • Choose Page View.

    • Select DOM Ready (recommended).

    • (Optional) Add a filter so it only fires on your flipbook URLs (e.g., Page URL contains flipsnack.com).

  7. Click Save.

  8. When you’re ready, click Submit and Publish in GTM to apply your changes.

Tip: Always preview your container changes with GTM’s Preview mode before publishing. This lets you confirm the overlay works correctly on your flipbook link.

Step-by-step instructions

Quick start (2 minutes): Paste‑and‑go overlay

Simplest path: Copy this into a Custom HTML tag in GTM, set the trigger to DOM Ready, and change only YOUR_FORM_URL.

That’s it. No other edits needed. To move the box, change bottom/right values; to resize, change width/height.

Overlay with simple settings

Paste this one-file overlay script in GTM (Custom HTML, trigger: DOM Ready)

Screenshot 2025-09-08 at 10.08.08

Why this is easy: All the settings you might change live in the CONFIG block at the top.

GTM settings

  • Tag type: Custom HTML

  • Trigger: Page View → DOM Ready (fallback: Window Loaded)

  • Filter: Limit to your flipbook URLs (e.g., Page URL contains your flipbook path)

  • Firing options: Once per page



Modal placement options

Here are several ways you can display the modal depending on your use case:

1. Center modal (classic popup)

Best for: forms or surveys that need full attention.



2. Bottom-right floating modal (shows immediately)

Best for: chat widgets or feedback tools that should stay visible while browsing.



3) Top banner that opens a modal

Best for: announcements or promotions. The banner stays pinned at the top with a button that opens a modal.

What you can change

  • Iframe URL: change the src="https://yourform.typeform.com/to/abc123" in each snippet.

  • Modal size: edit width:420px;height:560px (or the bottom-right variant width:360px;height:520px).

  • Banner labels: replace Open form with your text.

  • Colors: change background:#111, #00AEEF, or color:#fff.

  • Position: adjust top/bottom/left/right values (e.g., move the floating modal further from edges).

Additional tips / FAQs

Can I target different flipbooks with different forms? Yes. In GTM, use URL-based triggers and duplicate the tag with different CONFIG.formUrl values.

Can I delay the overlay? Yes. Wrap the inject()/create() call in setTimeout(function(){ ... }, 8000) (for 8s).

Can I track interactions inside the iframe? Only if you control the iframe source and add tracking code there.

Common use-cases

  • Chat widgets (Intercom, Zendesk)

  • Feedback or survey forms (Typeform, Google Forms)

  • Campaign banners and offers

  • Lead capture and conversions

Troubleshooting

Overlay/modals don’t show

  • Confirm GTM publishes and the trigger = DOM Ready.

  • Check that the tag fires only on your flipbook URLs.

  • Open DevTools → Elements to see whether the node exists.

It loads twice

  • Keep the top-window guard and global flags included above (window.self===window.top, __fsOverlayInjected, __fsPopupInjected).

  • Optional in GTM: create a JS – IsInIframe variable and add it as a Trigger Exception.

Overlay covers player controls

  • Tweak size/position in CONFIG (e.g., bigger bottom/right values).

Iframe refused to connect

  • The source may set X-Frame-Options/CSP to block embedding. Try another provider or host your own page.

Next steps

Useful resources

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 assistance.