This extension integrates a responsive email template editor, Mosaico, with CiviCRM.
- Initial Blog Post
- Beta Blog Post
- Initial Video
- v1.0 Stable Release
- v2.0 Plans
- v2.0 and Styling Blog Post
v4.6.26+with backports patch #9555
A CiviCRM extensions folder (In new sites since CiviCRM v4.7.0, this defaults to
files/civicrm/ext. For older systems, see the wiki.)
Option 1: Download via Web
The official download URLs for Mosaico and related extensions are published on the CiviCRM.org Extension Directory. Download the latest releases of these extensions:
civicrm.orgdownloads are intended for normal installations, and
github.comdownloads are intended for development. Downloads on
github.comare often the same -- but not always.
Option 2: Download via CLI
This option requires command line tool
To download the current alpha/beta versions of Mosaico and its dependencies, run this one command:
cv dl --dev flexmailer shoreditch mosaico
Alternatively, you can download the latest nightly:
cv dl --dev flexmailer shoreditch cv dl uk.co.vedaconsulting.mosaico@https://download.civicrm.org/extension/uk.co.vedaconsulting.mosaico/latest/uk.co.vedaconsulting.mosaico-latest.zip
TIP: If you're using v4.6.x with backports, then
cv dlwill require an extra argument: "
--filter-ver=4.7.16". This enables it to download the latest extensions intended for v4.7.x (even if they aren't officially compatible with v4.6.x).
Option 3: Download via Git (preferred for development)
This option requires several command-line tools:
Once these are installed, you should:
## Navigate to your extension directory, e.g. cd sites/default/files/civicrm/ext ## Download the extensions git clone https://github.com/civicrm/org.civicrm.flexmailer git clone https://github.com/civicrm/org.civicrm.shoreditch git clone https://github.com/veda-consulting/uk.co.vedaconsulting.mosaico ## Download additional dependencies cd uk.co.vedaconsulting.mosaico ./bin/setup.sh -D
Getting started (Usage)
If you haven't used Mosaico before, consult the the demo and tutorial materials from http://mosaico.io/index.html.
To send a new mailing, simply navigate to "Mailings => New Mailing". The CiviMail-Mosaico UI should appear.
Optionally, you may design reusable templates by navigating to "Mailings => Mosaico Templates".
When composing a new mailing with Mosaico, the screen may be configured as a three-step wizard or as a single-step form. To choose a layout, navigate to "Administer => CiviMail => Mosaico Settings".
If you would like to compose mailings with the old CiviMail screen, navigate to "Mailings => New Mailing (Traditional)".
Having issues with this extension?
Please make sure you have followed installation instructions.
Open issues on github with:
- screenshot of failure with any possible errors in firebug or js console
- any related logs or backtrace from civicrm
- tell us what version of CiviCRM and extension, you using.
- tell us the browser you are using (name and version) and test at least a second browser to tell us if this happen in both or only one (tell us the details about the second browser too).
bin/setup.sh handles various build activities:
## Download dependencies ./bin/setup.sh -D ## Regenerate DAOs ./bin/setup.sh -g ## Build zip archive ./bin/setup.sh -z
We use Gulp and Sass for styling and handle different running tasks. Firstly, you should install node packages using npm package manager:
Styling changes should go into
sass directory and compiled to CSS using the following command:
Once you are done making your changes, please use BackstopJS (see TESTING.MD to check for any possible visual regression issues
When moving CiviCRM to a new domain, you must update the template paths in the CiviCRM database with a MySQL query such as:
UPDATE civicrm_mosaico_template SET metadata = replace(metadata, 'old-domain.org', 'new-domain.org');
Whenever a change is merged or pushed to
uk.co.vedaconsulting.mosaico, a bot automatically builds a new
and publishes uk.co.vedaconsulting.mosaico-latest.zip.
The build/publish process has a few properties:
- It combines
civicrm/mosaico, and any other runtime dependencies into one
- The version number is determined by reading
<version>) and appending the current Unix timestamp.
- Example: If the
versionis declared as
1.0.beta1, then it will be published as
- Example: If the
- Three files are published:
- The new
- A JSON document describing the build.
- An alias is provided under the folder
The bot does not publish the new version to
civicrm.org. To do this, take the new
info.xml file and manually
upload it. Since
civicrm.org provides a directory of past and current versions, be sure to specify the download-URL
for a specific version number (e.g.
1.0.beta1.1478151288) rather than an alias (