Files
website/src/routes/docs/advanced/platform/message-templates/+page.markdoc
2023-09-23 16:45:21 +00:00

197 lines
7.5 KiB
Plaintext

---
layout: article
title: Message templates
description: Placeholder SEO.
---
Appwrite uses emails to communicate with users to perform authentication and verification actions. Emails can be customized to fit your app's design and voice.
Each Appwrite project can have its own set of unique templates. Templates also support localization, so every template can be written in multiple languages and served depending on the configured locale.
## Custom SMTP server {% #smtp %}
Appwrite Cloud has a default SMTP server to get you started. This SMTP server sends generic emails and doesn't allow customizing SMTP templates. To use custom SMTP templates, you will need to configure your own SMTP server.
There are many third-party SMTP providers like SendGrid and Mailgun. Before proceeding, pick an SMTP provider, create an account, and obtain **Sender name**, **Sender email**, **Server host**, **Server port**, **Username**, and **Password**.
1. Navigate to your project's **Settings**.
2. Navigate to the **SMTP** tab.
3. Under **SMTP server**, toggle **Custom SMTP server**.
4. Input **Sender name**, **Sender email**, **Server host**, **Server port**, **Username**, and **Password** from your provider.
5. Click **Update**.
## Customize templates {% #customize %}
You can customize email templates for each of your projects in the Appwrite Console.
{% info title="Custom SMTP server required" %}
The built-in email service does not support custom email templates to prevent malicious templates.
Configure a [custom SMTP server](#smtp) to enable custom email templates.
{% /info %}
1. In your project, navigate to the **Auth** service.
2. Under the **Auth** service, navigate to the **Templates** tab.
3. Expand the email template you want to edit.
4. Select the **Template language**. You can have a different template for each language your app supports.
5. Update the email template fields and click **Update** to save your changes.
## Email templates {% #email-templates %}
You can customize the email templates for account verification, magic-url authentication, password resets, and user invites.
### Email template components {% #email-template-components %}
Each email template has the following components that you can customize.
| Component | Description |
|--------------|-----------------------------------------------------------------------------------------------------------------------|
| Sender name | Readers will see this as a display name of the sender. |
| Sender email | Readers will see this as a display email of the sender. This email must be authenticated on the SMTP provider you've configured, otherwise it will be delivered to the spam folder. This usually means the email must end with the same domain as your SMTP username. |
| Reply to | Readers will reply to this email address instead of the sender address. You can leave this field empty, and the sender email will be used automatically. |
| Subject | The title of the email. |
| Message | The body of the email in HTML format. You can find the variables available in the [Email Template Syntax](#email-template-syntax) section. |
### Email template syntax {% #email-template-syntax %}
Variables can be used in email templates to dynamically construct unique emails for each reader. These variables can only be used in the **Message** field of the email template.
| Variable | Description |
|------------|-----------------------------|
| `{{project}}` | The project name. |
| `{{team}}` | The project team's name. |
| `{{user}}` | The name of the user receiving the email. This variable is not available in the Magic URL template, as there might not be a user yet. |
| `{{redirect}}`| The URL for the user to complete the email template's action. |
### Email template syntax {% #email-template-examples %}
Here's an example of using these variables in a template.
```html
<!doctype html>
<html>
<head>
<style>
... your style here
</style>
</head>
<body style="direction: ltr">
<div style="max-width:650px; word-wrap: break-word; overflow-wrap: break-word;
word-break: break-all; margin:0 auto;">
<table style="margin-top: 32px">
<tr>
<td>
<h1>{{subject}}</h1>
</td>
</tr>
</table>
<table style="margin-top: 40px">
<tr>
<td>
<p>Hello </p>
<p>Follow this link to reset your {{project}} password.</p>
<a href="{{redirect}}" target="_blank">{{redirect}}</a>
<p><br />If you didn't ask to reset your password, you can ignore this message.</p>
<br />
<p>Thanks
<br />
{{project}} team</p>
</td>
</tr>
</table>
</div>
</body>
</html>
```
## Localization {% #localization %}
Each template can have multiple supported locales, displayed in different format and language. This can be configured under the **Template language** selector of each template.
You can send messages in different languages by setting the locale with `client.setLocale()` in the SDKs or the `X-Appwrite-Locale` HTTP header. [View here the list of available locales](https://github.com/appwrite/appwrite/blob/master/app/config/locale/codes.php).
For example, you can send an email verification in French.
{% multicode %}
```js
import { Client, Account } from "appwrite";
const client = new Client();
const account = new Account(client);
client
.setEndpoint('https://cloud.appwrite.io/v1') // Your API Endpoint
.setProject('5df5acd0d48c2') // Your project ID
.setLocale('fr') // Your locale
;
const promise = account.createVerification('https://example.com');
promise.then(function (response) {
console.log(response); // Success
}, function (error) {
console.log(error); // Failure
});
```
```dart
import 'package:appwrite/appwrite.dart';
void main() { // Init SDK
Client client = Client();
Account account = Account(client);
client
.setEndpoint('https://cloud.appwrite.io/v1') // Your API Endpoint
.setProject('5df5acd0d48c2') // Your project ID
.setLocale('fr') // Your locale
;
Future result = account.createVerification('https://example.com');
result
.then((response) {
print(response);
}).catchError((error) {
print(error.response);
});
}
```
```kotlin
import io.appwrite.Client
import io.appwrite.services.Account
val client = Client(context)
.setEndpoint("https://cloud.appwrite.io/v1") // Your API Endpoint
.setProject("5df5acd0d48c2") // Your project ID
.setLocale('fr') // Your locale
val account = Account(client)
val response = account.createVerification('https://example.com')
```
```swift
import Appwrite
let client = Client()
.setEndpoint("https://cloud.appwrite.io/v1") // Your API Endpoint
.setProject("5df5acd0d48c2") // Your project ID
.setLocale('fr') // Your locale
let account = Account(client)
let token = try await account.createVerification('https://example.com')
```
{% /multicode %}