---
url: https://talkjs.com/docs/Features/Notifications/Email_Notifications/Themes
---

# Email themes

Ask a question Copy for LLM [View as Markdown](/docs/Features/Notifications/Email_Notifications/Themes.md)

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

You can fully customize the look and layout of your notification emails, using email themes. For email delivery and content settings not related to theming, see: [Email notifications](/docs/Features/Notifications/Email_Notifications/).

## Create a new email theme

You can create your own custom email theme directly from the **Themes** page of your [TalkJS dashboard](/dashboard/). Either [create a theme from default settings](#create-from-default), or [clone an existing theme](#clone-existing-theme) to build upon earlier customizations.

### Create from default

If you're starting afresh, you can create a custom theme based on the default email notification theme settings:

1. In the section **Email themes**, select **Create new theme**.
2. Give your theme a name under **Theme name**, and from **Based on preset theme** select `default_email`.
Your new email theme is now available in the email themes list, ready for editing.

### Clone existing theme

You can clone an existing theme that you've already customized. Cloning a theme can be helpful, for example if you'd like to make small adjustments for different user roles (such as buyers and sellers, or admins and moderators), or to version your themes.

1. Find the email theme you'd like to clone in the list **Email themes**.
2. From the vertical dots (⋮) menu for that row, select **Clone**.
3. Give your theme a name, and select **Clone** to confirm.
Your new email theme is now available in the email themes list, ready for editing.

## Edit email theme

You can edit your custom email theme directly from the **Themes** page of your [dashboard](/dashboard/). Find the theme that you'd like to edit under **Email themes**, and select **Edit**.

In the editing environment, you can adjust:

- Email headers: from the **Headers** section in the sidebar menu.
- Email body: you can either [edit the built-in `Email` component](#edit-built-in-component), or [create a custom component](#add-custom-component) to use inside the email theme.
You can add or change any HTML and CSS to customize email theme components. The markup and styling are rendered directly into the body of the notification email.

If you're unhappy with the changes you've made, you can select the horizontal dots (⋯) menu next to your component, and select **Reset to preset**. Note that resetting to preset undoes *all* changes you made, not just the most recent ones.

### Edit built-in component

Email themes have one built-in component, `Email`, which you can find in the sidebar menu, under **Built-in components**. See: [Email component](/docs/UI_Components/Email_Component/) for full reference details.

### Add custom component

You can also add custom components to use inside the email theme. To add a custom component:

1. Select the `+` plus in the **Custom Components** section in the sidebar.
2. Add a component name, and select **OK** to confirm. A theme with an empty template structure gets created:

```html
<template>
  <!-- Your component's HTML template goes here -->
</template>
<style scoped>
  /* Your component's styles go here */
</style>
```

1. Add any HTML and CSS you need to your custom component.
2. Once your component is ready, add it inside the built-in `Email` component.
Your custom component now gets rendered inside email notifications.

### Customize unsubscribe link

By default, an unsubscribe link appears at the bottom of each email notification, with the text 'Unsubscribe from all chat emails'.

You can use the `<UnsubscribeLink>` component to customize the link text, CSS styling, and placement. The component's children are rendered as the link text, for example:

```html
<UnsubscribeLink class="unsubscribe">
  Unsubscribe from Example Company chats
</UnsubscribeLink>
```

If your theme doesn't contain an `<UnsubscribeLink>`, you can add it by [editing your email theme](#edit-email-theme).

## Activate email theme

Once you're happy with your custom email theme, you can activate it to make it available for use in production.

To activate your custom email notification theme:

1. On your [dashboard](/dashboard/), go to **Notifications** → **Email settings** and ensure that **Enable email** is toggled on.
2. Set **Email type** to **Custom theme**.
3. Choose your preferred theme from the **Active email theme** list.
Your custom email theme is now active for your email notifications.

## Create themes for different user groups

You can create as many custom email themes as you need. Having multiple email themes can be useful, for example if you'd like to send different user groups (such as regular users and admins) their own custom email notifications.

To send different users groups their own custom notification, ensure that each of them has a distinct [role](/docs/Concepts/Roles/). You can then adjust the email notification settings per role, from the top of the **Notifications** page.

Check out the guide: [How to customize email notifications for different types of users](/resources/article/how-to-show-different-email-notifications-for-different-types-of-users-in-a-talkjs-chat/).

## See also

- [Email component](/docs/UI_Components/Email_Component/) reference details
- [Chat UI themes](/docs/Features/Themes/)