Visual e-mail builder

[joshuadegier]

First off: thanks for all your efforts that already went into sendportal. I've recently did the installation and I'm impressed, the interface is so clean and easy to use. Thumbs up!

The thing I was wondering is whether or not there are future plans to add a visual e-mail builder to the project. As far as I can tell, right now you have a template (containing a header/footer) and the {{content}} is injected from within the campaign. Having the wysiwyg editor is a good start, but how cool would it be if you were able to drag-and-drop building blocks in the editor and create a campaign that way?

There are a few (good) open-source projects available for these features and a as far as I can see it doesn't have to be a breaking change since this builder could be optional depending on the template type (basic for a wysiwyg content field or builder if the template contains one or more blocks).

I'd definitely be willing to invest some of my time into figuring out the options and ways to do this. Perhaps even help with coding this feature.

[JonoB]

Hey @joshuadegier - yep, definitely got plans to implement a visual designer. We'd be happy to consider any options that you may know of.

[joshuadegier]

I suppose Unlayer's is one of the best choices, but the hardest part of it all is the way templates are being stored and the way the right builder blocks are being loaded based on a selected template (since they probably vary between templates). A short write-up on creating an unlayer editor can be found here.

Just to lay out a path of how I'd see this work is:

1. You prepare an e-mail template offline (the "base" template and it's building blocks)
2. You upload the template in Sendportal, which saves the html, images, blocks, etc.
3. When creating a new Campaign you choose one of the templates
4. If it's a Unlayer-compatible template it would include/open the visual builder and preload the blocks
5. On save the rendered HTML is saved as the {{content}} string
6. We proceed as it is right now in Sendportal

I suppose this works for all other options like (Mosaico or GrapjeJS pretty much require the same effort. There are a few more, some are not open source and work via APIs. But Unlayer's seems like a very good and clean option.

[JonoB]

@joshuadegier is unlayer open source? I couldn't see anything obvious from their website https://unlayer.com/, other than commercial plans.

[ediblemanager]

Wonder if something like https://github.com/artf/grapesjs might work, @JonoB ? Downside is that it looks pretty heavy visually.

[nasirkhan]

@JonoB The Github says unlayer is open source https://github.com/unlayer/react-email-editor

@ediblemanager you are right https://github.com/artf/grapesjs could be a good choice too,

[salhdev]

Hi,
There is a laravel package that might be worth a check : https://github.com/Qoraiche/laravel-mail-editor
It uses Laravel's Mailable, but with some modifications, it could be an option.

[damms005]

Hi,
There is a laravel package that might be worth a check : https://github.com/Qoraiche/laravel-mail-editor
It uses Laravel's Mailable, but with some modifications, it could be an option.

I can contribute in this regard, with specific respect to Qoraiche's laravel-mail-editor package, if I can get a hand from anyone that knows about Mettle's internal workings, so it is more fun for me that way!

[dymond]

@joshuadegier Did you end up doing any work on this? I'm looking to implement something similar for a project I'm working on and wouldn't mind diving in with you in the near future.

[MilenFrom]

I'm thinking to create similar to Unlayer react builder.
Will start to code the core soon

[JonoB]

This has mostly been done. Please see mettle/sendportal-core#72

Would be great if a few of you could check it out and test!

[thebestbradley]

This has mostly been done. Please see mettle/sendportal-core#72

Would be great if a few of you could check it out and test!

Hey! I would love to test it out and play with it. Is there any documentation. I'm trying to implement it with the sendportal wrapper (stand alone application). Getting some errors that I'm trying to work out. Is the builder already included or. do I need to construct and call it somehow? Thanks.

[damms005]

@JonoB the PR you're requesting to be tested is currently not in a good shape. Like @thebestbradley mentioned, it throws errors out-of-the-box. And a lot of weird things going on. For context, see this VS Code search for one of the APIs in the original service provider:

That setCurrentWorkspaceIdResolver API is completely absent on your branch that you PR'ed. That causes a straight-up error in the browser:

It will be helpful if you can review your approach, or at least provide a guide that makes it easy to test.

In all, nice job taking a stab at this much-needed feature. Kudos!

[thebestbradley]

I'm wanting to move forward for building a package or a fork of this and adding the features. If anyone would like to joing me. I'm not the most experienced laravel developer, so someone on the team that can bring some experience and leadership would be a great asset. I like the idea of mergining existing packages to speed up development, but not opposed to doing this from scratch and building upon sendporta. Is anyone in?

[sebtryfetch]

Hi guys, does anyone know what the status is of merging the unlayer into master? Would be awesome to have this in there.

[perencinmarco]

Hi! Any update on this? Or it is abandoned?

[faridalizade]

Hello. Is here any update?

[Surenthiran]

@JonoB any update on visual designer

[hadifarnoud]

+1 for Unlayer. it is open source and really good. still got plans to add this?

[Oytoch]

Unlayer seems to not be fully open source. I installed it with angular and it create an Iframe with a link to unlayer server.

[hadifarnoud]

there is an open source version, I think.
https://github.com/zalify/easy-email-editor