How to Customize Agent Design

Beyond the avatar, you can style the entire conversation page where users interact with your AI Agent. From color schemes and fonts to layouts, logos, and background images, every element can be customized to complement your brand and enhance user engagement while seamlessly fitting into your website or platform.

To customize the style of your AI Agent’s Conversation Page, follow these steps:

1. In the AI Agent Builder, click the Style tab in the Designer section, which appears on the right side of the page when it loads.
2. Under the Style tab, you can select a color scheme or modify the background style for the page.

3. Next, scroll down within the Style tab to access additional settings that you can adjust to fit your preferences.

Here’s what each setting in the Style tab does to help you customize your AI Agent’s Conversation page:

• Color Scheme — Adjust the overall color theme of the conversation page to align with your brand’s visual identity.
• Agent Background Style — Personalize the background behind your AI Agent’s avatar and set a heading above it.
  • Start Color — Defines the top gradient color for your AI Agent’s avatar background.
  • End Color — Sets the bottom gradient color for your AI Agent’s avatar background.
  • Heading — Adds a text heading above your AI Agent’s avatar.
• Page Background Style — Style the entire background of the conversation page.
  • Start Color — Specifies the top gradient color for the page background.
  • End Color — Determines the bottom gradient color for the page background.
  • Background Image — Replaces the gradient with an image for the page background. Options include uploading your own image, using AI-generated backgrounds, or selecting one from your saved images.
• Chat Style — Modify the appearance of the chat area where conversations take place.
  • Chat Background Color — Sets the background color of the chat area.
  • Font Family — Changes the font style of the chat text, offering options like Inter, Circular, or Times New Roman.
  • Font Color — Adjusts the color of the chat text for better readability or aesthetic.
• Button Style — Customize the look of the Send button on the conversation page.
  • Button Color — Defines the background color of the Send button.
  • Icon Color — Changes the color of the icon inside the Send button.
• Layout — Controls the position of your AI Agent’s avatar on the conversation page, placing it on either the left or right side.
• Logo — Add a logo to personalize the conversation page. The logo appears on the welcome page and at the top of the heading above your AI Agent’s avatar.