---
title: Interface Customisation
updatedAt: 2026-09-06T11:12:34.150Z
---

Fetch the complete documentation index at: https://docs.watchers.io/llms.txt

# Interface Customisation

You can fully personalise the visual style of the chat interface to match your product's identity.

Watchers allows you to customise:

* Colour schemes and design tokens via Figma + Tokens Studio plugin
* Icons for both dark and light themes
* Fonts used across the chat interface
* User avatars, stickers, reactions, and animoticons

## Customising the colour schemes

Follow this step-by-step guide to customise the chat styles using Figma and Tokens Studio plugin, and apply them to your Watchers chat interface.

> 💡 **Remember that it’s not necessary to edit all of the token. You can start with base colours, background styles, and message colours. Possibly, editing the rest wouldn’t be required; they will inherit the palette’s colours by default, and you need them for detailed settings.**

### Step 1: Open the Style Library

Open the master style library via the link below:

👉 [Open Style Library](https://www.figma.com/design/xArDXWewmWXVJKw5mKlJss/%F0%9F%8E%A8-Master-Style-Library?node-id=0-1\&t=0Gnx2nLzRlL1UnaJ-1)  
_This file contains all the base design tokens used for chat customisation._

***

### Step 2: Duplicate the File

1. Click the file name at the top of the Figma interface.
2. Select **Duplicate to your drafts** to create your own editable version.

<img src="https://docs-assets.watchers.io/docs/readme/caa0ebfae68e34676713f1e157e1b5a8f8ae0e314284771b3f7bf5875f72690e-Slide_4_3_-_1.png" alt="" style="width:80%" class="img-center">

***

### Step 3: Install the plugin Tokens Studio for Figma

1. Click the **Resources** icon in the Figma toolbar.
2. Go to the **Plugins** tab.
3. Search for **Tokens Studio for Figma**.
4. Click to install or open it.

<img src="https://docs-assets.watchers.io/docs/readme/b7fbf88968d6d3a4d4fc05819acf156076834fa105473ab6a0ad6e18ecec8f91-Slide_4_3_-_2.png" alt="" style="width:80%" class="img-center">

***

### Step 4: Explore the Chat Tokens

In the plugin window you will find token styles you could customise to change appearance of the chat

<img src="https://docs-assets.watchers.io/docs/readme/436f38bc942af63fc1f6955b7a4111e2b831b826ab64fef6f3405cbe57d4c597-Slide_4_3_-_3.png" alt="" style="width:80%" class="img-center">

***

### Step 5: Edit Tokens

To update any token:

1. Right-click on a token (e.g. a colour circle).
2. Select **Edit Token**.
3. Update the values (e.g., colour codes, spacing values).

<img src="https://docs-assets.watchers.io/docs/readme/dfd4d2f87464389d6bf10021ccd870b374190f30bff5fc07e06ee9854de4be76-Slide_4_3_-_4.png" alt="" style="width:80%" class="img-center">

***

### Step 6: Export the JSON

1. Once you’ve finished customising the tokens:
2. Click on the **`{}`JSON** icon at the top right of the plugin panel.
3. Copy the entire JSON content.

<img src="https://docs-assets.watchers.io/docs/readme/2202158eee984e43edc112bbf669b8dc6fd8eac6e255e657b5a0b2a10b8644ac-Slide_4_3_-_5.png" alt="" style="width:80%" class="img-center">

<br>

> 🚧 Do not paste the JSON into intermediate tools like Notepad, MS Word, email clients, or messengers before inserting it into the Watchers Admin Panel.
>
> These tools may automatically reformat or alter the characters (e.g. quotes, line breaks), which can corrupt the JSON and cause the customisation to fail.
>
> ✅ Always copy the JSON directly from Tokens Studio and paste it straight into the Watchers Admin Panel.

***

### Step 7: Open Watchers Admin Panel

1. Go to your **Watchers Admin Panel**.
2. Navigate to:  
   **Settings → Appearance**

<img src="https://docs-assets.watchers.io/docs/readme/ea8b82de5cf2b8630e48ef37216e098f81c12f6cfaee0c68a97a402413fbf369-Slide_4_3_-_6.png" alt="" style="width:80%" class="img-center">

***

### Step 8: Paste and Save

1. Select the theme you want to customise (e.g. **DARK** or **LIGHT**).
2. In the **Appearance** section, paste your copied JSON into the input field.
3. Click **Save**.

<img src="https://docs-assets.watchers.io/docs/readme/1f57de5bee864eaa0710b6f49cb093cf1e4336185d3716d3f8490f6bb5966795-Slide_4_3_-_7.png" alt="" style="width:80%" class="img-center">

> ✅ Your custom chat styles are now applied!

## Transparent chat background

To enable a transparent chat background, apply both of the following:

1. **Theme configuration (required beforehand):**  
   Set the background colour in the theme to fully transparent using RGB**A**:

   ```json
   "background": {
     "chat": {
       "value": "rgba(0, 0, 0, 0)",
       "type": "color",
       "description": "Background color for chat window"
     }
   }
   ```

   This sets the chat background to transparent regardless of theme mode (light or dark).

2. **GET parameter on user entry:**  
   Pass `bg=transparent` as a GET parameter when the user enters the chat.
   Example:
   `https://watchers.io/?roomId=...&userId=...&apikey=...&mode=...&bg=transparent`

Both the theme configuration and the GET parameter must be used together for the background to render as transparent. Without one of them, the default background will be applied.

## Updating Chat Icons

You can customise any of the system icons used in the chat interface for both **LIGHT** and **DARK** themes independently.

### Steps to Update Icons

1. Open the **Watchers Admin Panel**.
2. Navigate to:  
   **Settings → Chat customisation → [LIGHT theme / DARK theme] → Icons**(tab)
3. Find the icon you want to update.
4. Click the **pencil icon** on the top-right corner of the icon box.
5. Upload a new icon file.

### Icon Requirements

* **Accepted formats:** `.svg`, `.png`
* **Minimum size:** 64×64 px
* **Maximum file size:** 200 KB
* **SVG minimum dimensions:** 16×16 px

> ✅ You can update **individual icons per theme**, allowing full control over how your interface looks in light vs dark mode.

<br>

## Customising Chat Font

You can personalise the font used across your chat interface to match your brand’s typography.

### How to Change the Font

1. Open the **Watchers Admin Panel**.
2. Go to:  
   **Settings → Chat customisation → Font**(tab)
3. Click the **Change** button.
4. Upload your desired font file.

### 🗂 Accepted Font Formats

* `.ttf` (TrueType Font)
* `.otf` (OpenType Font)

Once uploaded, the selected font will be applied across all interface elements.

***

### Licensing Responsibility

> ⚠️ **Important:**
>
> It is your responsibility to ensure you have the proper rights or licenses to use the font you upload.  
> Do not use fonts that are restricted, copyrighted, or require attribution unless your license explicitly allows embedding them into products.

<br>

## Customising Avatars, Pre-loader, Stickers, Reactions & Animoticons

Personalise your chat even further by uploading custom visual assets for user interaction.

### Pre-loader

For a pre-loader, use a file in a SVG or GIF format, no size restrictions identified.

### Avatars

**Steps to update:**

1. Go to  
   **Settings → Chat customisation → Avatars**(tab)
2. Click **Add** and upload a new avatar.

**Requirements:**

* File types: `.png`, `.svg`
* Size: Minimum 192×192 px
* Max weight: 200 KB

### Stickers

**Steps to update:**

1. Navigate to  
   **Settings → Chat customisation → Stickers**
2. Upload your own sticker sets to reflect your product’s style or seasonal campaigns.

**File Requirements:**

* **Formats:** `.PNG`, `.WEBP`
* **Background:** Transparent
* **Size & Aspect Ratio:** `192x192px` (or `2x`, max `512x512px`)
* **Max File Size:** `200 KB`
* **Padding:** Include `8px` of padding between the image and the edge of the canvas

### Legal Notice

> When uploading sticker files, you confirm that you:
>
> * Have all necessary rights to use the images, including logos and visual assets
> * Comply with all applicable laws
> * Do not upload obscene content or any materials that violate the rights of third parties

Stickers that violate these rules may be removed and could result in restricted access to customization features.

### Reactions and Animoticons

Customise the emoji-style reactions and animoticons used in your chat to better match your product tone.

**Steps to update:**

1. Go to  
   **Settings → Chat customisation → Reactions**
2. Add or replace any reaction icon with your custom design.

**File Requirements:**

* **Accepted format:** `.png`
* **Minimum size:** `128×128 px`
* **Maximum file size:** `200 KB`

> 💡 **For best results, use files with transparent backgrounds and maintain a consistent visual style across all reaction icons.**