Forum Academy Marketplace Showcase Pricing Features

Drag & Drop HTML Email Builder Plugin

Hey Guys!

Over my last couple years on bubble building CRM’s, white label software, and business management softwares I’ve lacked one major feature…the ability for users to easily customize emails without needing to build them out inside sendgrid templates.

I’m excited to release a new plugin built that allows you to use a simple drag and drop email builder!

Using this plugin you can:

  • Allow your users to export/save the HMTL/JSON of a built email template
  • Later load the template to send/edit later!
  • Have full custom emails similar to natively building on Mailchimp
  • Build 1 Page landing pages and display.
    and more!

What do we use this plugin to do?..
We have an app geared towards marketing agency owners that allows them to manage clients and their team, inside this we have drip campaign functionality where they can connect via their sendgrid API, rather than asking them to create templates inside sendgrid we allow them to use this drag and drop email building plugin to save templates, emails, and send their clients or prospects beautiful emails without the hassle of creating sendgrid templates.

Additionally we allow them to create single page landing pages that they can direct their clients to.

With the functionality of the builder it’s as simple as exporting the HTML code via an action provided by the plugin. When doing so you can even use dynamic tags using :find&replace!

This plugin is now live in the store on bubble!

Preview: https://dragndroppreview.bubbleapps.io
Editor Look how easy it is to setup! https://bubble.io/page?id=dragndroppreview&tab=tabs-1
Plugin Page:: https://bubble.io/plugin/drag--drop-email-builder-1598181800616x376676450988195800

15 Likes

The editor link you’ve provided is the same as the preview.

1 Like

Fixed, thank you!

1 Like

Great stuff. Wow an email builder and a website builder on the same day. Bubble users are pushing the box

4 Likes

That’s the fun of it!

Dude, I just tested it. This is amazing. Well done. Can the interface itself be customized by the app buyer?

1 Like

I was looking at doing this with GrapeJs. I will check it out when I’m on a desktop but I may already have an app I want to use this on so well done! Second the question can it be customised? On top of that, can it be extended? Anyway, great job!!

In the current state, the builder itself can not. As you see from the editor the builder is actually only a portion of the interface, the send, save, templates etc are bubble managed.

In the near future I’ll be updating the plugin to allow CSS/JS customization of the builder itself as well!

2 Likes

We actually considered turning GrapesJS into a plugin, however, the interface of grapes can get a tad confusing for users if your target market isn’t technically inclined. In the current state Grapes will definitely allow more customization however is not quite as plug and play. Our goal with this was to give even the novice bubble devs a solution we’ve been looking for ourselves for quite some time.

3 Likes

@chris.williamson1996 Really impressive!

1 Like

Woah!! This is super cool!

2 Likes

amazing work thank you :slightly_smiling_face:

1 Like

Nice job, @chris.williamson1996! Great addition to the Bubble community

2 Likes

Wow! I’m reading this at 1am and instead of going to bed I need to try this out. This is sorely needed and thank you for making the effort to solve this problem.

3 Likes

@chris.williamson1996 - great !!

2 Likes

@chris.williamson1996 This is really exciting! You mentioned in your intro post :

How would one go about doing this? And to make sure I’m understanding correctly, would this allow users to build their custom profile page or store for example?

1 Like

Theoretically, yea. But will need some extra work on your end.

If you’re going for something like a store or recommended a more advanced builder like grapesJS.

1 Like

This is fantastic! I’ve been looking for something like this for a while. Nice work.
How can I add dynamic text in the emails? For example, If i’m sending a newsletter email to a list of subscribers, how can I personalize the email and address the subscriber by first name? Something like “Hey {{first name}}!”

1 Like

Currently the plug-in doesn’t support dynamics however this will be changing soon, however you can use find and replace when saving the JSON and/or HTML export.

2 Likes

Thanks for the quick reply. I’ll need to dig in more to see how to do the Find and Replace. It seems I need it to find and replace the first name for each subscriber upon sending the email.
Do you have a rough estimate on when you’ll add support for dynamics? Not to pressure… If it’s a few weeks, i’ll probably wait for that. If it’s a few months, i’ll probably look at a different solution.

2 Likes