Mautic: New Email builder

[npracht]

Description

This issue is meant to get information and inspirations for the new email builder we plan with Mautic 3 and the total refactoring of the email builder feature.
Feel free to comment with documented responses and examples/illustrations.
@Enc3phale would like to carry the development of this world class builder.

Ideas

Back

• using mjml open source project to generate a high quality code for all client emails
• dynamic zone (directy on the slot, ability to set the slot as dynamic)

Front

Extra features

• integration of litmus or emailonacid to have the preview on email clients directly in mautic
• integration of spamassassin to test quality of the email (impact on delivrability)
• start from row pre-structured template
• save emails created as templates (to build your own library directly from the interface)
• Integration of AMP new feature
• add option to set preheader

[csaeum]

+1

[kuzmany]

I am working at the moment on GrapeJS integration.
Hope in good progress in next few days.

[npracht]

@kuzmany i am not fan of starting from a library even if it could be helpful. Starting from a third lib would bring constraints.
We need to start from user needs/expectations and a targeted UX. Then from there if we have a library that can help, this is great. Otherwise this is not good.

[albanleandri]

IMO, the ability to add conditional logic directly and entirely in code area like handlebars used in Mandrill would be very beneficial. At some point, organizations with large amount of email templates would prefer to version the template codes in MJML or equivalent so that it can be updated and modified easily, leveraging components, etc... It's harder when all the email code logic is not self contained like it's the case with Mautic currently when one uses the dynamic email content blocs, whose content and logic are separated from the rest of the email.
Regarding MJML, for reason above I would rathrr it's probably rather prepare the MJML on my side, git + vsc, and just copy paste the HTML generated in Mautic.

[benfavre]

What do you think about the ability to pull in content in from RSS or some external source

[oytuntez]

MJML and GrapesJS sounds amazing!

With this, we should also make sure for all individual emails to inherit from a given email template (basically, only store slot values instead of the whole email, if this logic still persists in M3 – is this "dynamic zone" by @npracht?)

[afonseca08]

Great ideas, I just started receiving AMP emails from Pinterest in my gmail account so this already rolling out.
https://litmus.com/blog/gmail-rolls-out-support-for-amp-for-email

[wittwerch]

We have been using https://beefree.io/bee-plugin/ in our custom Mautic for a while and are really happy with it. It basically allows marketeers to create emails from scratch without having any themes or something installed/create upfront. That's a killer feature in my opinion.

[andjules]

@npracht I understand your position of starting from user needs vs starting from library.
However, 'needs' discussions often end up with every person talking about their individual, quirky needs. It seems clear to me, at least, that the most common sense of needs would be:

• basic drag'n'drop, responsive builder for most users
• code-editing (or importer) for more fine-grained control/programmers
• basic variable templating/mail merge
• _Nice-to-haves_ might include repeater-templates or grapejs/webflow-style fine-grained style editing.

In the end, as a platform, I think we'd do best to:
a) take a quick survey of existing, easy-to-use 3rd party email builders with healthy communities and then pick one (building our own from scratch would be a _major_ project!).
There are many options out there (mostly commercial/freemium), e.g.:
beefree.io, mosaico.io, chamaileon.io, topol.io, stripo.email, as well as an interesting project to integrate mjml with grapejs for an open-source drag-and-drop experience
b) use a switchable/plug-in architecture, so geeks/users-with-specific-needs can use a different builder with relative ease (I have some customer-specific reasons to prefer using stripo.email, but I also know it would not be best choice for _most users_).

[npracht]

I agree with you. If we find things that answers most of ou expectations, we should stat from it and extend features ;)
Thanks for your feedback !

[benfavre]

https://github.com/artf/grapesjs-mjml as suggested by @andjules is basically 98% there.
Parse the output with the php core and replace the tokens "{{ whatever_tag }}" with actual variables/custom HTML, and allow us to extend the tag library.

[magician7]

Especially we can use grapesjs library not only in email but also in landing page builder - https://github.com/artf/grapesjs. I understand point of view to follow user needs, but if there is ready to go solutions which works, why not use that?

[fuschini]

Looking foward to see this!

[npracht]

From contributionDay Workshop --> Will be planned into mautic 3.x minor version.

[benfavre]

do we have any sort of eta ?

[npracht]

Not now, we're currently working on Mautic 3.0 symfony update. We'll draw that afterward.

