ChannelsChatChat configuration

Appearance settings

Overview

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

1

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

2

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

3

Make your changes and click Save changes.

For detailed instructions on each customization option, see Implementation & usage.

Implementation & usage

Configure the appearance of your Chat widget.

Customize general settings

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

  5. Click Save changes.

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

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

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

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

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 , 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 beside the existing file path, then click Upload to upload a new .svg file.

      2. 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.
      3. Under Button size, choose the size of the button.

    • If you select Text button , 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

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 beside the existing file path, then click Upload 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 beside the existing file path, then click Upload 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 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 beside the existing file path, then click Upload 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.

Have any questions? Contact your Ada team, or email us at .