Skip to main content

Customize your AI Agent's branding

Get started with customization​

Customizing your AI Agent's branding is an important step to make it align with your brand identity. Customizing your AI Agent involves steps like incorporating your brand colors, designing an eye-catching chat button, and ensuring accessibility. In this topic, explore the significance of these customization options and how they enhance the experience of interacting with your AI Agent.

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

note

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.

Customize your AI Agent's general settings​

You can customize your AI Agent's name, description, and the options available in the chat window.

  1. On the Ada dashboard, go to 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.
      note

      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 toggle this setting on, 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 customers messages.

  4. Under Chat transcript, choose whether you want customers to be able to access transcripts of their conversations with your AI Agent. For more information, see Allow customers to access chat transcripts.

  5. Click Save changes.

Customize the chat button​

You can customize your chat button to make it stand out against your website, while also fitting in with your brand.

  1. On the Ada dashboard, go to 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 language. The button text can be up to 18 characters long.

  3. Click Save Changes.

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

Customize the chat window​

You can make the chat experience feel personalized and polished by customizing the chat window.

  1. On the Ada dashboard, go to 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, turn on 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, turn on 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.

      tip

      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.

      tip

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

  10. Click Save changes.

Customize fallback content​

In the rare event that Ada's chat services go down, you can create content to show up for customers instead of the usual web chat window.

  1. On the Ada dashboard, go to 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 customers 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 customers 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 .