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

How to embed a flipbook in your Lovable website

Show your flipbook on a Lovable site with a simple prompt

Table of contents

Overview

Lovable lets you build a website by chatting with an AI instead of dragging elements around, which means embedding a flipbook works a little differently than on a classic website builder. There is no widget picker or app store. You paste your Flipsnack embed code into a prompt and ask Lovable to put it on the page. The one thing worth getting right is how you word that prompt, especially if your flipbook already contains a form.

Here is a Lovable landing page with a flipbook embedded in it, built exactly the way this article describes. Scroll inside the frame to see how the flipbook sits alongside the rest of the page.

Requirements

  • Plan: Embedding is available on all Flipsnack plans except Starter.
  • Access: A published flipbook in your Flipsnack account, and a Lovable project you can edit.

Use cases

  • Lead capture pages: put a flipbook with a built in lead form on a Lovable landing page, so submissions still flow into Flipsnack and your automations.
  • Digital brochures: show a full interactive catalog on your Lovable homepage instead of linking readers away.
  • Portfolio sites: embed a lookbook or case study flipbook directly on a project page.

How to get your Flipsnack embed code

1. Open your flipbook in the Flipsnack dashboard and make sure it is published.

2. Click Share, then open the Embed tab and click Copy code.

3. You will get a single iframe snippet that looks like this:

<iframe src="https://d3ms8mre5rhtvu.cloudfront.net?hash=YOUR_Hash" 

width="100%" 
height="480" 
seamless="seamless" 
scrolling="no" 
frameBorder="0" 
allowFullScreen 
allow="autoplay; clipboard-read; clipboard-write">


</iframe>

Embed the flipbook in your Lovable site

1. Open your project in Lovable and go to the page where you want the flipbook to appear.

2. In the chat panel, paste your embed code into a prompt and be explicit that you want it embedded as it is. Something like: "Embed this iframe exactly as given, in a full width section below the hero. Do not build a form, the form is already inside the flipbook: [paste your embed code]."

Tip: That last part matters more than it looks. Lovable tries to work out what you are building, so if your flipbook contains a lead capture or contact form, a vague prompt can lead it to build its own form on the page instead of embedding your flipbook. Saying up front that the form lives inside the flipbook saves a round trip.

3. Click Publish in Lovable, then open your live site and confirm the flipbook loads, and that any lead form inside it submits correctly.

Tip: Because Lovable edits real code, you can keep refining with plain English follow ups. If the flipbook sits too close to the section above it, just say so and ask for more spacing.

Troubleshooting

Lovable built its own form instead of embedding the flipbook: this happens when the prompt leaves room for interpretation and your flipbook contains a form. Tell Lovable to remove the form it created and embed the iframe exactly as provided, and mention that the form is already inside the flipbook.

The flipbook does not show up on the page: confirm your flipbook is published with public or unlisted visibility, and that Lovable's preview has finished rebuilding after your prompt. Also make sure that the embed code wasn't changed by mistake while generating the page layout. 

The flipbook looks too short or too tall: Lovable usually adds its own styling classes to the iframe, and those override the height value in the original code. So changing height="480" on its own may do nothing. Instead, tell Lovable the height you want in plain English, for example "make the flipbook 700px tall on desktop and 450px on mobile", and let it adjust the styling.

Frequently asked questions

Do I need to know how to code to do this? No. Lovable writes the code from your prompts, so pasting the embed code into a request is all it takes.

My flipbook has a lead form. Where do those leads go? Into Flipsnack, exactly as they would anywhere else you embed the flipbook. That also means they can feed your Zapier automations. A form that Lovable builds on the page is separate and will not reach Flipsnack, so keep the form inside the flipbook if you want it connected.

Can I embed more than one flipbook on the same Lovable site? Yes, repeat the steps for each page.

Does this work with other website builders too? Yes, the same iframe code works anywhere HTML embeds are supported.

Can I connect Flipsnack to my Lovable app with Zapier? Not directly. Lovable does not have its own app in Zapier's directory yet, so there is no ready made connection between the two.

Next steps

Need help setting up this integration?

Our team is here to help. Connect with our team experts via the in-app chat (#hs-chat-open) for personalized assistance!