How to code custom drag & drop email templates in HubSpot?

[Mainata]

Hi folks!

I’m new to HubSpot and try to find my way but obviously, I need some help 😊 I have a lot of experience with coding email templates in div. email tools, but never done it in HubSpot. So I have to code an email template for a customer. It has to be drag and drop like the free basic templates from HubSpot. I looked around and try some stuff but I'm not really on the right track. When I code a Template and try to put a “dnd_area” then comes a bunch of errors. In the Developers Documentation, it says “Drag and drop areas can't be used in blog listing, blog post, and email templates at this time”. But there are the basic templates from HubSpot so it has to be possible somehow. In the “Design tools” section there are no email templates, so I can't clone one and try to find how it works. Is there some hope? If someone knows a way or has some information, it would be highly appreciated!
Thanks in advance!

Cheers and stay safe!
Mainata

[Mícheál]

Hi folks! 

I’m Mícheál, the Associate Product Manager of the Marketing Email tool. My team and I are currently working on a solution for Drag and Drop areas in custom email templates. 

The product development process is underway and we're hoping to deliver this feature as soon as possible. If you are interested in paricipating in the alpha/private beta period for this feature, please fill out this form or send me a message and we can set up some time to chat.

All updates will be relayed on this Ideas Forum post, so stay tuned!

Best,

Mícheál

[sockclub]

Hi Mícheál!

I am currently using the Beta for converting a coded email to a drag and drop email.

What I want to happen is that I can specify an area of the custom coded email that is left open for drag and drop editing, or make sections available to duplicate and/or change.

Here's what limits me when the whole email is changed to Drag and Drop:

• I have to switch to using Buttons instead of CTAs
• The styling on the individual blocks/modules/module groups goes away, and not all of my team is comfortable with inline styling on the individual modules
• The logo in the header switches to just an image block.

I am definitely open to doing things a different way if you can point me in the right direction here! I love a Beta, and would love to know how to use this feature better.

Best, Chloe

[Jaycee_Lewis]

Thanks for the update, @Mícheál 🙌

[sidewaysdesign]

I have had some success creating custom HTML email modules that work with drag and drop. The only thing that is missing is the ability to add custom CSS to the header. Gmail does not support inline stylesheets, though it does preserve CSS within an email header. I do not know who difficult it is to add a field to an email that would insert CSS in the header (or edit the default DnD CSS), but from the outside it would seem simpler than creating an environment to support DnD in fully customized templates. Regardless, I have signed up for the alpha and look forward to a response ASAP.

[Jane_deepma]

Hello Mainata

I am also facing the same problem could you please help me if you have already found the solution?

Thanks!

[Mainata]

Hi @Jane_deepma,

unfortunately, there isn't a solution, or at least I don't know of a solution. You can already code individual email modules, but not email templates, or you still have to use the templates provided by HubSpot.
I hope that the possibility finally exists because for a leading marketing tool it's pretty bad to have that kind of restriction.

regards
Mainata

[Mainata]

Hi Alyssa,

thanks for your time and your answer! I appreciate that!

What you describing would be my plan B and I already tried it. But what I really looking for is the possibility to code my templates from scratch. It's cool that HubSpot tries to help with ready-to-go templates, but they're also some guys who know how to code email templates and would do it themselves, including me 😉 Till now I did it in every email marketing tool I had to deal with and now in HubSpot is this not possible. Is there really no way to code email templates with drag and drop areas in the "Design Tool" (Design Manager). When I try, I get some Errors.

You know there is the possibility to clone an existing page template to work with it, but there are no email templates in the HubSpot folder. So why the restrictions? If that is not currently possible, might it be possible in the future? Is anything planned in this direction?

Thanks for your feedback!

Cheers
Mainata

[alyssamwilie · Accepted solution]

Yes, it's currently NOT possible to use drag and drop areas in coded email templates. The way I described is the only way to use DnD in email.

I believe Hubspot is thinking about doing what you're wanting possible but no idea if they're currently working on it or when it would be released.

I'd suggest submitting something to the Ideas forum to let Hubspot know it's a feature you want.

https://community.hubspot.com/t5/HubSpot-Ideas/idb-p/HubSpot_Ideas

[ConnorSlivensky]

Hello,

I'd avoid the word "code" unless you're referring to HTML/CSS/HubL to avoid confusion. Most email templates are made in the WYSIWYG editor that should be in design tools. It uses a 12 col. layout and you can create groups of modules and add some CSS and such to modules/groups as needed. So you won't "code" the email as a whole but tweak the modules/groups themselves. 

I think this article should get to the heart of your issue.

Also, here's the Knowledge Base topic on Design Manager that might be helpful as you work.

Hope that helped!

[Mainata]

Hi Connor,

thanks for your time and help!

But I really mean code 🙂 I'm an email template developer and I code the templates, so I need some specific information in that direction. It looks like there are some restrictions for drag&drop email templates in HubSpot. Whit the page templates it works so far, but by email templates with drag&drop area sadly not...

Thanks,
Mainata

[alyssamwilie]

Hey @Mainata ,

DnD email templates aren't built in the same way as page templates with drag and drop areas.

1. Go to the email dashboard

2. Create an email and pick a basic Hubspot DnD email template to start with

3. Build your email; if you can't build everything you want with the default Hubspot modules you can create Custom Modules for email in the design manager.

4. When you finish building click Actions in the top right corner and from the dropdown list "Save email as template"

And, yes, there are quite more restrictions to DnD email compared to pages but a lot of that is due to the limited html/css support email has.

[dennisedson]

Fun fact.  Recently, we did a podcast on email.  @alyssamwilie was the guest and she might have some tips for you here 😀

[Mainata]

that would be really cool 😀 thanks for the recommendation 👍

[dennisedson]

In addition to what @ConnorSlivensky has mentioned, there is the drag and drop email editor that you can use.  You can also save an email you create this was as a template for future use 😀

[Mainata]

Hi Dennis,

I appreciate your reply! Thank you! But I really need the Information about the coding side of the process 😉
The possibilities in the drag & drop editor are so far clear and if there are really restrictions with coding from drag & drop email templates, then maybe I will have to make some compromises. But I hope, that there is a possibility to code the email templates completely and not to compromise on that, so I have the whole flexibility of free coding 🙂

Thanks,
Mainata