[npracht]

@dbhurley I've been talking to @ngarnier who's in charge of https://github.com/mjmlio/mjml project. As we mentioned in our discussion in Amsterdam, if we want to change the current HTML generator for emails to MJML (which is the most performing OSS nowadays), it needs node.js.
Which could be a show stopper for Mautic community users.

Nevertheless, mautic.org could offer an API service on a node server to transform MJML to HTML like does https://mjml.io/api. That way we remove any dependence from MJML API service and do not require the installation of a node server for Mautic community users.
And people that want to have a higher quality service and/or remove dependency from mautic mjml api service, could run their own service.

--> What do you think of it?

[andjules]

@npracht forgive me if I'm misunderstanding the issues, but I think the GrapeJS-MJML folks _(and it's important to remember, we don't want hand-coded MJML, the real goal is a drag-and-drop email builder)_ have already worked around the NodeJS dependency, no? From the GrapeJS-MJML read me:

MJML components are rendered in real-time using the official v4 compiler (+ some mocks to make it run in the browser)

Some reading:
https://github.com/artf/grapesjs-mjml/pull/105
https://github.com/bures/mjml4-in-browser

[bob-swinkels]

@andjules I think you're right! If I open the demo from the GrapeJS-MJML repo and close my network connection the rendering engine and still works, so does the compiling to MJML and HTML.

[brafreider]

@bob-swinkels , @andjules you are right, there is definitely no node.js dependency with grapejs-mjml, we have just built an email editor with cleaner UI (also less features) based on grapejs and mjml and it runs in the browser, connecting to a PHP API only.

[npracht]

Yes you are right, we're thinking around it. The idea would be to:

1. transform the MJML in HTML in the user browser.
2. save HTML and MJML in DB
3. if you edit the email, it goes from MJML (easier to handle)
4. if you send the email, takes the saved HTML copy, no need to execute node.js to generate it from MJML.

[brafreider]

That's exactly how we currently do it. Results look great even in Outlook.
Translation of grapejs was a little bit tricky and there have been some issues lately with messed up formattings after saving and reloading mjml. We'll be glad to contribute, as soon as you start integrating it.

[mautibot]

This issue has been mentioned on Mautic Community Forums. There might be relevant details there:

https://forum.mautic.org/t/replace-landing-page-builder-email-builder-with-grapesjs-os-library/12885/2

[mautibot]

This issue has been mentioned on Mautic Community Forums. There might be relevant details there:

https://forum.mautic.org/t/replace-the-landing-page-builder-with-gutenberg-builder/12863/2

[mautibot]

This issue has been mentioned on Mautic Community Forums. There might be relevant details there:

https://forum.mautic.org/t/mjml-grapesjs-email-builder/13076/1

[npracht]

Hi there!
Short update about where we are about the new email builder we're creating with @Enc3phale for mautic community !

1. We are currently creating a plugin to replace current email builder with grapesJS and mjml. Why a plugin? Because people will be able to install this plugin when they want and if they want whenever they want.
   
   
   
   • This version will be ready end of March and presented in Gent for the next Mautic Community Sprint.
   
   
   • It has to be considered as a POC. Fully functional and only changing interface + code quality. At that stage it does not enhance or integrate any other feature (but this is already nice right?)
   
   
2. In Gent, we'll brainstorm to define the UI/UX/enhancement we want to integrate in this new builder. For instance, how dynamic content is managed, automatic A/B testing, save email as template, etc. and draft a enhancement roadmap.
3. I'll encourage Mautic Core team to consider integrating this world class new email builder in mautic core to replace current old fashioned email builder. That will be discussed with Core team and Product team. That knowing that the current POC we prepare is migrating current email template as new email template without BC.

Stay tuned!

[kuzmany]

@npracht great to hear about progress 👍

[rmdes]

This is the best news ever, can't wait to test this out !

[alexhammerschmied]

This is really awesome. I know from my own experience and some of our (ex-)customers that this feature is a deal maker or breaker for Mautic!
Would this plugin replace the current pagebuilder as well?

[npracht]

We will also work on page builder ;)

[awurman]

Hi! is there a status on this? need any help?
Thanks for the work!

[npracht]

Hello ! We’re currently working on it and we’ll show the progress to the community in the near coming days.

[mautibot]

This issue has been mentioned on Mautic Community Forums. There might be relevant details there:

