Chatonio

This is taking longer than usual.

Chatonio

Web chat widget: style and position

October 26, 2026 2 viewsChannels & Integrations

How the widget looks is set per channel, on the Web channel settings page: Project settings → Channels → your Web channel. Appearance is expanded when the page loads and holds the widget style, colors and wording. Launcher holds the shape, icon and placement of the button in the corner. One Save changes button at the bottom of the page saves the whole form.

Choosing the widget style

Widget style in Appearance offers twelve designs: Classic, Soft, Quiet, Ink, Paper, Float, Concierge, Service, Rail, Studio, Aura and 8-Bit. Classic is the subtle refresh that replaces the former default, including on channels that have never selected a style. The other designs change the layout, cards, chat bubbles, forms and short opening and closing animations. They use the same chat features, messages and help content. 8-Bit uses pixel lettering, square frames and stepped animations, with one brand color.

Choosing a style keeps your existing Widget color and launcher settings. To try the palette shown for that design, press Use suggested colors; this also resets dark color overrides to automatic. Most styles need one brand color. Concierge and Aura also offer a Secondary color for the gradient or atmospheric background. Leave it blank for an automatic companion. Studio chooses readable ink for your highlight color automatically.

The twelve widget styles in Appearance, with 8-Bit selected

Color mode stays separate: every design supports Light, Dark and Match the website. In Advanced settings, the optional dark brand color and, for Concierge and Aura, dark secondary color override the automatic choices. The controls use readable foreground colors automatically.

Trying changes before saving

On desktop, the live widget preview opens automatically when you load this Web channel's settings, using the current unsaved form. On smaller screens, press Test Widget in the embed-code card to open it. Use Hide Widget to close the preview and Test Widget to open it again. The widget appears directly in its configured corner of the page, with no surrounding preview box; the settings around it remain usable. While it is open, changes to the style, colors, text and launcher update the real widget preview. You can open messages, help articles and the pre-chat form. Changes to the chat-flow settings may restart the preview so it uses the new configuration. The preview uses your Web channel, so a message you send is a real test message.

Press Save changes to make the configuration available on your website. Testing it alone does not save it, and choosing another design does not require replacing the embed snippet. The home screen, Knowledge Base, FAQ and conversation history still follow their own switches; a disabled section leaves no empty card or navigation slot.

Position

Under Advanced settings in the Launcher section: Launcher corner (Bottom right or Bottom left), Horizontal Offset (px) and Vertical Offset (px). These move the button and anything stacked on it. The chat window has its own Chat window corner and offsets under Advanced settings in the Appearance section; left as they are, the window follows the launcher.

Except for No launcher, which never draws a button at all, every launcher shows a close icon while the chat is open. Studio and 8-Bit keep their square frames; the other styles use a circle. The closed button shows the unread badge — counting up to 9+.

Was this article helpful?