> ## Documentation Index
> Fetch the complete documentation index at: https://docs.adopt.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Custom Themes & Branding

> Learn how to customize the look and feel of your Agent Experience to match your brand

If you're deploying your Agent using the [**JavaScript SDK**](/javascript-sdk/introduction) and using one or both of Adopt’s deployment components — the **Copilot Sidebar** and the **Universal Search** — you can fully customize the look and feel to match your product’s branding.

## Accessing Theme Settings

To configure the Agent Experience UI, go to -

1. Go to **Settings → SDK Configuration**
2. Click on the **Customize Look & Feel** module

![Custom-theme-1](https://asset.adopt.ai/web/docs/custom-theme-1.png)
Here, you can:

* Toggle visibility for each UI component (Copilot Sidebar, Universal Search)
* Configure display settings for each component
* Edit your brand colors and styles

## Universal Search Settings

You can customize the following fields for the **Search interface**:

1. **Hotkey** — Choose the keyboard shortcut that launches the search (e.g., `Cmd+K`)
2. **Input Field Default Text** — Set the placeholder text for the search bar
3. **Log a Support Ticket** — Add a link to an in-app support form or email
4. **Hand Off to Human Chat** — Connect any external tool (e.g., Intercom) using a JS API call
5. **Adopt Branding Toggle** — Remove the Adopt logo if preferred

## Sidebar Copilot Settings

You can configure the following elements in the **Copilot Sidebar**:

1. **Header Title** — Customize the heading shown at the top
2. **Welcome Text & Subtext** — Add introductory messaging
3. **Input Field Default Text** — Set placeholder text in the input box
4. **Log a Support Ticket** — Add a redirect link to your support form or email
5. **Hand Off to Human Chat** — Trigger any external support integration (e.g., Intercom)
6. **Trigger Icon** — Upload your own icon or choose one from Adopt’s icon library

## Brand Colors & Themes

For both components, you can click **Edit Theme** to define:

* Primary and secondary colors
* Background and text styling
* Component accents

This allows you to fully align the agent experience with your product’s brand guidelines.

<Note>
  **Note:** The SDK will automatically fetch and apply your theme settings at runtime — no need to hardcode styles or redeploy.
</Note>