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.

Props

The Email component receives the following props:

NameTypeDescription
messagesMessageThe messages that the user is notified about
app{ name: string }The name configured in the main settings page of your TalkJS dashboard
senderUserSender of the message that triggered this notification
recipientConversationThe recipient of the notification

Types

User

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}

Conversation

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}

Message

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}

File

Represents a file attached to a message.

1type File = {
2 filename: string,
3 url: string,
4 size: number // Size of the file in bytes
5}

CSS

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.

Headers

You can customize the headers of an email notification from the Headers tab of your email theme editor.

Overview of the email theme editor, with the section 'Headers' selected. An panel with 'Email headers' is open, in which the 'From' and 'Subject' headers can be customized. Below the panel is an arrow to a preview of how the headers would show up in an email.

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.