Mosaico: Drag and Drop Mailings are here!

Published
2017-05-29 11:38
Written by
jamienovick - member of the CiviCRM community - view blog guidelines

We’re pleased to announce that the Mosaico extension v2 is finally available to download!*

Mosaico enhances the existing CiviCRM Mailing module to simplify the email creation process by allowing you to use a simple drag and drop mailing editor to create your emails. The Mosaico extension will then produce a responsive (suitable for mobile) and perfectly formatted email for you!

How do I use the new Mosaico?

1.  Mailing

With Mosaico Integration enabled, you will be led to the screen below when you choose to create a new mailing:

Here has everything you need to tell Civi about the mailing you are creating. This includes:

- Mailing name: A name for the mailing so you can recognise it later

- From: this is the email address that is going to be shown as the sender in customer's' inbox

- Recipients: the list of customers you want to send this mailing to

- Subject: subject line of the emails. You can use tokens in this field

- (optional) Campaign: the campaign this mailing is for (if you have CiviCampaign enabled)

- (optional) Reply-to: the custom email address you want any reply to be delivered to (if you have custom reply-to enabled)

When everything is ready, click on 'Continue' to move the the next step.

2. Design

The second step is 'Design'. You can either select an empty template to start fresh with (or you can use a configured templates that you made in advance previously - see the Mailing templates section below). Once a template is selected, the Mosaico template editor will appear.

In the editor, there are a set of designed blocks that can be used to assemble your mailing content. You can change the text, add tokens, insert images, even modify the colour from the style button in the top left!and many more. You can see examples of using this in the animation below:

 

At any point of the design process, if you want to test the mailing in your actual inbox or preview the content in a web browser to test responsiveness, you can use the 'Test' button on the top of the editor. I t allows you to preview both HTML format and plain text format. You can also send a test mail to an email address or a list of email addresses.

Once hit 'Close' button, your design will be saved to the mailing and you can always come back to edit it or reset it.

3. Options:

This is the last step for creating a mailing. You will be choosing to send the mailing immediately or schedule it to be sent at a desired time and date. The attachments, responses, tracking, and publication options you may have seen in CiviMail are available in 'Advanced Mailing Options'.

If you want to review your mailing before sending it, you can always use the steps in the wizard header to navigate back to the previous steps.

Mailing templates:

For most organisations you will have several email “styles” that you may use for mass mailings such as Newsletters, Campaigns or Member alerts. Rather than needing to configure the look and feel of the email each time you create a new mailing, you can create Mailing Templates using the Mosaico Templates option from the link below:

Here you can select from one of Mosaico’s “base” templates to create your own standard mailing templates for use in your mailings.

 

Once you have created a template it will then be available for you to select when you go through the mailing wizard above.

The ability to create mailing templates is defined by a separate user permission so you can specify one user role (the administrator for example) who can create and edit the templates, where as the normal users can create mailings (i.e. use that template for a mailing only).

Now onto the techie bit… Installation!

How do I install the new Mosaico?

Requirements:

CiviCRM: Mosaico Integration requires CiviCRM 4.7.16+.

For those who are running CiviCRM 4.6, don't feel left out, there is also a small backport patch that you can apply which allows Mosaico to be used with CiviCRM 4.6.26+.

PHP-ImageMagick: this needs to be set up on the server that your CiviCRM instance is running on. This might require some more technical knowledge. There are many references out there with simple steps to set this up if you know your way around server. e.g. http://php.net/manual/en/imagick.setup.php

Installation:

To install Mosaico Integration, like any other extension, firstly you need make sure your CiviCRM extension directory is correctly configured. You can find some guidance here if you are new to CiviCRM.

If you have already configured the extension paths, simply download the latest versions of the three extensions below from CiviCRM.org Extension Directory into your extension folder and enable them in the following order:

Shoreditch theme**

Flexmailer

Mosaico CiviCRM Integration

(For those taking from github download or clone the latest master of all the above extensions for the latest stable versions).

If you followed the instructions above and have Mosaico Mailing wizard successfully running on your site, very well done! You can now start to create your emails!

One useful note is that you can always still use the old mailing interface if you would like. These can be found at the following urls:

civicrm/a/#/mailing/new/traditional (new mailing with template_type=traditional)

civicrm/a/#/mailing/new/mosaico (new mailing with template_type=mosaico)

civicrm/a/#/mailing/new (new mailing with the default template type; depends on the mix of extensions)

Any draft mailings created with the old mailer will still continue to use the old mailing interface.

We will also be making the extension available for automated download from within CiviCRM soon but the extension is currently in final beta and we welcome feedback and bug reports on the github: https://github.com/veda-consulting/uk.co.vedaconsulting.mosaico.

** The Shoreditch Theme

