Sharing
      Back to home
      1. | Help Center
      2. Sharing & Embedding
      3. Sharing

      How to embed a Flipsnack flipbook in a HubSpot email using HTML code

      Learn how to embed a Flipsnack flipbook into a HubSpot email using custom HTML code. Quick and easy guide for better email marketing.

      Table of contents:

      Overview

      If you want to include a visually engaging preview of your flipbook in a HubSpot email campaign, Flipsnack makes it easy. You can use the HTML snippet generated on your flipbook's details page and embed it directly into a HubSpot email using a Custom HTML module. This article walks you through the entire process, step by step.

      Key benefits:

      • Professional presentation: embed a branded preview of your flipbook directly into marketing emails

      • Increased engagement: drive more clicks by showcasing interactive content

      • Simple integration: no custom development needed—just copy and paste the code

      Requirements

      • Flipsnack account (any plan)
      • HubSpot account with email editor access

      How to get the HTML code from Flipsnack

      1. Log in to your Flipsnack account and go to your Dashboard.

      2. Find the flipbook you want to share and click the Details button (three dots > View details).

      3. In the left-side menu, select Send email.

      4. Scroll to the section titled Send it using your email client.

      5. Click the Copy button to copy the generated HTML code.

      Copy HTML code from Flipsnack

      How to embed the code in HubSpot

      1.   Log in to your HubSpot account and go to Marketing > Email.

      2.   Create a new email or open an existing draft.

      3.   In the drag-and-drop editor, click + Add to insert a new module.

      4.   Choose the Custom HTML module.

      Add Custom HTML code

      5.   Paste the HTML code copied from Flipsnack into the editor window.

      Paste the HTML code in Hubspot

      6.   At the bottom of your HTML code, in the footer section, include HubSpot’s required subscription links:

      <p><span style="font-size:12px; color:#b6bcc8; text-align:center;">
      <a href="" style="color:#0362FC; text-decoration:none;font-size:12px">Unsubscribe</a> &nbsp;|&nbsp; <a href="" style="font-size:12px;color:#0362FC; text-decoration:none;">Manage preferences</a></span></p></td></tr

      7.   Click Apply and preview the email to make sure everything displays correctly. Optionally you can change the background color of your email and body color to the same color you selected in Flipsnack so you get a clean design. 

      8.   Send a test email before launching your campaign.

      Additional tips / FAQs

      How can I change the footer address in the HTML code?

      You can safely replace the content inside the <span> tag with your own company information and the required Hubl Tags. 

      <span style="color: rgba(0, 0, 0, 0.87); font-size: 12px; font-weight: 300; letter-spacing: 0.02em; line-height: 20px; margin: 0px 0px 10px; text-align: center;"> Flipsnack LLC - 37310 Ruth Dr, Sterling Heights, Michigan, 48312-1977, USA </span> 

      Make sure to keep the <span> and its style intact. If you add the HubL tags correctly you should get a footer code that looks something like this:

      <tr><td align="center" style="border-collapse: collapse; font-family: Arial; font-size: 16px; line-height: 25px; padding: 20px; text-align: center;"><p style="color: rgb(182, 188, 200); font-size: 12px; font-weight: 300; letter-spacing: 0.02em; line-height: 20px; margin: 0px 0px 10px; text-align: center;"><span style="color: rgba(0, 0, 0, 0.87); font-size: 12px; font-weight: 300; letter-spacing: 0.02em; line-height: 20px; margin: 0px 0px 10px; text-align: center;">Flipsnack LLC - 37310 Ruth Dr, Sterling Heights, Michigan, 48312-1977, USA</span></p><p><span style="font-size:12px; color:#b6bcc8; text-align:center;">
      <a href="" style="color:#0362FC; text-decoration:none;font-size:12px">Unsubscribe</a> &nbsp;|&nbsp; <a href="" style="font-size:12px;color:#0362FC; text-decoration:none;">Manage preferences</a></span></p></td></tr>

      Can I customize the HTML code?

      Yes, but we recommend editing only styles (colors, fonts) if you’re comfortable with HTML.

      What happens if the flipbook link changes?

      The HTML snippet always links to the current version of your published flipbook.

      Will this work in all email clients?

      Most modern clients support basic HTML and inline styles, but always send a test.

      Troubleshooting


      The email looks broken or doesn't show correctly      : this usually happens when something in the code is missing or out of place. Here’s what to check:

      • Make sure you didn’t delete or change any important parts of the HTML code

      • Use only the Custom HTML block in HubSpot (not a text block)

      • Preview the email in both desktop and mobile view to catch any layout issues

      If issues persist, try sending a test email and checking the HTML in an external validator like Litmus or Email on Acid.

      The preview doesn’t show up in the email editor: make sure you’re using the Custom HTML module, not a standard text block.

      The link doesn’t work: double-check that your flipbook is published and the URL is correct inside the HTML snippet.

      Next steps

      Useful resources

      Learn more about sharing and embedding flipbooks:

      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.