Export to HubSpot

Coded email templates need HubSpot’s Marketing Hub Professional or Enterprise. With one of those, design in Figma, export with Sendra and paste the HTML into a coded template in HubSpot’s Design Manager. HubSpot sends it as you designed it.

Before you start

• Check your plan and your permissions. HubSpot builds custom email templates only on Marketing Hub Professional or Enterprise, and only for users with the Design tools permission.
• Put your images online: turn on Host images online in Sendra, or upload them to HubSpot’s Files tool and paste each file’s address into Image URL in Sendra. In Files, click a file’s name, then File URL, then Copy URL.
• Set your preview text in Properties. It travels in the file.
• Skip HubSpot’s Upload design. It rebuilds the design in HubSpot’s own editor and does not keep Sendra’s HTML.

What HubSpot needs in every email

A coded email template carries an unsubscribe link and your company’s name and address, or HubSpot may refuse to publish it. All of them come from tags HubSpot fills in from your account’s email settings, and Sendra passes them through untouched.

Unsubscribe link. Type “Unsubscribe” in your footer, select it, and put this in its Link field: {{ unsubscribe_link }}. The page it opens also lets people manage their subscription preferences. Give the link its own text layer, since Figma’s link box will not accept a tag.

Company name and address. Put these tags in your footer text, each on its own line or with commas between them:

• {{ site_settings.company_name }}
• {{ site_settings.company_street_address_1 }}
• {{ site_settings.company_city }}
• {{ site_settings.company_state }}
• {{ site_settings.company_zip }}
• {{ site_settings.company_country }}

HubSpot’s pages disagree on whether the zip code and the country are required, so include them.

Footer text. Keep it at 14px or larger and easy to read against its background: HubSpot may refuse to publish a template whose footer is small or faint.

Note: type the tags exactly as shown, including the spaces inside the braces. See Merge tags for how Sendra treats them.

Tags you will use most

Type these in Figma exactly as shown. Text tags go in a text layer, link tags go in a Link field.

What it does	Tag	Where
First name	{{ contact.firstname }}	text
Company name	{{ site_settings.company_name }}	text
Unsubscribe and preferences	{{ unsubscribe_link }}	Link
View in browser	{{ view_as_page_url }}	Link

The address tags are listed above. HubSpot asks for a fallback on personalization in marketing emails. For the first name with a fallback, type {{ personalization_token("contact.firstname", "there") }} instead. The view in browser link needs View in browser switched on for the email, and the web version goes live only once the email is sent.

Preview text

Leave HubSpot’s preview text empty. A coded template shows HubSpot’s preview text only through HubSpot’s own preview text code, which Sendra’s HTML does not need: your preview text is already in the file.

Make the template

1. In HubSpot, open the Design Manager: Content, then Design Manager. If your menu shows More, click it first.

2. Click File, then New file. Choose HTML + HubL, then Template, set the template type to Email, name it, and click Create.

3. Make the file start with these lines, which tell HubSpot it is an email template. Keep them if HubSpot already put them there, and delete everything else in the file.

   <!--
     templateType: email
     isAvailableForNewContent: true
   -->

4. In Sendra, click Copy HTML. Paste it below those lines.

5. Click Publish changes. If HubSpot reports a missing unsubscribe link or address, check the tags in your footer.

Then create the email: go to Marketing, then Email, click Create email, and choose your template. HubSpot suggests its classic editor for emails built on coded templates; if your template is not in the list, check which editor opens for new emails in your account.

Check it

Open the email, then Preview and test, then Send test email. Choose a recipient under Send test to and click Send. Only addresses HubSpot has verified receive a test, and the test arrives from HubSpot’s preview address, not yours.

Compare it with the test you sent from Sendra. They should match; HubSpot adds tracking to your links, which is normal.

Changing it later

Keep Figma as the source: change the design, export again, and paste it into a new coded template. Pasting into the same template changes every email built on it. HubSpot’s drag and drop editor does not open coded templates.

Dynamic content

HubSpot fills contact details and your footer at send time. Merge tags shows how to use tags in text, links and image URLs.