Email Designer
Design your own email templates directly from the admin panel and use the magic to send programmatically email from your controllers / services.
Strapi Email Designer plugin 💅
Design your own email templates directly from the Strapi CMS admin panel and use the magic to send programmatically email from your controllers / services.
Visual composer provided by Unlayer
⚙️ Versions
⏳ Installation
Install Strapi with this Quickstart command to create a Strapi project instantly:
- (Use yarn to install the Strapi project (recommended). Install yarn with these docs.)
# with yarn
yarn create strapi-app my-project --quickstart
# with npm/npx
npx create-strapi-app my-project --quickstart
This command generates a brand new project with the default features (authentication, permissions, content management, content type builder & file upload). The Quickstart command installs Strapi using a SQLite database which is used for prototyping in development.
Configure the
Strapi email
plugin ( official documentation )Add the
strapi-designer
plugin
yarn add strapi-plugin-email-designer@latest
# or
npm i -S strapi-plugin-email-designer@latest
- you may need also to add to the unlayer domain to the Content Security Policy. Update the config file
config/middlewares.js
as:
1// ...
2- "strapi::security",
3+ {
4+ name: "strapi::security",
5+ config: {
6+ contentSecurityPolicy: {
7+ directives: {
8+ "script-src": ["'self'", "editor.unlayer.com"],
9+ "frame-src": ["'self'", "editor.unlayer.com"],
10+ "img-src": [
11+ "'self'",
12+ "data:",
13+ "cdn.jsdelivr.net",
14+ "strapi.io",
15+ "s3.amazonaws.com",
16+ ],
17+ },
18+ },
19+ },
20+ },
21// ...
- After successful installation you've to build a fresh package that includes plugin UI. To archive that simply use:
yarn build && yarn develop
# or
npm run build && npm run develop
- or just run Strapi in the development mode with
--watch-admin
option:
yarn develop --watch-admin
#or
npm run develop --watch-admin
The Email Designer plugin should appear in the Plugins section of Strapi sidebar after you run app again.
💄 Usage
- Design your template with easy on the visual composer. For variables use {{mustache}} templating language with the double curly braces tags (
{{
and}}
). You can leave the text version blank to automatically generate a text version of your email from the HTML version.
Tips: in the template's body is possible to iterate array like this:
1{{#order.products}}
2 <li>{{name}}</li>
3 <li>${{price}}</li>
4{{/order.products}}
- Send email programmatically:
1{
2 // ...
3
4 try {
5 await strapi
6 .plugin('email-designer')
7 .service('email')
8 .sendTemplatedEmail(
9 {
10 // required
11 to: 'to@example.com',
12
13 // optional if /config/plugins.js -> email.settings.defaultFrom is set
14 from: 'from@example.com',
15
16 // optional if /config/plugins.js -> email.settings.defaultReplyTo is set
17 replyTo: 'reply@example.com',
18
19 // optional array of files
20 attachments: [],
21 },
22 {
23 // required - Ref ID defined in the template designer (won't change on import)
24 templateReferenceId: 9,
25
26 // If provided here will override the template's subject.
27 // Can include variables like `Thank you for your order {{= USER.firstName }}!`
28 subject: `Thank you for your order`,
29 },
30 {
31 // this object must include all variables you're using in your email template
32 USER: {
33 firstname: 'John',
34 lastname: 'Doe',
35 },
36 order: {
37 products: [
38 { name: 'Article 1', price: 9.99 },
39 { name: 'Article 2', price: 5.55 },
40 ],
41 },
42 shippingCost: 5,
43 total: 20.54,
44 }
45 );
46 } catch (err) {
47 strapi.log.debug('📺: ', err);
48 return ctx.badRequest(null, err);
49 }
50
51 // ...
52}
Enjoy 🎉
🖐 Requirements
Complete installation requirements are exact same as for Strapi itself and can be found in the documentation under Installation Requirements.
Supported Strapi versions:
- Strapi v4.x.x
(This plugin may work with the older Strapi versions, but these are not tested nor officially supported at this time.)
Node / NPM versions:
- NodeJS >= 14.21 < 19
- NPM >= 7.x
We recommend always using the latest version of Strapi to start your new projects.
🔧 Configuration
You can pass configuration options directly to the editor that is used by this plugin. To do so, in your config/plugins.js
file of your project, configure the plugin like this example:
1module.exports = ({ env }) => ({
2 // ...
3 'email-designer': {
4 enabled: true,
5
6 // ⬇︎ Add the config property
7 config: {
8 editor: {
9 // optional - if you have a premium unlayer account
10 projectId: [UNLAYER_PROJECT_ID],
11
12 tools: {
13 heading: {
14 properties: {
15 text: {
16 value: 'This is the new default text!',
17 },
18 },
19 },
20 },
21 options: {
22 features: {
23 colorPicker: {
24 presets: ['#D9E3F0', '#F47373', '#697689', '#37D67A'],
25 },
26 },
27 fonts: {
28 showDefaultFonts: false,
29 /*
30 * If you want use a custom font you need a premium unlayer account and pass a projectId number :-(
31 */
32 customFonts: [
33 {
34 label: 'Anton',
35 value: "'Anton', sans-serif",
36 url: 'https://fonts.googleapis.com/css?family=Anton',
37 },
38 {
39 label: 'Lato',
40 value: "'Lato', Tahoma, Verdana, sans-serif",
41 url: 'https://fonts.googleapis.com/css?family=Lato',
42 },
43 // ...
44 ],
45 },
46 mergeTags: [
47 {
48 name: 'Email',
49 value: '{{ USER.username }}',
50 sample: 'john@doe.com',
51 },
52 // ...
53 ],
54 },
55 appearance: {
56 theme: 'dark',
57 panels: {
58 tools: {
59 dock: 'left',
60 },
61 },
62 },
63 },
64 },
65 },
66 // ...
67});
See Unlayer's documentation for more options.
🚨 How to run the tests
Create the cypress.env.json
file to the root and add your variables following this schema:
1{
2 "adminUrl": "http://localhost:1337/admin/auth/login",
3 "user": {
4 "email": "john.doe@example.com",
5 "password": "P1pp0#2021"
6 }
7}
Now let's install and open Cypress
# with yarn
yarn cypress:install
yarn cypress:open
# with npm
npm run cypress:install
npm run cypress:open
🚧 Roadmap
- Template composer helper
- Import design feature
- Override Strapi's core email system feature
- Preview email with real data feature
- Tags feature
- Custom components extension
- Complete UI tests
- i18n translations (help wanted!)
🤝 Contributing
Feel free to fork and make a Pull Request to this plugin project. All the input is warmly welcome!
⭐️ Show your support
Give a star if this project helped you.
🔗 Links
🌎 Community support
- For general help using Strapi, please refer to the official Strapi documentation.
- For support with this plugin you can DM me in the Strapi Discord channel.
- You can DM me on Twitter
📝 License
MIT License Copyright (c) 2020 Alex Zaganelli & Strapi Solutions.
Contributors ✨
Thanks goes to these wonderful people (emoji key):
This project follows the all-contributors specification. Contributions of any kind welcome!
Stargazers ✨
Forkers ✨
Support Me ✨
If you like this plugin I'm very happy, so lets drink a beer. Salute! 🍻
Install now
npm install strapi-plugin-email-designer
Create your own plugin
Check out the available plugin resources that will help you to develop your plugin or provider and get it listed on the marketplace.