If you’re deploying your Agent using the JavaScript SDK 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 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
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: The SDK will automatically fetch and apply your theme settings at runtime — no need to hardcode styles or redeploy.