Passing data to themes

TalkJS passes all the necessary data to show the chat interface. But there are cases where you'd want to pass application-specific data to themes. There are two main ways to pass application-specific data to themes:

  • Use app custom fields
  • Pass custom data directly to the theme

Use app custom fields

You can use app custom fields to pass application-specific data to themes. For example, you can make a single theme behave differently between your test or live environment with app custom fields.

In the Settings page of your TalkJS dashboard, in the 'App metadata' section, you can set custom fields, and then use them in your themes with {{app.custom.<fieldName>}}.

For example, you might set a custom field named "websiteUrl" to https://staging.yoursite.com in your test environment, but to https://www.yoursite.com in your live environment. Then, you can make a link in your theme as follows:

1<a href="{{app.custom.websiteUrl}}">home</a>

This custom link will then always direct to the correct website.

Pass custom data directly to the theme

You can also pass application-specific custom data directly to themes. When creating a chat widget, you can pass a theme object specifying the name of the theme you'd like to use, and an object with custom fields. The values of the custom object can be anything that's JSON serializable.

For example, if your users can choose whether to display profile images next to messages, then you could implement that as follows:

1const chatbox = session.createChatbox({
2  theme: {
3    custom: {
4      displayProfileImages: someObject.displayProfileImages,
5    },
6  },
7});

Now, in the UserMessage component of your theme, you can access this value as theme.custom.displayProfileImages:

1<Avatar
2  t:if="{{theme.custom.displayProfileImages}}"
3  photoUrl="{{sender.photoUrl}}"
4/>

Using custom values for styling

Custom values can also be used in styles. If a custom field has a string or integer value, you can access it as a custom CSS property. For instance, if different sections of your site or app had a different access color, you could pass a value like this:

1session.createChatbox({
2  theme: {
3    custom: {
4      accentColor: '#EE4B2B',
5    },
6  },
7});

You could then use this variable in your theme CSS:

1.header {
2  background-color: var(--theme-accentColor);
3}

You can access app custom fields in the same way, using var(--app-<fieldName>).

Store custom data in users, conversations, and messages

You can also associate custom information with a user, conversation, or even an individual message. Conversations, users and messages in TalkJS have a custom property that can hold a map of arbitrary key-value pairs, which you can access in themes.

For example, in a marketplace app, you might have a conversation related to a specific product. You can pass in some details about the product when creating the conversation:

1const chatbox = session.getOrCreateConversation('SOME_CONVERSATION_ID');
2conversation.setAttributes({
3  custom: {
4    productName: 'Pink glittery flipflops',
5    productImage: 'https://example.com/flipflops.jpg',
6  },
7});

In your theme, you can then access these values under conversation.custom. For instance, to display product information in the ChatHeader component, you could add the following markup:

1<div t:if="{{conversation.custom.productName}}" class="productInfo">
2  <img src="{{conversation.custom.productImage}}" />
3  <div class="productName">{{conversation.custom.productName}}</div>
4</div>

The t:if attribute on the outer div ensures that the div is only displayed if this conversation has a productName custom field.