CMS Development

Mainata
Top Contributor | Diamond Partner
Top Contributor | Diamond Partner

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

SOLVE

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

0 Upvotes
1 Accepted solution
amwilie
Solution
Key Advisor | Elite Partner
Key Advisor | Elite Partner

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

SOLVE
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

If this answer solved your question, please mark it as the solution!

Alyssa Wilie

Web Developer at Lynton

explore hubspot themes from lynton

Need custom website/integration development or help optimizing HubSpot for your organization?
Schedule a consultation with us, an award-winning HubSpot Elite Partner.


Or check out our blog to get the latest in marketing, design, integration, and HubSpot knowledge.

 

View solution in original post

12 Replies 12
Mícheál
HubSpot Product Team
HubSpot Product Team

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

SOLVE

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

Jane_deepma
Member

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

SOLVE

Hello Mainata

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

 

Thanks!

0 Upvotes
Mainata
Top Contributor | Diamond Partner
Top Contributor | Diamond Partner

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

SOLVE

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

0 Upvotes
Mainata
Top Contributor | Diamond Partner
Top Contributor | Diamond Partner

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

SOLVE

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.

 

Mainata_0-1618468890356.png

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

amwilie
Solution
Key Advisor | Elite Partner
Key Advisor | Elite Partner

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

SOLVE
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

If this answer solved your question, please mark it as the solution!

Alyssa Wilie

Web Developer at Lynton

explore hubspot themes from lynton

Need custom website/integration development or help optimizing HubSpot for your organization?
Schedule a consultation with us, an award-winning HubSpot Elite Partner.


Or check out our blog to get the latest in marketing, design, integration, and HubSpot knowledge.

 

ConnorSlivensky
Key Advisor | Elite Partner
Key Advisor | Elite Partner

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

SOLVE

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
Top Contributor | Diamond Partner
Top Contributor | Diamond Partner

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

SOLVE

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

amwilie
Key Advisor | Elite Partner
Key Advisor | Elite Partner

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

SOLVE

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.

If this answer solved your question, please mark it as the solution!

Alyssa Wilie

Web Developer at Lynton

explore hubspot themes from lynton

Need custom website/integration development or help optimizing HubSpot for your organization?
Schedule a consultation with us, an award-winning HubSpot Elite Partner.


Or check out our blog to get the latest in marketing, design, integration, and HubSpot knowledge.

 

dennisedson
HubSpot Product Team
HubSpot Product Team

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

SOLVE

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

0 Upvotes
Mainata
Top Contributor | Diamond Partner
Top Contributor | Diamond Partner

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

SOLVE

that would be really cool 😀 thanks for the recommendation 👍

0 Upvotes
dennisedson
HubSpot Product Team
HubSpot Product Team

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

SOLVE

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 😀

0 Upvotes
Mainata
Top Contributor | Diamond Partner
Top Contributor | Diamond Partner

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

SOLVE

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