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

How to share your flipbook via email using HubSpot HTML code

Paste a code snippet into a marketing message so recipients flip through in their inbox

Overview

If you want to include your flipbook in a HubSpot email campaign, you can use the share via email feature together with the html code and paste it in your HubSpot email builder. Take the HTML snippet generated on your flipbook's Overview page and embed it directly into a HubSpot email using a Custom HTML module.

💡 Benefits of embedding a flipbook preview in a HubSpot email
  • Pro presentation: embed a branded preview of your flipbook directly into marketing emails
  • Increased engagement: drive more clicks by showcasing content
  • Simple integration: minor code change needed just copy and paste the code then change the footer

This article walks you through the entire process, step by step.

Requirements

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

How to get the HTML code from Flipsnack

  • Log in to your Flipsnack account and go to your Dashboard.
  • Find the flipbook you want to share and click the Overview button (three dots > View details).
  • In the left-side menu, select Send email.
  • Scroll to the section titled Send it using your email client.
  • 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:

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

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></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></span> and its style intact. If you add the HubL tags correctly you should get a footer code that looks something like this:

    Change the footer in the HTML

    <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><span style="font-size:12px; color:#b6bcc8; text-align:center;">
    <a href="" style="color:#0362FC; text-decoration:none;font-size:12px">Unsubscribe</a>  |  <a href="" style="font-size:12px;color:#0362FC; text-decoration:none;">Manage preferences</a></span></p>

  • 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:

  • HTML code altered: Make sure you didn’t delete or change any important parts of the HTML code
  • Wrong block type: Use only the Custom HTML block in HubSpot (not a text block)
  • Preview desktop and mobile: 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

Need expert support?

Our team is here to help. Connect with our team experts or message us via the live chat for personalized assistance.