Skip to main content
Solved

Creating a drag and drop functionality in my own HTML

K
Contributor I
Forum|alt.badge.img+4

Hi everyone
I code my email templates from scratch and I would like to use the modules I built as drag and drop blocks in Klaviyo, so my clients can create newsletters without my help in the future. 

I tried the method described in this very confusing article where you add the following code to your HTML:

<td align="center" data-klaviyo-region="true" data-klaviyo-region-width-pixels="600">
<div class="klaviyo-block klaviyo-text-block">
</div>
</td>

But no matter where I insert these snippets — surrounding the <p> or replacing a <td> in the table stack — it doesn't seem to work.

I end up seeing this, but I can't save the blocks or edit them:

 

What am I doing wrong? 


Thanks!
Kim

Best answer by David To

Hey @Kim Derkx,

Thanks for sharing your question with the Klaviyo Community!

I would recommend taking a look at my comment in a similar Community post made by @RichardGayler below:

In it you’ll find a video created by one of our internal team members which guides you on how to include this specific HTML to your template to offer your custom HTML template drag and drop-functionality. Keep in mind that the template will not appear to have drag-and-drop capability until you’ve included the HTML and used the template in a campaign or flow email. It will remain as a custom code in the Template Library view. 

Hope this helps!

David

View original
    Did this topic or the replies in the thread help you find an answer to your question?

    2 replies

    David To
    Klaviyo Employee
    Forum|alt.badge.img+60
    • David To
    • Klaviyo Employee
    • 2456 replies
    • Answer
    • May 22, 2021

    Hey @Kim Derkx,

    Thanks for sharing your question with the Klaviyo Community!

    I would recommend taking a look at my comment in a similar Community post made by @RichardGayler below:

    In it you’ll find a video created by one of our internal team members which guides you on how to include this specific HTML to your template to offer your custom HTML template drag and drop-functionality. Keep in mind that the template will not appear to have drag-and-drop capability until you’ve included the HTML and used the template in a campaign or flow email. It will remain as a custom code in the Template Library view. 

    Hope this helps!

    David

    RichardGayler
    K
    2 people like this
    • RichardGayler
      RichardGayler
    • K
      Kim Derkx
    K
    Contributor I
    Forum|alt.badge.img+4
    • Kim Derkx
    • Author
    • Contributor I
    • 1 reply
    • May 22, 2021

    Hi @david.to thanks for the quick reply!

    I did see that post and video yesterday, and I couldn't make it work at that point. But I started over today and now it does work!! Magic! And I just needed to read your explanation to finally understand, thank you so much!

    Kim

     

    David To
    1 person likes this
    • David To
      David To

    Reply


    Terms & Conditions

    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.