You probably also have noticed that Mosaico wizard has a slightly different visual style than the rest of Civi. This is because Mosaico is one of the first CiviCRM extensions to use the new Shoreditch Theme extension. This extension defines a new look and feel for CiviCRM which is mobile responsive and also akin to the design material design language (see here for more information about that (https://civicrm.org/blog/jamienovick/extreme-makeovers-civicrm-style-introducing-the-shoreditch-theme-civicrms-new-user).

Although you need the Shoreditch theme for Mosaico, you do not need to do anything more then download and enable the extension for the Mosaico extension to work. (You do not need to change any CSS settings as described on the Shoreditch extension readme for example).

In the future however you will be able to use the instructions as set out on the Shoreditch extension to switch the rest of CiviCRM over to the new “theme” but the work for this is still in heavy development at the moment and not ready for production use.

Coming soon

There’s a lot more coming on the Mosaico front including an RSS to email block and work on integrating it more fully to CiviCRM’s other email sending (A-B testing, scheduled reminders and system emails). There will be a “make it happen” (crowd funding) campaign coming soon, so if you’re finding the new Mosaico useful and want to see more please think about getting involved and contributing to future development by contacting me at jamie@compucorp.co.uk!

A big thank you to all those who have been a part of this project: the team from Veda Consulting who developed the original extension, Tim Otten from the core team who worked tirelessly to make this a reality, our client Healthwatch who patiently provided funding, testing and feedback and the rest of the team at Compucorp for the design, UX, styling and QA to bring it all together. This is great example of our diverse Open source community from several corners of the globe working together to create something fantastic.

Thanks for reading… and happy mosaico-mailing!!

 

*We’ve got a final beta out which can be downloaded from github and we will be making this available for automated download from inside CiviCRM soon!


 

Comments

So this update in fact changes the UI for sending scheduled mailing? Can you confirm? Looks better of course, but users will need some help if this is such a change.

You don't have to replace the old email system. Instead, you can have both that have their own forces :

  • standard templating is best for letters : you can use them both for mailing or emailing and have some tokens to customize them
  • mosaico templating is best for newsletter : you want to have a great layout that work on any screen / email client and be sure it won't break.

 

Mosaico is best for newsletter because  :

  • if you have a standard HTML template with a WYSIWYG editor, there are good chances that inexperienced users will break the layout from time to time. It's not possible to do that with Mosaico because you only edit placeholders for text and images.
  • Mosaico is out-of-the-box responsive and work in any browser so you don't have to worry about this part anymore and you can focus on the content instead.

Right now, after installing the extension, if you want to use both, you have to add some menu entry manually :

  • For standard civimail : https://yourwebsite.org/civicrm/a#/mailing/new/traditional
  • For mosaico : https://yourwebsite.org/civicrm/a#/mailing/new

Same thing for templates :

  • Standard : https://yourwebsite.org/civicrm/admin/messageTemplates?reset=1
  • For mosaico : https://yourwebsite.org/civicrm/a#/mosaico-template

 

Anonymous (not verified)
2018-01-02 - 10:21

Where can I try demo of new release? I do not see it available on the civiCRM demo sites. I would like to see if newest version fixes a particular problem, and I would rather not install on client sites unless I know that is the issue is resolved.

Most of the demo's are provided by CiviCRM partners (https://civicrm.org/experts). They enable/disable extensions or functionality to highlight key aspects of CiviCRM at their discretion. The sandboxes provided don't by default have Mosaico enabled, and there's not plan yet to make that happen. We encourage you to proactively test CiviCRM and its extensions on a dev site and/or against your own data prior to pushing to client sites. Bugs or issues discovered can be reported back to the community to help address the issue. Likewise patches can be supplied, and/or funding can be provided to help support the fix, the software and ultimately the community that benefits from it. We encourage you to get involved (https://civicrm.org/get-involved) and help support the community.

Anonymous (not verified)
2018-02-04 - 17:48

Up above you stated that "The ability to create mailing templates is defined by a separate user permission so you can specify one user role (the administrator for example) who can create and edit the templates, where as the normal users can create mailings (i.e. use that template for a mailing only).  Where would I find that permission setting?  As an admin I can't seem to edit a "configured template" that I created, and this could be my problem.  Thx!

This is really a great extension and we're using it a lot. The upgrade to version 2 is in principle a good thing, but what I am missing is the possibility for downloading the HTML. This was very useful for our usecase, because it was the basis for the webversion of the email (we don't use CiviCRM fully exposed to the internet) and for creating an individal test part of the email.

Regarding this I have two questions:

Is it planned to bring the "download" button back?

Is it planned make an individual text part of the email possible instead of the automatically transformed HTML version?

Thank you so much for developing this extenion!