How can I add HTML code to my email templates?

  • 22 December 2020
  • 5 replies
  • 4317 views

Userlevel 7
Badge +57

As flexible as the editor is, there are many situations where you want to be able to add custom HTML/CSS code into the email template.  There are only three places where you can put  custom HTML.  

The most common method is to add a "Text Block" and then click on the "Source" icon to add the HTML there.  You can also do this in the "Table Block" or in the “Split Block in the same way for the “Text” portion of the Block configuration.

Here's a quick screenshot:
 

 


5 replies

Badge +1

Hey! 

I work in the digital marketing team at The Klyne Group and we would like to embed snippets into our Klaviyo emails. 

We love using Klaviyo but we are struggling to add html snippets into an email today.

We would like to embed our Instagram snippet that we embedded into our website. I’ve used exactly the same html code and pasted into ‘source’ in text block as shown above, but it doesn’t do anything :expressionless:

I did this for reviews and it imports an image that we use to show our 5 star rating. The widget for instagram isn’t an ‘image’ so it doesn’t seem to work in the same way. Please advise how we should add widgets with html. Thank you :slight_smile:

 

Userlevel 7
Badge +58

Great post @retention and thank you for sharing this! I’ve seen this type of question appear often myself so thank you for posting this resource!
 

Hey there @ZaraLou,

If the code snippet that Instagram provides is a <script> or an <iframe>, then unfortunately those are not supported in email.
However, with a custom web feed, you can connect your Instagram content to your emails and dynamically display your latest Instagram photos, captions, and more. You can follow our guide here to get this up and running.

Hi @retention, thanks for sharing a very useful post. “You can also do this in the "Table Block" or in the “Split Block in the same way for the “Text” portion of the Block configuration.” How can I put custom HTML for the “Image” portion in the “Table Block”. I just want to add some borders to the block, which I successfully added to “Text” portions or blocks.
Thank you!

Userlevel 7
Badge +60

Hi @retention

 

I don’t think the tag went through earlier and wanted you to see someone’s question about a response of yours! Got any pointers for our friend @Dang Le here? 

 

-Taylor

Hi @retention

 

I don’t think the tag went through earlier and wanted you to see someone’s question about a response of yours! Got any pointers for our friend @Dang Le here? 

 

-Taylor

Thanks for your help, @Taylor Tarpley!
I’d like to update on my question:
 

Hi @retention, thanks for sharing a very useful post. “You can also do this in the "Table Block" or in the “Split Block in the same way for the “Text” portion of the Block configuration.” How can I put custom HTML for the “Image” portion in the “Table Block”. I just want to add some borders to the block, which I successfully added to “Text” portions or blocks.
Thank you!

I managed to customize the whole Table Block by exporting the entire email’s HTML, then find the elements which I want to customize, then customize them the way I want. After that, head into Klaviyo Email Builder and add a text block, click on Source Code, and then paste the code of the element which I customized.
Thank you again for your help.
Dang Le

Reply