Email Template Builder

[ansidev]

Is your feature request related to a problem? Please describe. Copy and paste HTML code for email template is not easy for non-tech people.

Describe the solution you'd like As a user, I want an email template builder (drag and drop to create it).

[knadh]

I haven't come across any out-of-the-box FOSS template builders. If there is one, we could consider integrating. Building a full fledged e-mail builder from scratch might turn out to be more effort than the rest of listmonk combined :)

[jackdanielux]

Better would be to use any third party drag drop builder, download the template, copy paste the html directly into the editor.

On Tue, 19 Oct, 2021, 9:34 am Kailash Nadh, @.***> wrote:

I haven't come across any out-of-the-box FOSS template builders. If there is one, we could consider integrating. Building a full fledged e-mail builder from scratch might turn out to be more effort than the rest of listmonk combined :)

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/knadh/listmonk/issues/521#issuecomment-946348794, or unsubscribe https://github.com/notifications/unsubscribe-auth/ARESAVBOQUZC62CPQP5PPGTUHTU3HANCNFSM5GG6U5WQ . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

[ansidev]

Better would be to use any third party drag drop builder, download the template, copy paste the html directly into the editor. … On Tue, 19 Oct, 2021, 9:34 am Kailash Nadh, @.***> wrote: I haven't come across any out-of-the-box FOSS template builders. If there is one, we could consider integrating. Building a full fledged e-mail builder from scratch might turn out to be more effort than the rest of listmonk combined :) — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#521 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/ARESAVBOQUZC62CPQP5PPGTUHTU3HANCNFSM5GG6U5WQ . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

I think you never do that before. That's a bad idea. listmonk uses Go template syntax. The existing email template builder doesn't use it. So there will be no way that users just need to copy and paste it. They need to edit more, and it's not familiar to non-tech people.

[ansidev]

I recommend https://github.com/unlayer/vue-email-editor

[cb3inco]

I'd like to see this also. I've also run across these:

https://github.com/Shopify/liquid - https://shopify.github.io/liquid/ https://github.com/TedGoas/Cerberus

I've also would like something like this. Dealing with the different view modes of light and dark and maintaining that has been tricky.

mail train users GrapeJS and Mosaico that look similar to VUE

[knadh]

I recommend https://github.com/unlayer/vue-email-editor

This looks good!

[jackdanielux]

+1 Vue one looks good.

On Tue, 19 Oct, 2021, 2:07 pm Kailash Nadh, @.***> wrote:

I recommend https://github.com/unlayer/vue-email-editor

This looks good!

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/knadh/listmonk/issues/521#issuecomment-946488701, or unsubscribe https://github.com/notifications/unsubscribe-auth/ARESAVALXMCELVDCMBKOJW3UHUU4HANCNFSM5GG6U5WQ . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

[cb3inco]

Here are other tools too:

https://github.com/artf/grapesjs-mjml https://github.com/mjmlio/mjml

[demirelio]

I second MJML. I believe if mjml would be the templating lang for email creation, there will be no need for drag and drop. People then can go either create their emails easily or use Passport(Drag and drop tool on top of MJML from Mailjet) and easily copy and paste the output here.

[halms]

I also think that MJML would be a great addition to listmonk, as it makes Email-HTML somewhat bearable.

My ideal workflow would be to have MJML available both in the template and the actual email content editor, possibly both via a graphical editor and as MJML code.

The basic idea is that one could create the template as MJML, and then define one container as the one that holds the content. The individual component could then just be more MJML that gets inserted in this container and then the whole thing gets rendered to HTML.

