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.
The launcher preview shows appearance only. Test callout clicks, the delay, and sound on a page with the widget embedded.
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, up to 50 characters. Subtitle (optional) is the smaller line under it, up to 100 characters, for exampleAI 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 exampleTars 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.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, the settings below appear. Message is the callout text, up to 120 characters, for exampleHi! 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.
The callout needs a nonempty message and stays hidden while the chat is open. In a background tab, it waits until the tab becomes visible.
Play a sound with the callout adds a soft attention chime. It is on by default and requires Show callout message to be on. Turn it off to keep the callout silent.
The chime waits for a click or tap on the host page. If the end user already interacted with the page, it plays when the callout appears. Clicking the launcher, the callout message, or its close button cancels a pending chime.
The chime plays at most once every 24 hours for that agent on the same site and browser, when browser storage is available. Opening the chat or dismissing the callout also silences it for 24 hours, even if no chime played.
An end user selects the callout message to open the chat. Keyboard end users can focus the message and activate it with Enter or Space. The × button, labeled Dismiss for screen readers, closes only the callout.
Auto-open the widget
Auto-open widget is off by default. Turn it on to open the widget automatically after an end user loads a page where it is embedded. Choose All devices, Mobile, or Desktop in the Device dropdown. Mobile applies to browser windows narrower than 640 pixels, matching the widget’s full-screen layout. Desktop applies at 640 pixels and wider. The width is checked when the widget would open. End users can still select the launcher on any device. Delay (in seconds) appears beside the dropdown and defaults to three seconds. Set it to0 to open immediately. Both fields are hidden while Auto-open widget is off. Turning it off preserves the device selection and delay. The delay runs on each page load unless the end user has dismissed the widget during that tab’s session. In a background tab, the widget waits until the tab becomes visible before opening.
Closing or minimizing the widget prevents it from opening automatically again for that agent on the same site during the tab’s session, including after a page reload. This requires browser session storage. End users can still reopen it with the launcher.
Existing widgets with automatic opening enabled use All devices until you choose a different target. Save the launcher settings, then reload a page with the widget embedded to check the behavior on the selected device.
Pop-out chat
Pop out chat when visitors switch away is off by default. Turn it on to let the chat move into a small picture-in-picture window that stays above other tabs and apps. When the switch is on, the widget header Menu shows Pop out chat in a supported browser. The chat also pops out when the end user switches to another tab or minimizes the browser during a conversation. See What end users see for the full behavior. The pop-out needs a browser that supports picture-in-picture windows for web pages, such as Chrome or Edge on a desktop. The browser window must be at least 640 pixels wide. In Safari, Firefox, and mobile browsers, the switch has no effect, and the chat stays on the page.Set up the launcher
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). To mute the chime, turn off Play a sound with the callout.
5
Choose the pop-out behavior
To let the chat float above other tabs, turn on Pop out chat when visitors switch away.
6
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. The launcher and the conversation window show the new styling. The agent link shows the conversation styling but has no floating launcher. To check the callout and chime, use a fresh private browser session so an earlier visit’s 24-hour sound limit does not apply.1
Open the page with the embedded widget
Keep the tab visible and wait for the callout delay.
2
Click or tap the page outside the widget
If sound is enabled and browser audio is allowed, the chime plays once.
3
Select the callout message
The chat opens and the callout disappears.
4
Reload the page and dismiss the callout
Select × after the callout appears. The chat stays closed, and the launcher remains available.