_Visual composer provided by [Unlayer](https://unlayer.com/)_
## ⏳ 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](https://yarnpkg.com/lang/en/docs/install/).)
```bash
# 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](https://strapi.io/documentation/developer-docs/latest/plugins/email.html#configure-the-plugin) )
- Add the `strapi-designer` plugin
```bash
yarn add strapi-plugin-email-designer@latest
# or
npm i -S strapi-plugin-email-designer@latest
```
- After successful installation you've to build a fresh package that includes plugin UI. To archive that simply use:
```bash
yarn build && yarn develop
# or
npm run build && npm run develop
```
- or just run Strapi in the development mode with `--watch-admin` option:
```bash
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
1. Design your template with easy on the visual composer. For variables use [lodash templating language](https://lodash.com/docs/4.17.15#template). **You can leave the text version blank to automatically generate a text version of your email from the HTML version.**
2. Send email programmatically:
```javascript
{
// ...
try {
await strapi.plugins['email-designer'].services.email.sendTemplatedEmail(
{
to: 'to@example.com', // required
from: 'from@example.com', // optional if /config/plugins.js -> email.settings.defaultFrom is set
replyTo: 'reply@example.com', // optional if /config/plugins.js -> email.settings.defaultReplyTo is set
},
{
templateId: 1, // required - you can get the template id from the admin panel
subject: `Welcome to My Project`, // If provided here will override the template's subject. Can include variables like `Welcome to <%= project_name %>`
},
{
// this object must include all variables you're using in your email template
project_name: 'My Project',
}
);
} catch (err) {
strapi.log.debug('📺: ', err);
return ctx.badRequest(null, err);
}
// ...
}
```
**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 v3.5.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 >= 12.10 <= 14
- NPM >= 6.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:
```javascript
module.exports = () => ({
...
'email-designer': {
editor: {
tools: {
heading: {
properties: {
text: {
value: 'This is the new default text!'
}
}
}
},
options: {
features: {
colorPicker: {
presets: ['#D9E3F0', '#F47373', '#697689', '#37D67A']
}
}
}
}
},
...
})
```
See [Unlayer's documentation](https://docs.unlayer.com) for more options.
## 🚨 How to run the tests
Create the `cypress.env.json` file to the root and add your variables following this schema:
```json
{
"adminUrl": "http://localhost:1337/admin/auth/login",
"user": {
"email": "john.doe@example.com",
"password": "P1pp0#2021"
}
}
```
Now let's install and open Cypress
```bash
# with yarn
yarn cypress:install
yarn cypress:open
# with npm
npm run cypress:install
npm run cypress:open
```
## 🚧 Roadmap
- [x] 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
## 🤝 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.
You can also [offer me a beer](https://www.paypal.me/alexzaganelli/10) 🍻.
## 🔗 Links
- [NPM package](https://www.npmjs.com/package/strapi-plugin-email-designer)
- [GitHub repository](https://github.com/alexzaganelli/strapi-plugin-email-designer)
## 🌎 Community support
- For general help using Strapi, please refer to [the official Strapi documentation](https://strapi.io/documentation/).
- Strapi Slack [channel](https://slack.strapi.io/)
- You can DM me on [Twitter](https://twitter.com/alexzaganelli)
## 📝 License
[MIT License](LICENSE.md) Copyright (c) 2020 [Alex Zaganelli](https://alexzaganelli.com/) & [Strapi Solutions](https://strapi.io/).
## Contributors ✨
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
 Alexandre Zaganelli 🤔 💻 🎨 🐛 |
 Ron Chi 🐛 |
 p_0g_8mm3_ 🎨 🤔 |
 Tobias Thiele 💻 🎨 🤔 |