In terms of rendering, one would probably have to rely on an external API. MJML is a JavaScript library and there are no Go ports that I know of. When using a browser, rendering could be offloaded to the client, but that does not apply for using the API to generate Emails. There one would have to use some MJML-API to render the template. MJML offers a free API for that (https://mjml.io/api), but it also possible to selfhost this with a minimal server around the library (e.g. https://github.com/danihodovic/mjml-server).

I could imagine myself looking into implementing something like this after I familiarize myself with Go a bit. Except for a change in the data structure, I think the implementation (at least for MJML code) could be rather straightforward.

A visual editor for MJML (most probably the above-mentioned grapesjs-mjml) could then be put on top. It is just not yet clear to me how this would work for the template-and-content workflow.

One comment on the recommended: unlayer/vue-email-editor It seems to me that unlayer is a commercial product, albeit with a free version available. The Vue component is just a wrapper that includes this and loads the editor from unlayer.com I don't know what limitations are there if only embedding anonymously without signing up, but it definitely is an externally loaded, non open-source dependency.

[aksanoble]

+1 to the need for the email template builder. +1 to the Vue-email template builder instead of mjml. This will go a long way to make listmonk accessible to people who aren't familiar with html/programming. For example to change the background color as well as changing colors in the footer today requires one to edit the template directly. The drag and drop vue template builder solves for this.

[olivierlambert]

Vue-email integration seems indeed very attractive! Is there anything we can do to boost it? (donation?)

[knadh]

Unfortunately, vue-email is a wrapper around https://unlayer.com/embed which is not open source. So that's a no go.

[olivierlambert]

That's indeed a big red flag :disappointed: So mjml it is then? :thinking:

[devinellis]

How about some sort of integration pipeline, where you can configure your template (and message data) to be POSTed to an arbitrary URL and have Listmonk accept the response (sort of like a webhook) This would allow for many other kinds of integrations, like a CMS injecting more variables, or conditional rendering.

It sounds slow, but if you are considering a call out to the MJML API, might as well make it a bit more flexible.

That said, we use MJML and I think using their desktop app and copy/pasting into Listmonk would be a decent workflow. It’s unfortunate they don’t have a Golang parser.

[knadh]

@devinellis that would be a niche but complicated setup.

That said, we use MJML and I think using their desktop app and copy/pasting into Listmonk would be a decent workflow. It’s unfortunate they don’t have a Golang parser.

This is the a simple and universal solution that's a fair trade-off until we find an embeddable template editor.

[stripu]

I'm just going to leave this here: There's also a lot of third party apps that are great for email templates (for example we're using Stripo). The output is usually a index.html file and a folder with the images. What I'm thinking, maybe in the meantime you could add a button to upload a custom template (a zip file that contains the index.html and images folder), and use it as the campaign template. The other idea would be to have a url field, and use a already uploaded html template from any server (ex: https://myserver.com/templates/1/index.html)

Thank you for your effort in making this awesome app!

[knadh]

Looks like this is FOSS -- https://grapesjs.com (via #820)

[quickstar]

Looks like this is FOSS -- https://grapesjs.com (via #820)

This looks very interesting, especially because there are ready to use presets available. Especially the GrapesJS MJML plugin looks promising 🚀

[chladog]

Here is another nice DnD email editor: https://github.com/zalify/easy-email

It would be great, if we are able to hook any editor with input/output interface (string<HTML/MJML> | JSON) for storing the template in DB and a call of render method that would request the editor to generate and return final HTML on send.

[pjv]

A few questions on this issue, @knadh

Is the loose idea here to try to integrate with, say, grapesjs in a way that its page builder would become an alternative to what is now the rich format text editor in the “Content” tab in the campaign builder?

...or would it be incorporated as a template editor as an alternative to what is now just the raw html text field?

If the latter, is the envisioned workflow for doing something like a weekly newsletter (my use-case) that the user would be using grapesjs to build a new template for each campaign?

...or could grapesjs (or whatever solution you land on) be used for both building re-usable templates and also separately for building content sections that would be incorporated into those templates (like the rich text from the current campaign builder editor)?

Finally, is this integration anywhere on the radar yet?

(I’ve just put up a listmonk POC and it looks great.)

[jintron]

Here is another nice DnD email editor: https://github.com/zalify/easy-email

It would be great, if we are able to hook any editor with input/output interface (string<HTML/MJML> | JSON) for storing the template in DB and a call of render method that would request the editor to generate and return final HTML on send.

Second that recommendation. MIT License and seems to be actively maintained. Hope this gets integrated soon because it would make this a valid alternative to commercial newsletter solutions.

[yodatak]

Hi thanks for my trade union we use mjml and we want to use a lot listmonk and we love to have some sort of easy email or mjml simplified that can be easy for non technical people, Mjml render is also by default more beautiful I find than the markdown render

[cryptocake]

A few questions on this issue, @knadh

Is the loose idea here to try to integrate with, say, grapesjs in a way that its page builder would become an alternative to what is now the rich format text editor in the “Content” tab in the campaign builder?

...or would it be incorporated as a template editor as an alternative to what is now just the raw html text field?

If the latter, is the envisioned workflow for doing something like a weekly newsletter (my use-case) that the user would be using grapesjs to build a new template for each campaign?

...or could grapesjs (or whatever solution you land on) be used for both building re-usable templates and also separately for building content sections that would be incorporated into those templates (like the rich text from the current campaign builder editor)?

Finally, is this integration anywhere on the radar yet?

(I’ve just put up a listmonk POC and it looks great.)

Did you make a PoC of listmonk with Grapesjs integration?

And my global reply to this feature request: Are there any plans yet to add this feature?

[jbmolle]

Hi @knadh I've found a MJML Go Library here https://pkg.go.dev/github.com/Boostport/mjml-go. I don't know if it would help but we could imagine to integrate it with Grapesjs which will generate MJML code. And then transform MJML to HTML with this go package. Also as noticed in #596 we need to see if it's better to do Go template -> Pure MJML -> HTML on every email sent or MJML with {{}} -> HTML Go template compiled once at the start of the campaign and then HTML Go template -> HTML email on every email sent.

[MaximilianKohler]

So this would replace the current TinyMCE 5.10.7 Rich Text editor with something more advanced?

I found this annoying bug with the current TinyMCE editor: https://github.com/tinymce/tinymce/issues/9146 and I reported it to them, but it doesn't look like they're very active and I'm not 100% sure it's their fault.

[relikd]

Chiming in :) ... Can we have an intermediate step (which will be useful later anyway, I think)? Currently there is just an overall template but you will always start with a blank campaign body. I propose a second property to store the default value for the email content. This new value will be copied to the editor but remain editable. E.g. to store components (like styled buttons) or to have a general email structure.

It should be rather trivial to add such functionality now. And later, when we have a new template builder, the same logic can be applied to whatever editor it will be. There will always be a non-editable template part, and an editable but somewhat similar content part.

[panomitrius]

I'm just going to leave this here: There's also a lot of third party apps that are great for email templates (for example we're using Stripo).

@stripu I'm wondering if you have any ideas on this issue I've encountered when trying to use Stripos exported HTML in Listmonk?