How to Customize Agent Design

February 25, 2025

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.
Color Scheme and Background Styles settings in the Style tab of the Designer section in Jotform AI Agent Builder
  1. Next, scroll down within the Style tab to access additional settings that you can adjust to fit your preferences.
Other style settings under the Style tab of the Designer section in Jotform AI Agent Builder

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.

Note

Changes made in the Designer section of the AI Agent Builder are saved automatically and reflected in real time in the Style Design Preview section on the left.

Jotform AI Agents
Contact Support:

Our customer support team is available 24/7 and our average response time is between one to two hours.
Our team can be contacted via:

Support Forum: https://www.jotform.com/answers/

Contact Jotform Support: https://www.jotform.com/contact/

Send Comment:

Jotform Avatar
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Podo Comment Be the first to comment.