> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.ada.cx/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.ada.cx/_mcp/server.

# Appearance settings

## Overview\[#UUID-628bb378-6983-64c2-4c42-41036002ddfe\_id\_1500012348861\_id\_h\_01F6MR7404DM0DKCCKA190PYQ8]

Customize your AI Agent's branding to align with your brand identity. You can incorporate brand colors, design an eye-catching chat button, and ensure accessibility.

Watch this video for a more in-depth introduction to customization.

Some customization features may not be included with your organization's subscription
package. For more information, see Ada's
[Pricing](https://www.ada.cx/pricing) page, or contact your Ada team.

## Use cases

Appearance customization helps you create a seamless brand experience for end users.

* **Seamless website integration**: Match your site's visual identity with custom colors, themes, and button styles—for example, using your brand's accent color and a text button that says "Chat with us."
* **Accessibility compliance**: Support diverse user needs with adjustable options.
* **Transcript self-service**: Let end users download or email their conversation history for their records or follow-up reference.

## Capabilities & configuration

Appearance settings let you customize the visual elements of your [Chat](/docs/channels/chat) widget.

* **General settings**: Set your AI Agent's name, description, privacy policy link, notification sounds, and transcript options.
* **Chat button**: Choose between a round icon button or a text button, with custom colors and sizing.
* **Chat window**: Configure accent color, header color, theme (light/dark), shape, text size, and avatars.
* **Fallback content**: Create custom content to display if chat services are unavailable.

## Quick start

Customize your Chat widget appearance in a few steps.

On the Ada dashboard, go to **Config > CHANNELS > Chat**.

On the **Appearance** tab, open any drawer to customize that element.

Make your changes and click **Save changes**.

For detailed instructions on each customization option, see [Implementation & usage](#general).

## Implementation & usage

Configure the appearance of your Chat widget.

### Customize general settings\[#general]

General settings control your AI Agent's name, description, and chat window options.

**To customize general settings:**

1. On the Ada dashboard, go to **Config > CHANNELS > Chat**. Then, on the **Appearance** tab, open the **General** drawer.
2. Under **Basic information**, select a language to modify content for, then enter the following information:

   * **Agent name** – The name that appears in the chat window header.

     This name is for appearance only. To determine the name your AI Agent uses to introduce and refer to itself in generated replies, add a name in your [Persona](/docs/setup/persona/personality-setup#org-name) settings.
   * **AI Agent description (optional)** – Create a short, customizable description for your AI Agent, which sets the context for new chats.

   Add the above content for any additional languages required.
3. Under **Functionality**, use these toggles to change the functionality in the chat window:
   * **Show privacy policy link** – Show a "Privacy" link at the bottom of the chat window. If you enable this setting, a field appears, where you can provide a custom URL if required.
   * **Enable sound by default** – Enable notification sounds when your AI Agent sends your end users messages.
4. Under **Chat transcript**, choose whether you want end users to be able to access transcripts of their conversations with your AI Agent. For more information, see [Transcript access](#transcript-access).
5. Click **Save changes**.

#### Transcript access\[#transcript-access]

You can allow end users to download or email themselves a text file containing the transcript of their chat. When the Download Transcript or Email Transcript feature is active, an end user can click the three-dot menu in the top left corner of the chat window and select an available method for receiving their transcript.

##### Transcript requirements\[#transcript-requirements]

For mobile apps, make sure you have the latest SDK version:

* [Ada Android SDK](https://developers.ada.cx/reference/add-chat-to-android-app)

* [Ada React Native SDK](https://developers.ada.cx/reference/add-chat-to-react-native-app)

* [Ada iOS SDK](https://developers.ada.cx/reference/add-chat-to-ios-app)

To enable your end users to download transcripts, you must update the Ada mobile SDK to the
latest version. If you're running an older version of the Ada mobile
SDK, the **Download Transcript** button will appear in the three-dot menu,
but it won't be functional.

##### Configure transcript settings\[#configure-transcript-settings]

End users only see the chat transcript options that you have activated in Ada.

**To configure transcript settings:**

1. On the Ada dashboard, go to **Config > CHANNELS > Chat**. Then, on the **Appearance** tab, open the **General** drawer.

2. Under **Chat Transcript**, enable the **Allow customers to email
   transcript** and **Allow customers to download transcript** toggles
   to activate each feature.

3. Click **Save changes**.

### Customize the chat button\[#button]

The chat button is the entry point for end users to start a conversation with your AI Agent.

**To customize the chat button:**

1. On the Ada dashboard, go to **Config > CHANNELS > Chat**. Then, on the **Appearance** tab, open the **Chat button** drawer.

2. In the Chat button drawer, choose to make your button either a simple round button with an icon in it, or a larger button with text in it. Your choice affects the customization options available.

   * If you select **Round button** ![](https://fdr-prod-docs-files-public.s3.us-east-1.amazonaws.com/ada.docs.buildwithfern.com/160afeb27bf37e7ff69872905ffe47efeef893f69411f3b00ffbdb9ae6f6dd9c/versions/assets/image/uuid-6a3e7e2c-e597-994f-f5d9-ac7759b1d6ac.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA6KXJSKKNFOCF7G4B%2F20260921%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260921T040055Z&X-Amz-Expires=604800&X-Amz-Signature=a8808fc36e101af16545d30dd52bdd8eba10d467aa9ff2391baeae75674d1358&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject), you can make the following changes:

     1. Under **Icon**, choose the type of icon you want to appear on your chat button.
     * Click **Default** to use the default speech bubble.

     * Click **Custom Icon** to upload an icon of your choice.

       If there's an existing icon you want to replace, click **Delete** ![](https://fdr-prod-docs-files-public.s3.us-east-1.amazonaws.com/ada.docs.buildwithfern.com/eaf3e27905dfafde4c1138201d5674737788133775fed7625fcd3f098c6628f3/versions/assets/image/uuid-94690a08-d28d-6609-1ace-9c769c3a24ad.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA6KXJSKKNFOCF7G4B%2F20260921%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260921T040055Z&X-Amz-Expires=604800&X-Amz-Signature=364095ab2d743fd71bc4d494154e5269ab8f0f7a2089d5178c61c5f6f950bfad&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject) beside the existing file path, then click **Upload** ![](https://fdr-prod-docs-files-public.s3.us-east-1.amazonaws.com/ada.docs.buildwithfern.com/f9841202b2f05f473d08612dc758fa9e388f0eb0fa5e92068963a3954053479f/versions/assets/image/uuid-3c2fed3e-d655-40e6-3ad9-7c70711a6307.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA6KXJSKKNFOCF7G4B%2F20260921%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260921T040055Z&X-Amz-Expires=604800&X-Amz-Signature=2be5d70890ae2cc3139022e1153510ec22fadac492fea1a721cccfc16c618c35&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject) to upload a new .svg file.
     3. Under **Background color**, either click the color swatch to
        use a color picker, or paste in a hex code to choose the color
        for your button.
     4. Under **Button size**, choose the size of the button.

   * If you select **Text button** ![](https://fdr-prod-docs-files-public.s3.us-east-1.amazonaws.com/ada.docs.buildwithfern.com/411adb855737a69f2d890700ddc5398b621564481cd55fc07742164ef9916700/versions/assets/image/uuid-95995f30-35ab-a7eb-6c68-674f0e2f3ae9.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA6KXJSKKNFOCF7G4B%2F20260921%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260921T040055Z&X-Amz-Expires=604800&X-Amz-Signature=58c81033ee0fa507d42df41ca9bfd947264238d928d92a6ef3f69fde8f77f5fe&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject), you can make the following changes:

     1. Under **Background color**, either click the color swatch to
        use a color picker, or paste in a hex code to choose the color
        for your button.
     2. You can add custom text for each language that your AI Agent
        supports. From the language dropdown, select the
        relevant language and add the custom text for that

3. Click **Save Changes**.

   If your AI Agent is live, saving makes any changes appear immediately for your end users.

### Customize the chat window\[#window]

The chat window is where end users interact with your AI Agent.

**To customize the chat window:**

1. On the Ada dashboard, go to **Config > CHANNELS > Chat**. Then, on the **Appearance** tab, open the **Chat window** drawer.

2. To set the accent color, under **Accent color**, either click the color swatch to use a color picker, or paste in a hex code.

3. By default, the chat window header matches the background of the chat window (either black or white, depending on the theme you set). To set a header color, enable the **Header color** toggle. Then, under **Header color**, either click the color swatch to use a color picker, or paste in a hex code.

4. By default, when you choose an accent or header color, the text color is automatically set to either black or white, depending on which provides the best contrast. If you also want to set text color manually, enable the **Advanced colors** toggle.

   1. Under **Text over accent**, either click the color swatch to use a color picker, or paste in a hex code.
   2. Under **Header text**, either click the color swatch to use a color picker, or paste in a hex code.

5. Select a light or dark mode theme. You can also choose to automatically default to the user's device.

6. Select a shape for both the chat windows and the bubbles in it. You can choose either **Round** or **Rectangular**.

7. Choose the text size for your chat.

8. Set your AI Agent's avatar, making it either a letter or a custom icon.

   * To set a letter, click **Letter**, then enter one letter in the text field.
   * To set a custom icon, click **Custom icon**.

     If there's an existing icon you want to replace, click **Delete** ![](https://fdr-prod-docs-files-public.s3.us-east-1.amazonaws.com/ada.docs.buildwithfern.com/eaf3e27905dfafde4c1138201d5674737788133775fed7625fcd3f098c6628f3/versions/assets/image/uuid-94690a08-d28d-6609-1ace-9c769c3a24ad.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA6KXJSKKNFOCF7G4B%2F20260921%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260921T040055Z&X-Amz-Expires=604800&X-Amz-Signature=364095ab2d743fd71bc4d494154e5269ab8f0f7a2089d5178c61c5f6f950bfad&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject) beside the existing file path, then click **Upload** ![](https://fdr-prod-docs-files-public.s3.us-east-1.amazonaws.com/ada.docs.buildwithfern.com/f9841202b2f05f473d08612dc758fa9e388f0eb0fa5e92068963a3954053479f/versions/assets/image/uuid-3c2fed3e-d655-40e6-3ad9-7c70711a6307.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA6KXJSKKNFOCF7G4B%2F20260921%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260921T040055Z&X-Amz-Expires=604800&X-Amz-Signature=2be5d70890ae2cc3139022e1153510ec22fadac492fea1a721cccfc16c618c35&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject) to upload a new .svg, .png, .jpg, or .gif file.

     For best results, upload a square image in .svg format that is at least 96x96 pixels.

9. For AI Agents with certain handoff integrations, you can set an avatar for human agents.

   * To use the avatar set in the integration appears in the chat window, click **Default**.
   * To use the same icon for all human agents, click **Custom icon**.

     If there's an existing icon you want to replace, click **Delete** ![](https://fdr-prod-docs-files-public.s3.us-east-1.amazonaws.com/ada.docs.buildwithfern.com/eaf3e27905dfafde4c1138201d5674737788133775fed7625fcd3f098c6628f3/versions/assets/image/uuid-94690a08-d28d-6609-1ace-9c769c3a24ad.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA6KXJSKKNFOCF7G4B%2F20260921%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260921T040055Z&X-Amz-Expires=604800&X-Amz-Signature=364095ab2d743fd71bc4d494154e5269ab8f0f7a2089d5178c61c5f6f950bfad&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject) beside the existing file path, then click **Upload** ![](https://fdr-prod-docs-files-public.s3.us-east-1.amazonaws.com/ada.docs.buildwithfern.com/f9841202b2f05f473d08612dc758fa9e388f0eb0fa5e92068963a3954053479f/versions/assets/image/uuid-3c2fed3e-d655-40e6-3ad9-7c70711a6307.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA6KXJSKKNFOCF7G4B%2F20260921%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260921T040055Z&X-Amz-Expires=604800&X-Amz-Signature=2be5d70890ae2cc3139022e1153510ec22fadac492fea1a721cccfc16c618c35&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject) to upload a new .svg, .png, .jpg, or .gif file.

     For best results, upload a square image in .svg format that is at least 96x96 pixels.

10. Click **Save changes**.

### Customize fallback content\[#fallback-message-settings]

Fallback content displays when Chat services are temporarily unavailable.

**To customize fallback content:**

1. On the Ada dashboard, go to **Config > CHANNELS > Chat**. Then, on the **Appearance** tab, open the **Fallback message** drawer.
2. In the Fallback message drawer, under **Icon**, you can replace the default icon with one of your choice. This icon appears for all end users viewing fallback content, regardless of their languages.

   To replace the existing icon, click **Delete** ![](https://fdr-prod-docs-files-public.s3.us-east-1.amazonaws.com/ada.docs.buildwithfern.com/eaf3e27905dfafde4c1138201d5674737788133775fed7625fcd3f098c6628f3/versions/assets/image/uuid-94690a08-d28d-6609-1ace-9c769c3a24ad.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA6KXJSKKNFOCF7G4B%2F20260921%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260921T040055Z&X-Amz-Expires=604800&X-Amz-Signature=364095ab2d743fd71bc4d494154e5269ab8f0f7a2089d5178c61c5f6f950bfad&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject) beside the existing file path, then click **Upload** ![](https://fdr-prod-docs-files-public.s3.us-east-1.amazonaws.com/ada.docs.buildwithfern.com/f9841202b2f05f473d08612dc758fa9e388f0eb0fa5e92068963a3954053479f/versions/assets/image/uuid-3c2fed3e-d655-40e6-3ad9-7c70711a6307.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA6KXJSKKNFOCF7G4B%2F20260921%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260921T040055Z&X-Amz-Expires=604800&X-Amz-Signature=2be5d70890ae2cc3139022e1153510ec22fadac492fea1a721cccfc16c618c35&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject) to upload a new .svg file.
3. Select a language to modify content for, then add the following information:
   * **Message** - Text content to appear in the chat window if chat content fails to load.
   * **Button labels** and **URLs** - By default, buttons don't appear with your chat content, but you can add up to four buttons to direct end users to alternate resources, like your knowledge base.
     Add the above content for any additional languages required.
4. Click **Save changes**.

## Related features

* [Chat onboarding](/docs/channels/chat/chat-onboarding): Get started with Chat.
* [Installation](/docs/channels/chat/chat-configuration/installation): Add the Chat widget to your website or app.
* [Launch options](/docs/channels/chat/chat-configuration/launch-options): Control Chat visibility and rollout.
* [Persona](/docs/setup/persona/personality-setup): Configure your AI Agent's identity and tone.

---

Have any questions? Contact your Ada team, or email us at [](mailto:help@ada.cx?subject=Help%20Docs%20inquiry).