Email themes
Email themes are available on the Growth plan and higher.
An email theme renders a notification email message. You can edit an email theme from the Themes page of your TalkJS dashboard, in the section Email themes.
Each email theme has a single built-in component, Email
. You can use HTML and CSS to customize the built-in Email
component. The markup and styling are rendered directly into the body of the notification email.
In addition, you can also create your own custom components for your notification emails, which you can use from inside the Email
component.
The Email
component receives the following props:
Name | Type | Description |
---|---|---|
messages | Message | The messages that the user is notified about |
app | { name: string } | The name configured in the main settings page of your TalkJS dashboard |
sender | User | Sender of the message that triggered this notification |
recipient | Conversation | The recipient of the notification |
Represents a user.
1type User = {2 id: string,3 name: string,4 role: string | null,5 photoUrl: string | null,6 custom: { [key: string]: string }7}
Represents a conversation.
1type Conversation = {2 id: string,3 subject: string | null,4 participants: User[],5 photoUrl: string | null,6 custom: { [key: string]: string }7}
Represents a message in a conversation.
1type Message = {2 id: string,3 type: 'UserMessage' | 'SystemMessage',4 formattedText: HTML; // The formatted content of the message. For attachments, this consists of a link. For replies, this markup also includes the referenced message.5 referencedMessage: Message | null, // If this message is a reply, referencedMessage points to the referenced message.6 previousMessage: Message | null, // The previous message in the list. previousMessage is null for the first message in a conversation, and for referenced messages.7 body: {8 type: 'text' | 'file' | 'location',9 isVoiceMessage: boolean,10 file: File, // Only for messages of type `file`.11 location: [number, number], // Coordinates giving the latitude and longitude of the location. Only for messages of type `location`.12 rawText: string, // Only for messages of type `text`.13 formattedText: Element // Only for messages of type `text`.14 }15}
Represents a file attached to a message.
1type File = {2 filename: string,3 url: string,4 size: number // Size of the file in bytes5}
TalkJS converts all CSS classes to inline styles using a library called juice. This means that you can freely use classes, and the result usually works, even inside quirky email clients.
You can customize the headers of an email notification from the Headers tab of your email theme editor.
You can use the following macros in the email notification header:
app.name
app.id
app.locale
app.custom.<CUSTOM_FIELD>
sender.id
sender.name
sender.custom.<CUSTOM_FIELD>
recipient.id
recipient.name
recipient.custom.<CUSTOM_FIELD>
conversation.id
conversation.subject
conversation.topicId
conversation.custom.<CUSTOM_FIELD>
Replace <CUSTOM_FIELD>
with the name of the custom field that you would like to use.