āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š shadcn/directory/clerk/clerk-docs/guides/customizing-clerk/email-sms-templates ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
Clerk provides a templating system that allows you to customize the default system email and SMS messages sent during authentication flows.
The template editor enables you to change the wording and styling so that it is more consistent with your own branding.
It is also a useful way to translate the content to another target language in the case that English is not the default locale of your application.
It will be useful to take a look at the following terms as they will reappear in the rest of the guide:
| Name | Description | | - | - | | variables | Also known as merge tags in the context of email marketing, these are placeholders that are replaced with dynamic data when the actual email or SMS is being sent to the recipient. | | WYSIWYG | Stands for 'What You See Is What You Get.' This term is used for editors and design tools that allow you to create content or layouts in a visual manner (without requiring you to edit the underlying markup) so that you can instantly see how the result is going to display to your users. | | blocks | Email WYSIWYG editors enable you to use blocks, rows, and columns in order to control the layout of their content. This is then transpiled to table-based HTML. |
The email editor uses the Revolvapp email template editor plugin by Imperavi. To acquaint yourself with the template markup syntax, consult Imperavi's docs.
As you will see, the template markup is an HTML-like language and each type of node supports its own set of attributes which control its behavior. A lot of the attributes are borrowed from HTML itself.
Revolvapp allows the user to design the template using blocks and under the hood transpiles its markup to table-based HTML so that the resulting email renders consistently across email clients.
Both the email and SMS editor use the Handlebars templating language for the interpolation of dynamic values into your content via variables. Variables are wrapped in double curly braces. For example: {{app.name}}. When the message is to be sent, the variable will be replaced with the actual value, which in this example would be the name of the application.
When editing a template in the Clerk Dashboard, you can insert variables at the desired position, so there is no need to write them by hand. Though, you can still do so if you like.
[!NOTE] In order to unescape special characters, you may need to wrap variables in triple curly braces. For example:
{{{app.name}}}. This will allow special characters (e.g.',&) to appear as displayed and not as escaped HTML entities (e.g.',&).
To access the email templates:
The following operations are available for an email template:
app_logo and copyright sections (if present) will be replaced with their actual markup in this view.The following settings can be changed per email template:
emails.created webhook and extract the necessary info from the event payload.<local part>@<your-domain>. You can change the local part to a custom value. If no value is provided, it defaults noreply.<local part>@<your-domain>. You can change the local part to a custom value. If no value is provided, the Reply-To header will be omitted.The email WYSIWYG editor is split into two parts:
The toolbar is located at the top of the editor and contains the following controls, in order from left to right:
For the following controls to appear, you will need to select an existing block in the text area. These controls will not be visible otherwise.
The email WYSIWYG editor text area is intended mainly for authoring content. Though, if you select a block, a set of tools will also appear. In order from top to bottom, these are:
To access the SMS templates:
Clerk will deliver your SMS messages using its own SMS Gateway. However, if you wish to handle SMS delivery on your own, then you can toggle Delivered by Clerk off.
This means that Clerk will no longer be sending this particular SMS and in order to deliver it yourself, you will need to listen to the sms.created webhook and extract the necessary info from the event payload.
[!NOTE] Remember, this is a per-template setting and will not be applied to other templates.
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā