Documentation
Start typing to search…

Interface Customisation

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

Watchers allows you to customize:

  • Color 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

Customizing the Color schemes

Follow this step-by-step guide to customize 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
This file contains all the base design tokens used for chat customization.

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.

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.

Step 4: Explore the Chat Tokens

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

Step 5: Edit Tokens

To update any token:

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

Step 6: Export the JSON

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

🚧

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 customization 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

Step 8: Paste and Save

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

✅

Your custom chat styles are now applied!


Updating Chat Icons

You can customize 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 customization → [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.


Customizing Chat Font

You can personalize 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 customization → 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.


Customizing Avatars, Stickers, Reactions & Animoticons

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

Avatars

Steps to update:

  1. Go to
    Settings → Chat customization → 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 customization → 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

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

Steps to update:

  1. Go to
    Settings → Chat customization → 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.

Updated about 3 hours ago