https://forum.mautic.org/t/new-email-builder/13796/1

[edtaaffe]

It's very important not to get sidetracked with desirable functions and create emails that collapse in Outlook.
I had to make my own templates that were bomb proof in outllook, otherwise you will never know why your open rate is so poor.
Millions of nested old fashioned html tables looks awful to a coder.
But to outllook and all other clients it looks beautiful and our customers don't know or care about code

[RCheesley]

@npracht perhaps you could share the recording of the presentation & any further details in this thread, so that those who were not in the sprint this week can get up to speed!

[npracht]

Demo of what has been done so far and some questions https://www.youtube.com/watch?v=1DrXZT3Xryo

[skacco]

Hello. Is there any update on this great feature?

[npracht]

My team is going to make the new email builder based on grapes.js as a public plugin in coming days.

[scottybo]

@npracht is there a github repo we can follow?

[npracht]

Not yet, I’ll ping all of you when we’ll make bêta public.

[skacco]

Hello do you have any beta release to test?

[adiux]

I did see that the Version 3.1.0 milestone has been added. Does this mean the release of this has been set to August? Or can we expect to get it before as a plugin?

Mautic 3.1.0 - 3.x improvements and new features [August 2020]
https://www.mautic.org/blog/press/mautic-community-introduces-multiple-major-improvements

[npracht]

We can expect the plugin being accessible before ! But in case we ass it natively in Mautic community plugin it won’t be before.

[Wise-Gorilla]

@npracht
I was wondering why you didn't consider those 2 instead
https://github.com/unlayer/react-email-editor
https://github.com/npracht/delipress

[npracht]

Hi @Wise-Gorilla you know they are tones of them. We had to choose one we believed is good enough.

[alexhammerschmied]

is there something we can do to help building/testing?

[RCheesley]

I believe that @npracht has shared a beta for testing a little while ago - perhaps you could drop the link here?

[TornMarketing]

Keen to review the beta aswell :)
Been following this project as the main priority for Mautic to progress as a platform and our use of it.

Happy to contribute where possible

Is this the latest @RCheesley @npracht ??
https://github.com/Webmecanik/plugin-grapesjs-builder

[npracht]

Hi @TornMarketing ! Yes you can take that, install it, test it and share feedback directly on the repository.
I need to write an article on mautic community to announce it and ask for contributors and volunteers. I think this is a good move forward looking at the existing builder even if it is not 100% perfect.

[proffalken]

I've hit an issue in a brand new install of M3 which for some reason means I can't create or edit any emails - the builder brings up the menu on the right but a blank page on the left.

Is it worth me trying this new way of working rather than troubleshooting the old builder, and if so, do the instructions in the README at https://github.com/Webmecanik/plugin-grapesjs-builder apply to both Mautic 2 AND 3, or just Mautic 2?

