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

⏳ 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.

Add the strapi-designer plugin

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:

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
Send email programmatically:

{
  // ...

  const templateId = "[GET_THE_TEMPLATE_ID]",
    to: "jhon@doe.com",
    from: "me@example.com",
    replyTo: "no-reply@example.com",
    subject: "[TEST] This is a test using strapi-email-designer",
    userData: {
      firstname: "Alex",
      lastname: "Zaganelli",
      email: "blah@blah.com",
    };

  try {
    await strapi.plugins["email-designer"].services.email.send({
      templateId,
      to,
      from,
      replyTo,
      subject,
      data: userData,
    });
  } catch (err) {
    strapi.log.debug("📺: ", err);
    return ctx.badRequest(null, err);
  }

  // ...
}

or simply get the composed body mail

{
  // ...

  const templateId = "[GET_THE_TEMPLATE_ID]",
    userData: {
      firstname: "Alex",
      lastname: "Zaganelli",
      email: "blah@blah.com",
    };

  const { composedHtml, composedText } = await strapi.plugins["email-designer"].services.email.compose({
    templateId,
    data: userData,
  });

  // ...
}

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.4.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.

🚧 Roadmap

🤝 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 🍻.

🔗 Links

🌎 Community support

For general help using Strapi, please refer to the official Strapi documentation.
Strapi Slack channel
You can DM me on Twitter

bannerchi/strapi-plugin-email-designer