Email themes

View as Markdown

Email themes are available on the Growth plan 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.

Create a new email theme

You can create your own custom email theme directly from the Themes page of your TalkJS dashboard. Either create a theme from default settings, or clone an 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. Find the theme that you'd like to edit under Email themes, and select Edit.

In the editing environment, you can adjust:

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 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:
1<template>
2  <!-- Your component's HTML template goes here -->
3</template>
4<style scoped>
5  /* Your component's styles go here */
6</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:

1<UnsubscribeLink class="unsubscribe">
2  Unsubscribe from Example Company chats
3</UnsubscribeLink>

If your theme doesn't contain an <UnsubscribeLink>, you can add it by editing your 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, 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. 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.

See also