---
url: https://talkjs.com/docs/UI_Components/Email_Component
---

# Email component

Ask a question Copy for LLM [View as Markdown](/docs/UI_Components/Email_Component.md)

Email themes are available on the [Growth plan](/pricing/) and higher.

The `Email` component renders a notification email message. It's the single built-in component available in every [email theme](/docs/Features/Notifications/Email_Notifications/Themes/).

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.

You can edit an email theme from the **Themes** page of your [TalkJS dashboard](/dashboard/themes), in the section **Email themes**.

## Props

The `Email` component receives the following props:

| Name | Type | Description |
| --- | --- | --- |
| **messages** | [`Message`](#message) | The messages that the user is notified about |
| **app** | [`App`](#app) | App metadata configured in your TalkJS dashboard |
| **sender** | [`User`](#user) | Sender of the message that triggered this notification |
| **recipient** | [`User`](#user) | The recipient of the notification |
| **conversation** | [`Conversation`](#conversation) | The conversation that the messages were sent in |

## Types

### App

Contains metadata for your TalkJS app.

```ts
type App = {
  id: string;
  name: string;
  locale: string;
  custom: Record<string, string>; // Supports localization
};
```

App custom fields support localization by adding a `:` colon and locale suffix on the field name, for example `newMessagesText:fr` for French, or `newMessagesText:zh-TW` for Chinese as used in Taiwan. See [Localize notification content](/docs/Features/Notifications/Email_Notifications/#localize-notification-content) for the full syntax and resolution order.

### User

Represents a user.

```ts
type User = {
  id: string;
  name: string;
  role: string | null;
  photoUrl: string | null;
  custom: Record<string, string>;
};
```

### Conversation

Represents a conversation.

```ts
type Conversation = {
  id: string;
  subject: string | null;
  participants: User[];
  photoUrl: string | null;
  custom: Record<string, string>;
};
```

### Message

Represents a message in a conversation.

```ts
type Message = {
  id: string;
  type: 'UserMessage' | 'SystemMessage';
  formattedText: HTML; // The formatted content of the message. For attachments, this consists of a link. For replies, this markup also includes the referenced message.
  referencedMessage: Message | null; // If this message is a reply, referencedMessage points to the referenced message.
  previousMessage: Message | null; // The previous message in the list. previousMessage is null for the first message in a conversation, and for referenced messages.
  custom: Record<string, string>;
  body: {
    type: 'text' | 'file' | 'location';
    isVoiceMessage: boolean;
    file: File; // Only for messages of type `file`.
    location: [number, number]; // Coordinates giving the latitude and longitude of the location. Only for messages of type `location`.
    rawText: string; // Only for messages of type `text`.
    formattedText: Element; // Only for messages of type `text`.
  };
};
```

### File

Represents a file attached to a message.

```ts
type File = {
  filename: string;
  url: string;
  size: number; // Size of the file in bytes
};
```

## CSS

TalkJS converts all CSS classes to inline styles using a library called [juice](https://github.com/Automattic/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.

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.