Skip to main content
At the end of this page, the conversation window and the launcher match your site’s look, and the changes are live for end users.

​
Before you start

Before you start, sign in to the dashboard and select the organization you want to work in.
  • You need the Admin or Member role. Other roles see the Design page read-only, without Save Changes or Discard. See Roles and permissions.
  • Design does not depend on publishing. You can style a draft agent before it goes live, or restyle a published one.
  • The Messages group is available on paid plans only. Free organizations always show the Tars branding.

​
The Design page

Open your agent in the builder and select Design. The header shows the Agent Builder back link, the title Design, and the subtitle Customize the look and feel. The left panel holds the settings. The right side is a live preview that reflects each change as you make it. On the Agent tab the preview is a real conversation with your agent, so you can send messages and see the styling on live replies. On the Launcher tab the preview is a mock web page with the floating launcher in its corner.

​
Agent tab

The Agent tab has three groups: Brand identity, Theme, and Messages.

​
Brand identity

Logo / avatar is a dropzone. Drag a square PNG or JPG of up to 5 MB onto it, or select it to upload. Without a logo, the widget shows the first letter of the agent name on the accent color. After an upload, a Remove button and three sliders appear: Logo spacing in percent, Logo width in pixels, and Logo corner radius in pixels. Use them to fit the logo into the widget header. Name is the title in the widget header. Subtitle (optional) is the smaller line under it, for example AI Agent · online. Accent color offers a row of preset swatches. The rainbow tile opens a color picker, and the Custom field accepts a hex value. When the agent has a knowledge base imported from your website, and Tars found a brand color there, a From your website chip appears. Select it to apply that color. The accent color drives the end user’s message bubble, the send button, links, and selection.

​
Theme

Variant offers three tiles: Beach (warm sand, the default), Slate (cool neutral grey), and Midnight (deep blue-charcoal). Each variant is a curated neutral palette with a light and a dark version, and your accent color sits on top. Appearance switches between Light and Dark. Font is a list of 13 fonts, including Inter, Roboto, Lato, and Open Sans. Poppins is the default. The font applies across the whole chat.

​
Messages

This group appears on paid plans only. The Tars branding switch controls the Tars label in the widget. Turn it off to hide the label. Footer disclaimer (optional) is a short line under the input, for example Tars can make mistakes. Leave it empty to show no disclaimer.
1

Set the brand identity

Upload a logo, fill in Name and Subtitle, then pick an Accent color.
2

Choose the theme

Pick a Variant tile, set Appearance, and choose a Font.
3

Check each device size

Switch the header toggle between Desktop, Tablet, and Mobile, and send a test message in the preview.
4

Save

Select Save Changes in the header.
A message confirms Design saved.

​
Launcher tab

Select the Launcher tab. The preview becomes a mock web page with the floating launcher, and the settings panel shows the groups below.
The Design page on the Launcher tab, with the icon, size, shape, position, and callout settings on the left and the mock web page preview on the right

​
Custom Icon and Default Icons

Custom Icon is a dropzone for your own launcher image. After the upload, a preview of the image, a Remove button, and an Icon spacing slider appear. Icon spacing shrinks or grows the image inside the launcher. Default Icons offers eight built-in tiles: Chat, Message, Robot, Headset, Help, Sparkles, Send, and Lightning. Selecting a tile replaces any custom icon.

​
Size, Shape, and Widget Background

Size is Small, Medium, or Large. Shape is Circle or Rounded. Each tile previews the current icon on the current background. Widget Background sets the launcher’s background color.

​
Position and Offset

Position places the launcher at Bottom Right or Bottom Left. The Offset fields, Horizontal (px) and Vertical (px), move the launcher away from the corner. Use them to clear a cookie banner.

​
Callout Bubble

Show callout message turns the message bubble beside the launcher on or off. When it is on, two fields appear. Message is the callout text, for example Hi! How can I help?. When the agent has more than one language enabled, flag tabs above the field switch which language you are editing. See Build a multi-language agent. Delay (seconds) is the time before the callout appears after the page loads.
1

Pick an icon

Select one of the Default Icons, or upload your own under Custom Icon.
2

Set size, shape, and background

Pick a Size and a Shape, then choose a Widget Background color.
3

Position the launcher

Choose Bottom Right or Bottom Left, then adjust the Offset values.
4

Write the callout

Turn on Show callout message, enter a Message, and set Delay (seconds).
5

Save the launcher

Save Widget at the bottom of the panel saves only the launcher. Save Changes in the header saves both tabs.

​
How changes reach your site

Saved design is stored on the agent, not on a published version, so you do not publish to apply it. The widget on your site and the agent link load the current design on every page load. Nothing on your site changes for a styling update. See Embed the widget for the snippet and Deployments explained for what publishing does control.

​
Verify

Reload a page where the widget is embedded, or open your agent link. The launcher and the conversation window show the new styling.