(There are no errors either in the server logs or the browser console :( )

[proffalken]

@npracht apologies for pinging you directly however this is preventing me from migrating from Hubspot to Mautic at the moment - can you advise on the above please?

[RCheesley]

@proffalken he's away on holiday for two weeks at the moment - is there an issue where I can take a look at the problem you mentioned?

[proffalken]

@RCheesley ok, that's understood.

I've not logged a new issue for this yet as I was hoping to understand whether what I'm seeing is a known problem.

At the moment, on a fresh installation of Mautic 3, when I go into the Email Builder after I've selected and applied a template, this is all I see:

There are no errors in the PHP logs that I can find, nor are there any errors in the browser console. I'm wondering if the new builder might solve this, and if there's a chance it will then should I follow the exisiting instructions which appear to be for Mautic 2

[npracht]

Check in the instruction of the repository listed above. You'll see that you need to change the way your templates are done: using a file with xxxxx.mjml.twig to execute grapes.js builder.

[proffalken]

Thanks @npracht - So to clarify, I can use this with Mautic3 by following the same instructions, including applying the patch to the source-code?

[kuzmany]

@proffalken plugin is not ready to M3 at the moment. Installation instructions are related to M2

[proffalken]

@kuzmany thanks, I'll keep digging through my problem then :+1:

[kuzmany]

@proffalken @npracht @RCheesley I've added support also for Mautic 3. Installation in readme.md https://github.com/Webmecanik/plugin-grapesjs-builder/

[weismannweb]

I have two feature requests. I did not see a discussion in the Mautic forum and I did not want to post an issue if its not a bug.

@npracht how hard would it be to include the grapejs video block and does that video block have fallbacks for lack of support of video in different browsers? I did not find a proper video block for grapejs but I might be willing to fund development of one that fails gracefully for email clients that don't allow video.

Also how hard would it be to include this: https://github.com/rjocoleman/grapesjs-plugin-uppy

I might be willing to find some time to do it but not if its a heavy task. I probably only have 6-12 hours of time for both. I am also not the best at javascript...more of a backend php guy.

Thanks!

[alfmos]

I have just installed the bitnami mautic 3.1 vm and it has the exact same problem. It seems the grapejsbuilder is not included in the installation

[imekedaprahs]

My suggestion is to avoid using an iFrame if at all possible, I believe the current implementation is Froala in an iFrame. Can help if needed

[ayushgangrade11]

I too have recently installed mautic using Google Marketplace on gcp and I am also facing the exact same issue.
Can you please help out.

I am getting this error when trying to create a new templated email in the portal.

Request URL: http://xxxxxxxxxxxxx/s/grapesjsbuilder/email/3?template=sparse&_=1600004267356&mauticUserLastActive=442&mauticLastNotificationId=
Request Method: GET
Status Code: 404 Not Found
Remote Address: XXXXXXXX
Referrer Policy: no-referrer-when-downgrade

{errors: [{,…}]}
errors: [{,…}]
0: {,…}
code: 404
message: "Requested URL not found: /s/grapesjsbuilder/email/3?template=sparse&_=1600004267356&mauticUserLastActive=442&mauticLastNotificationId="
type: null

[TornMarketing]

Hey team,

Where are we at with polishing and patching this to production?

Few items I have noted with image upload and management, but beyond that it seems rather solid.
https://github.com/Webmecanik/plugin-grapesjs-builder/issues/7

Dwayne

[alexhammerschmied]

Hey team,

Where are we at with polishing and patching this to production?

Few items I have noted with image upload and management, but beyond that it seems rather solid.
Webmecanik/plugin-grapesjs-builder#7

Dwayne

I built a huge project in the last month with the pagebuilder (together with the regular html builder). I found some real downsides during the work. I created more then 25 pages which are in production right now. They work, but there is a LOT of improvement to do regarding usability of the builder, bugs and performance of the pages (unloading JS, ...)
I am going to post a list/create PR's on the necessary changes/improvements.
Anyway it is an awesome tool and it is going to be a REAL competitor to software like clickfunnels, leadpages ...

[benfavre]

Using the plugin in production also.
Biggest issue is the U.X. for non devs, specifically the lack of auto focus on the main attributes of an element on click

[adiux]

Is there a fix/workaround for the issue with the stylesheet? When I load the landing page in the builder, the CSS is ignored. It is not a problem on production, but there is no WYSIWYG experience for the editor.
https://github.com/Webmecanik/plugin-grapesjs-builder/issues/18

[alexhammerschmied]

What is the latest news/plan/milestone on this issue?
Is there going to be a community version of the grapesJs Builder? Yes or No?
How can we proceed with this? I heard and read different point of views on this topic and to plan longterm it would be great to know if there is something definitely planed on Mautic side or not...
Does anyone know something for real?

[npracht]

Hi there,

You can all contribute to https://github.com/Webmecanik/plugin-grapesjs-builder. We have released that publicly. We know some work has to be done to make it perfect, but today my company is focusing on something else. Any help would be appreciated. We'll comeback helping on this later.

[moerazem]

Acquia Campaign Studio (previously Mautic Cloud Pro) already introduced BEE Email Builder to its managed Mautic instances.
https://docs.acquia.com/campaign-studio/channels/emails/bee-email-builder/

I wonder if Acquia will contribute this back to Mautic open source.

[mautibot]

This issue has been mentioned on Mautic Community Forums. There might be relevant details there:

https://forum.mautic.org/t/mjml-grapesjs-email-builder/13076/4

[elilogan]

I wonder if Acquia will contribute this back to Mautic open source.

It was mentioned on Slack that this was only licensed for the Acquia product.

[mautibot]

This issue has been mentioned on Mautic Community Forums. There might be relevant details there:

https://forum.mautic.org/t/mautic-lands-in-promotions-or-spam-folders-seems-to-be-impossible-to-tweak-any-idea/16675/17