MailcrateReact Email
Use emails your developers write as code, and know what you can still change in the app.
Some teams keep their emails in code, next to the product that sends them. Mailcrate supports that with React Email templates: a developer writes the email as a React Email component in your code repository and pushes it to Mailcrate, and from then on it is an email like any other. Campaigns, journeys and transactional messages can all use it.
The work is split between the app and the code:
| In the code (your developers) | In the app (anyone who edits emails) |
|---|---|
| The design and the body of the email | The From sender, Subject, Preview text, Reply To and BCC |
| What each recipient's version says, from their contact details and the data sent with the email | Where the email is used: campaigns, journeys, transactional messages |
| Pushing new versions | Previewing it, sending a test, and its version history |
So you can change a subject line without asking a developer, and a developer can change the layout without touching your campaigns.
Create a React Email template
Most React Email templates are created by the developer's first push, and appear under Emails without you doing anything. To set one up from the app first, so a developer has something to push to:
Open Emails, choose New Email, and pick React Email as the type.
Enter a Slug: the name that ties the code to this email, such as password-reset. Lowercase letters, numbers and hyphens only. Share it with the developer, because their file must use the same slug.
Choose Create Email. The email opens on an overview with the slug, whether code has been pushed yet (Bundle Status), a starter file to copy, and the exact command to push it. Hand these to your developer.
Until code has been pushed, the email shows No bundle pushed yet and has nothing to preview or send.
Work with it in the app
Open the email under Emails:
- Settings sets the sender, subject, preview text, Reply To and BCC, exactly as for any email; see Set the sender and subject. Developers' pushes never overwrite these.
- Preview shows the email as a recipient would get it. Pick a contact to preview it with their details.
- Send test email sends a copy to your own inbox.
- History lists every version, including each push, marked API push and via API key. You can preview and restore an older version like any other; see Template Versioning.
- Where it's used lists the campaigns, journeys and transactional messages that use it.
You can't edit the body in the app, because the next push would replace it. Ask your developer to make the change in the code.
Check the footer
Marketing email needs an unsubscribe link and your postal address. In a visual or HTML email you add these with merge tags, and the editor warns you when one is missing. A React Email template gets them from values Mailcrate passes in, and the app doesn't check the code for you, so preview the email and look for both before you use it in a campaign. If one is missing, ask your developer to add it.
For developers
Writing, pushing and sending React Email templates, including the values Mailcrate passes to each template and pushing from CI, is covered in Templates as Code.