---
url: https://talkjs.com/docs/UI_Components/JavaScript/Classic/Themes/Passing_Data_to_Themes
---

# Passing data to themes

Pass app, user, or conversation data into themes.

Ask a question Copy for LLM [View as Markdown](/docs/UI_Components/JavaScript/Classic/Themes/Passing_Data_to_Themes.md)
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](/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:

```html
[home]({{app.custom.websiteUrl}})
```

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:

```javascript
const chatbox = session.createChatbox({
  theme: {
    custom: {
      displayProfileImages: someObject.displayProfileImages,
    },
  },
});
```

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

```html
<Avatar
  t:if="{{theme.custom.displayProfileImages}}"
  photoUrl="{{sender.photoUrl}}"
/>
```

### 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](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties).
For instance, if different sections of your site or app had a different access color, you could pass a value like this:

```js
session.createChatbox({
  theme: {
    custom: {
      accentColor: '#EE4B2B',
    },
  },
});
```

You could then use this variable in your theme CSS:

```css
.header {
  background-color: var(--theme-accentColor);
}
```

You can access [app custom fields](#using-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](/docs/Concepts/Conversations/#custom), [users](/docs/Concepts/Users/#custom) and [messages](/docs/Concepts/Users/#custom) 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:

**JavaScript**
```javascript
const conversation = session.getOrCreateConversation('SOME_CONVERSATION_ID');
conversation.setAttributes({
  custom: {
    productName: 'Pink glittery flipflops',
    productImage: 'https://example.com/flipflops.jpg',
  },
});
```

**React Native**
```javascript
const conversationBuilder = TalkRn.getConversationBuilder(
  'SOME_CONVERSATION_ID'
);
conversationBuilder.setAttributes({
  custom: {
    productName: 'Pink glittery flipflops',
    productImage: 'https://example.com/flipflops.jpg',
  },
});
```

**Flutter**
```dart
final conversation = session.getConversation(
  id: "SOME_CONVERSATION_ID"
  // ... participants and other conversation attributes here ...

  custom: {
    productName: "Pink glittery flipflops",
    productImage: "https://example.com/flipflops.jpg"
  }
});
```

**REST API (cURL)**
```bash
curl https://api.talkjs.com/v1/YOUR_APP_ID/conversations/SOME_CONVERSATION_ID \
-H "Content-Type: application/json" \
-H "Authorization: Bearer YOUR_SECRET_KEY" \
-X PUT \
-d '{ "participants": ["USER1", "8029"], "custom": { "productName": "shoes", "productImage": "https://example.com/shoes.jpg"}}'
```

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:

```html
<div t:if="{{conversation.custom.productName}}" class="productInfo">
  <img src="{{conversation.custom.productImage}}" />
  <div class="productName">{{conversation.custom.productName}}</div>
</div>
```

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