Solved

Lack of drag-and-drop functionality from HTML template

  • 10 May 2021
  • 4 replies
  • 1284 views
RichardGayler
Rank
Badge +2

Hi all,


I assume this is probably a frequently asked question, however I was unable to find an answer elsewhere, so apologies in advance if there is an obvious solution here.

 

When I export a Klaviyo template to html, and then I create a new template from that generated code, the new template becomes uneditable within the template editor (can only edit it via code). Despite the template being identical to the one created from the template editor, the editor does not seem able to support it going in the opposite direction.


Additionally when I create a template programmatically via Klaviyo’s API and use html that is from a Klaviyo generated template, the resulting template is uneditable within the editor.


What I’m trying to do is be able to edit Klaviyo templates in my account and then send them to different Klaviyo accounts and have them be editable within the new account. Alternatively, it would be cool to be able to design them in an external tool, and inject them back into Klaviyo and have them still be editable within the editor, although I could see how the parsing the generated html back into the editor could be very difficult.​​​​​​​

 

I feel like this may be a common question, so let me know if there is an obvious solution. Thanks!

icon

Best answer by David To 10 May 2021, 20:21

View original

4 replies

David To
Rank
Userlevel 7
Badge +60

Hello @RichardGayler,

Thanks for sharing your experience with the Community!

When exporting a Klaviyo built template as HTML, the HTML code rendered would actually be stripped of the Klaviyo drag-and-drop functionality. This results in an HTML coded template devoid of the Klaviyo drag-and-drop features when being re-imported back into Klaviyo. This would also extend to creating a template via Klaviyo’s Template API. 

Though HTML templates lack the codes necessary to be used with Klaviyo’s drag-and-drop editor; Klaviyo does allow you to convert sections of these HTML templates to be editable blocks to retain as much of the Klaviyo drag-and-drop functionality as possible. You can also apply this to third party/external HTML templates you create for use within Klaviyo. You can find instructions on how to convert your HTML templates to be compatible with Klaviyo’s drag-and-drop editor from the Import a Custom HTML Template with Drag and Drop Support article.

A member of our Klaviyo team has also created a wonderful Loom (with sound) surrounding this topic. The video password is: klaviyo

You can also find the order of written steps below: 

  1. Import in HTML template, or select edit on existing HTML template
  1. Paste the following code, wherever you want the product block (or any other drag/drop block) to be:

<tr>

     <td align="center" data-klaviyo-region="true" data-klaviyo-region-width-pixels="600">

<div class="klaviyo-block klaviyo-text-block">

<p>text/drag drop block here</p>

</div>

</td>

</tr>

  1. Create campaign using the HTML template
  1. Drag/drop in the product block where the HTML was added, it will say ‘text/drag drop block here’
  1. Done!

Furthermore, you can share Klaviyo templates between Klaviyo accounts while retaining the full drag-and-drop functionality so long as you have access to the Klaviyo account you wish to share this template with. Instructions on how to share and clone these templates from one account to another can be found in the How to Copy Flows and Templates Between Klaviyo Accounts article. 

I hope this helps!

-David

RichardGayler
Rank
Badge +2

Awesome thank you, this precisely explains what I was looking for.

G
Rank
Badge +4

Awesome thank you, this precisely explains what I was looking for.

Did you ever find a better workaround to using third-party HTML email templates in Klaviyo? The current workaround (mentioned here) doesn’t really present a scalable option, more of a hack, that essentially defeats the purpose of importing an HTML email template in the first place. I hope Klaviyo improves this area of their platform.

jonamurph
Rank
Badge +1

I have a related issue & I haven’t seen a thread addressing it specifically, but I’m importing editable HTML templates into Klaviyo to be used and iterated for Campaigns, Flows, etc...

The problem I’m running into is that if a custom HTML template is used for a Campaign & the editable content of the email is changed (just the copy/images), I cannot then clone the adjusted campaign email and save it as another template without the content (copy/images) reverting back to the placeholder content from the original imported template.

Is there a way to save an edited campaign email as a new template while retaining the new content (copy/images) without the content reverting back to the original imported custom HTML template?

Reply


Most helpful members this week

Terms & ConditionsCookie settings

Links & Resources

Platforms

Partners

Useful Things

About

  • Terms and Privacy
    © 2024 Klaviyo All rights reserved. Klaviyo and the Klaviyo logo are trademarks or registered trademarks of Klaviyo, Inc. or its affiliates.