Email templates in Joystick are just Joystick components. The only difference between a Joystick component intended for email vs. the UI is the level of interactivity we expect. Features like state and DOM events are ignored in a component purposed as an email template, but basic features like rendering HTML, defining CSS, and using custom methods work as expected.
To define an email template, create a file in the /email folder with the name of a template like /email/welcome.js.
Example Usage
Defining an Email Template
/email/welcome.js
import joystick from '@joystick.js/ui';
const Welcome = joystick.component({
css: `
p {
font-size: 16px;
line-height: 24px;
color: #333;
}
ul li a {
color: red;
}
`,
render: ({ props }) => {
return `
<div>
<p>Hey, ${props.username}!</p>
<p>Thanks for signing up for our app. To get up to speed we recommended checking out the following resources:</p>
<ul>
<li><a href="https://app.com/docs/getting-started">Getting Started</a></li>
<li><a href="https://app.com/docs/sending-a-message">Sending a Message</a></li>
<li><a href="https://app.com/docs/following-users">Following Users</a></li>
</ul>
<p>We want you to feel right at home, so if you ever get confused, feel free to hit reply on this email and we'll help you out!</p>
<p>Welcome,<br /> The App Team</p>
</div>
`;
},
});Sending an Email with a Template
email.send({
template: 'welcome',
props: {
username: '@example_user',
},
});In the template component above, we expect props.username to be defined. When calling email.send(), we can pass any props we’d like delivered to our template.
Behind the scenes, Joystick automatically:
- Renders the component to HTML.
- Compiles any CSS and injects it into the
<head></head>of the base template. - Attempts to auto-inline CSS directly into the HTML for better email client compatibility.
Internationalization (i18n)
Similar to Joystick components in the UI, we can define translations for emails. Translations are stored in the /i18n/email folder and use the naming convention <template_name>_<iso_language_code>.js, like welcome_en-US.js or welcome_es-ES.js.
Defining Translations
/i18n/email/welcome_en-US.js
const en_US = {
hey: 'Hey',
thanks_for_signing_up: 'Thanks for signing up for our app. To get up to speed we recommended checking out the following resources:',
};
export default en_US;Using Translations in an Email Template
/email/welcome.js
import joystick from '@joystick.js/ui';
const Welcome = joystick.component({
css: `...`,
render: ({ props, i18n }) => {
return `
<div>
<p>${i18n('hey')}, ${props.username}!</p>
<p>${i18n('thanks_for_signing_up')}</p>
...
</div>
`;
},
});