Custom coded email

Developer Support CMS Development
1

Hi,

New to Hubspot and not clear on what is possible.

Based on a custom design, I have coded a responsive HTML email. I see that it is possible to import custom html into Hubspot.

I want to use my code as an email template that my Hubspot using client can select and use to create a new campaign, editing place holder content before sending to their contacts.

With other platforms I use, for example, mailchimp, pardot or campaign monitor you add, say, “mc:edit” to a tag to make the relevant section editable.

In summary, I would like sections “placeholder content and, links etc” of my imported HTML to be editable by the user.

- Is this possible with Hubspot using my custom html & css code?

Thanks in advince,

J

2

Hey @JTester

Yes this is possible. I would suggest you poke around the HubSpot Academy for specifics.

3

Hi Kevin,

Thanks for that, thats great to know.

I have had a look at the Academy but cannot see anything that deals specifically with how to code the email. Can you point me in the right direction or to some sample code?

Thanking you in advance, J

4

Hey @JTester

Coding email is a massive subject, you will have to gather info from many locations. Litmus is one of the largest publishers of email specific coding.

But to code an email template in hubspot you’ll navigate to:

  • Marketing > Files and Templates >Design Tools
  • On this page yu’ll click “File” > New File > Select Html + HUBL > Click Next
  • Select “Email” from the Template Type dropdown
  • Name the file and click “Create”

This is where you’ll place your Html. See this page for Email specific hubl.

Hope this gets you moving

5

Thanks Kevin,

Email I can build, this seems to be what I am looking for

{% content_attribute “email_body” %}

- hopefully this is what makes the content editable.

Cheers, J

6

@JTester ,

I would recommend checking out the CMS lessons on the academy. While not specific to emails, I think you would be able to use the information there and translate it to emails. They largely use the same methodology.

7

Thanks Dennis,

Im going to see if wrapping

{% content_attribute “email_body” %}

around the various parts of content I need editable works. I am building this without access to HubSpot as I am building it for an agency, so makes it a bit more difficult.

Cheers, J

8

Hey @JTester

Thats a scarey thing to think about lol!

You could create a developer account to build and test. With that account you can build, test, and be confident in what you’re delivering.

9

Unfortunately, you wont be able to test emails.

@JTester, could you throw up a bit of the code and add a comment where you want it to be editable? Maybe we could demonstrate how to insert hubl tags in the code

10 
<!-- Was kinda hoping something like this would do the trick - client seems to be able to load the html into Hubspot OK -->

<!-- Panel 2 Start -->

 <table width="520" border="0" align="center" cellpadding="0" cellspacing="0" class="tableInnerMobile">

 <tr>

 <td bgcolor="#ffffff" style="font-family: 'Modern Era', Arial, Helvetica, Sans-serif; font-size:28px; color:#241C15; padding-top: 56px; font-weight:700;">{% content_attribute "email_body" %}Hello Hive Family Member!{% end_content_attribute %}</td>

 </tr>

 <tr>

 <td bgcolor="#ffffff" style="font-family: 'Modern Era', Arial, Helvetica, Sans-serif; font-size:18px; color:#403B3B; padding-top: 20px; font-weight:400; line-height: 28.8px;">{% content_attribute "email_body" %}Lorem ipsum dolor sit amet, consectetur adipiscing elit. Diam sed neque iaculis donec tellus facilisis in. Libero, egestas lacus enim, commodo donec. Eu pretium id accumsan, in turpis nibh. Feugiat egestas leo dolor at ut lectus sem quis quam.{% end_content_attribute %}</td>

 </tr>

</table>

 <!-- Panel 2 End -->
11

Hey @JTester

Ok, so I just grabbed one td from your code there and replaced what you had with a hubl tag.

It looks like this

<td bgcolor="#ffffff" style="font-family: 'Modern Era', Arial, Helvetica, Sans-serif; font-size:28px; color:#241C15; padding-top: 56px; font-weight:700;">
 {% text "simple_text_field" label="Enter text here", value="Hello Hive Family Member!" %}</td>

Another way to go about this is to break your email down into components and use modules. Then, import the modules into the email html file

Hope this helps!

12

Hi, Thanks for this and for your time on it, I really appreciate it. I have adapted my code in line with your suggestion and submitted it. I hope it works out, if not I will look at hiring a hubspot developer.

Thanks again, J