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.
Appearance customization helps you create a seamless brand experience for end users.
Appearance settings let you customize the visual elements of your Chat widget.
Customize your Chat widget appearance in a few steps.
For detailed instructions on each customization option, see Implementation & usage.
Configure the appearance of your Chat widget.
General settings control your AI Agent’s name, description, and chat window options.
To customize general settings:
On the Ada dashboard, go to Config > CHANNELS > Chat. Then, on the Appearance tab, open the General drawer.
Under Basic information, select a language to modify content for, then enter the following information:
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.
Add the above content for any additional languages required.
Under Functionality, use these toggles to change the functionality in the chat window:
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.
Click Save changes.
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.
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.
End users only see the chat transcript options that you have activated in Ada.
To configure transcript settings:
On the Ada dashboard, go to Config > CHANNELS > Chat. Then, on the Appearance tab, open the General drawer.
Under Chat Transcript, enable the Allow customers to email transcript and Allow customers to download transcript toggles to activate each feature.
Click Save changes.
The chat button is the entry point for end users to start a conversation with your AI Agent.
To customize the chat button:
On the Ada dashboard, go to Config > CHANNELS > Chat. Then, on the Appearance tab, open the Chat button drawer.
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:
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.
If you select Text button
, you can make the following changes:
Click Save Changes.
If your AI Agent is live, saving makes any changes appear immediately for your end users.
The chat window is where end users interact with your AI Agent.
To customize the chat window:
On the Ada dashboard, go to Config > CHANNELS > Chat. Then, on the Appearance tab, open the Chat window drawer.
To set the accent color, under Accent color, either click the color swatch to use a color picker, or paste in a hex code.
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.
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.
Select a light or dark mode theme. You can also choose to automatically default to the user’s device.
Select a shape for both the chat windows and the bubbles in it. You can choose either Round or Rectangular.
Choose the text size for your chat.
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.
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.
Click Save changes.
Fallback content displays when Chat services are temporarily unavailable.
To customize fallback content:
On the Ada dashboard, go to Config > CHANNELS > Chat. Then, on the Appearance tab, open the Fallback message drawer.
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.
Select a language to modify content for, then add the following information:
Click Save changes.