Solved

Lack of drag-and-drop functionality from HTML template


Badge

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

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

View original

2 replies

Userlevel 5
Badge +3

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

Badge

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

Reply