Forum Academy Marketplace Showcase Pricing Features

Drag & Drop HTML Email Builder Plugin

Can you provide the error thrown? I’m going to send you a DM for additional Info as well.

EDIT - Make sure you have the send action for only when the builder element’s HTML isn’t empty, or put a delay in to make sure it has time to generate and export the HTML, it’s possible you’re attempting to send prior to the export process (usually takes 1-3 seconds) so postmark is actually getting empty HTML.

Thanks, Chris. I’ll message you. I had that issue before where I wasnt’ waiting for the export to happen. ive gotten around that. But i have a separate button that sends the email from when it gets generated. Even when i try in postmark with the html pasted into the call, it doesn’t send.

1 Like

Chris helped me out on this! It turned out to be a problem with the API call and how it was handling the html.

1 Like

Hey, Chris -

The plugin is awesome, man. Great job.

Quick question: what’s the simplest way to build an export workflow for an email design that users can easily import into their unique ESP?


Absolutely our demo includes the walkthrough for export and send.

You can then save the HTML and JSON to the dB connected to a user and display.

Hey Chris -

I looked on the plugin page and it says “view the demo below” but I’m not seeing the demo listed.

Have a link to it?

Hey Chris can you give me a brief rundown on how the dynamic tags work and what my expectations should be from them.

Does it link into the bubble DB, if so how? or does it just provided a preset selection of tags and I find&replace at a later date?

another question

when using the screen shot to image action, where does the image get hosted? how long does it stay there for? and how can we get it back to the bubble s3?

and question number 3

What is the best way to clear the editor for example “New Email”

1 Like

Hey @chad

1: dynamic tags you can specify in json like the pre placed holder provided. This is used for the builder interactions.

Since you’ll be using your own sending service you’ll need to :findandreplace and specify your tags and the value to be replaced by.

2: they get stored based on your unlayer plan check their pricing (or free plan) for info on storage length etc.

You can save the returned value by doing :savedtoS3

3: you can clear the groups contents or better yet IMO is when initializing the builder do it based off a blank template ID created in your unlayer dash so every load is fresh.

If you need more in-depth help send me a message and we can schedule an consultation on it.

Things we use the builder for:

save and edit email templates

send custom emails

allow users to create proposals with signature boxes

load custom elements

allow users to build simple 1 page websites/landing pages

allow users to create email blasts

Much more! At a core level it just exports HTML/CSS/JS based on the builder. JSON to reload into the builder.

Yeah it’s ace. Thanks for the reply.

I love it

It works well

The support is great

I’m going to do something I should do more often and give it 5 stars

1 Like

Hey @chris.williamson1996 ,
I would like to add “Insert dynamic data” to the “Tags” field in the “Initialize Builder HTMLDrag&DropBuilder”. Is it possible? I’ve had an idea that my end-user will be adding tags on the other tabs. And later, end-user could choose tags from the actual list.

1 Like

Will shoot you a message for more info as a bit confused

Edit: response given for the question, “how to allow dynamic tags and save a dynamic value from the tag”
On initialization you have a tags box. You can add them in there.

It will need to be formatted correctly as shown in the default value of tags.

You can either manually define those and use :findandreplace when either saving OR when send the email. Personally I prefer doing it on save.

For example you will define the in initialization this allows them to be shown in the editor of the builder like shown on the plugins demo. So users can 1 click to add a tag.

Then when you run your export HTML & JSON function you will do

create a new thing HTML:findandreplace

Thing to find: {{example_tag}}
Replace with: the correct data.

Hello Chris, Your Plugin works well but Im having a hard time sending email templates that I have already made and saved to bubbles DB.

Currently I am able to initialize the builder, build using custom code, Save the HTML & JSON to the Bubble DB but I can not figure out how to send the saved email temp at a later time, when sent the email show up as RAW HTML or JSON. Any pointer will be greatly appreciated !

You’ll need to use a plug-in that supports HTML emails.

Please give ah explain of a plug-in that supports HTML emails?
I was under the impression that your plug-in did just that? or is the sole purpose as a HTML builder ?

It souly builds the universal HTML that should work with any email sender.

Sendgrid/mailgun/etc all have this feature.

We didn’t want to attach an email sending option as it would restrict users to whatever service we chose.

Apologies for not mentioning that we are using the Sendgrid API to send emails. After we save the email template to our bubble DB we are trying to give the user the option to easily send prebuilt templates to their customers via email (This is a CRM ) But when the email is received its only coming across as RAW text?

If you’re using a self created API please make sure you’re specifying it as HTML otherwise it will be raw.

For plugins only a couple plugins on bubble actually support sending HTML. Make sure your plug-in specifies it. I’m not around a PC otherwise would recommend one.

Thank you for your help and sharing this awesome API Chris

Everything seem to be working except one issue I am still facing with how the element actually gets displayed on the page after initialize, No matter where I place the HTML element in its group it will only display at the bottom of the page cutting on 50% of the builders UI .

@karshypr oh man thats quite the issue =( i’ve checked all of our apps using the plugin and not seen the issue. send me a DM and i can either hop on a call with you or get access to your app to see if i can find the issue.