Overview

The Chat Window Designer (Messaging → Chat Window in the admin portal) lets you customize how your chat launcher button and widget footer look on your website, without writing any code. Changes preview live and apply immediately once saved.

Launcher icon styles

Under Appearance → Launcher Customization, you can choose the icon shown on your chat launcher button:

• Default chat bubble
• Message
• Robot
• Star
• Thumbs Up
• Phone
• Heart
• Custom (upload your own image)

Each option shows a live preview so you can compare styles before saving.

Launcher shape

Choose from Circle, Rounded, or Square for the launcher button's overall shape. The preview shows each shape at its actual proportions so Circle and Rounded are easy to tell apart before you pick.

Adjustable icon line thickness

When using the Default icon style, a Line Thickness slider appears, letting you make the icon's stroke thinner or thicker to match your brand's visual weight. This option is specific to the default icon — custom-uploaded icons use their own artwork as-is.

Exact launcher label size

Under Appearance → Launcher → Exact label size (optional) you can set the launcher label's exact text size (0.5 to 3 em, for example 0.95) and padding (0 to 40 px, for example 10) separately for when agents are Available and when they are Unavailable. Leave a field empty to keep the Small / Medium / Large size preset; every chat window starts empty, so nothing changes until you fill a field. Values outside the range are rejected when you save. Staff migrations from Velaro v10 copy the v10 launcher font size and padding automatically when they differ from the v10 default.

Formatted offline message

Under Appearance → Offline Status → Formatted offline message (optional) you can format the message visitors see when no agents are available: bold, italics, bulleted or numbered lists, line breaks, and links (http, https or mailto). When it is set, visitors see it instead of the plain Offline Message; leave it empty to keep the plain text. For safety, anything else (scripts, styles, images, other HTML) is removed when you save, and links open in a new tab.

Show availability for the team this page routes to

Under Appearance → Offline Status this switch is off by default: the launcher shows available or unavailable based on your default team. Turn it on when different pages route to different teams. If the page's Widget Loaded workflow has a Route to Team step, the launcher then follows that team's agents and schedule. Example: your Aerospace page routes to the Aerospace team; with the switch on, the launcher shows unavailable when Aerospace has nobody online, even if other teams are online. Pages whose Widget Loaded workflow has no Route to Team step keep using the default team. The page's team is worked out when the page loads (on single-page sites, a new page load is needed to pick up a different team). Staff migrations from Velaro v10 turn this on and add the Route to Team steps automatically, because v10 works this way.

Footer & social links

Under Appearance → Footer, you can add links to your social media profiles that appear in the chat widget's footer:

• Facebook, X (Twitter), LinkedIn
• Instagram, YouTube, TikTok
• One additional custom platform with your own label and URL

If you type a URL without https:// (e.g. facebook.com/yourpage), it's automatically corrected when you click away from the field — you don't need to type the full https:// prefix yourself.

Troubleshooting

My new social icon isn't showing up — make sure a URL is actually entered in that field; empty fields are hidden from the live widget automatically.

The launcher preview doesn't match what visitors see — click into the field or refresh the Designer page; the preview updates live as you change settings, but a stale browser tab may need a refresh to pick up the latest icon set.

Read receipt styles

Appearance > Conversation > Read Receipts sets what shows under the visitor's own messages (readReceiptStyle in the chat window style config). Options:

The label wording ("Sent", "Delivered", "Read") is editable in the Language settings. You can also set readReceiptStyle through the Velaro MCP, CLI or Moshky when updating the chat window appearance. Timestamps are centered above each message at every screen width.

Transfer to agent icon

Under Appearance > Conversation > Transfer to agent icon you can pick the icon on the button visitors use to move from the AI assistant to a human agent: Default, Headset, Person, Handoff or Arrow. Each option shows the real icon. Leaving it on Default keeps the current look. API field: transferButtonIcon (unset = default).

Privacy policy shows as

Under Appearance > Footer > Privacy policy shows as choose Text link (default) or Button. The button stays on one line, a fixed small height and no wider than 45% of the footer; long titles are cut off with an ellipsis, so keep the title short. A live preview shows the result. API field: privacyLinkStyle (link or button, unset = text link).