Guide

Widget Customization

Make the chat widget match your brand. Customize colors, logos, messages, and behavior from your dashboard — no code changes needed.

How to customize

Open Channels

Click "Channels" in the sidebar. You need to be an owner or admin to change channel settings.

Select your website channel

Click the channel for your website, then open the "Live Chat" tab. All widget customization options live here.

Update settings

Change any branding, messaging, or behavior settings. Your changes are saved when you click the Save button.

Changes apply immediately

The widget fetches its configuration on each page load, so your changes will be reflected the next time a visitor loads your website.

Branding

Visual settings that control how the widget looks on your site.

Brand color

A hex color applied to the launcher button, chat header, send button, and outgoing message bubbles. Set any 6-digit hex value to match your brand.

Default: #2563eb

Logo

A custom image displayed on the launcher button. Upload a JPEG, PNG, GIF, or WebP file (max 2 MB, at least 64x64 px recommended). If no logo is set, the Sonny default logo is used.

Default: Sonny logo

Position

Which corner of the page the widget appears in. Choose between bottom-right and bottom-left.

Default: Bottom right

Launcher style

What the round launcher button shows: pick from a set of icons and choose the icon color, or use your uploaded logo instead.

Default: Chat bubble icon, white

Messages

Customize the text visitors see when they interact with the widget.

Greeting messageMax 500 characters

The text shown at the top of the chat window when a visitor opens the widget. Use this to set the tone for the conversation.

Default: "Hi there! How can we help?"

Online messageMax 500 characters

The status text shown in the chat header when at least one agent is online. Appears alongside a green indicator dot.

Default: "We typically reply in a few minutes"

Offline messageMax 500 characters

The status text shown in the chat header when no agents are online. Appears alongside a grey indicator dot.

Default: "We're away — leave a message and we'll get back to you"

Email prompt timing

Control when visitors are asked for their name and email. Choose "Before first message" to require contact info upfront, or "After first message" (default) to let visitors start chatting immediately and capture their info after.

Pre-chat survey

Ask visitors for their details before the chat starts. Turn it on and choose which fields to ask for (email, name). It's off by default, so visitors can chat right away.

Office hours

Set your opening hours for each day of the week. The widget shows as online only when an agent is available during those hours — outside them, visitors see your offline message, and the AI auto-responder can step in if you use it.

Allowed dev domains

The widget only loads on your registered production domain by default. Add extra domains (like localhost:3000 or staging.example.com) to test the widget during development. localhost is always allowed automatically.

Need the installation guide?

If you haven't installed the widget yet, start with the setup guide.

Widget setup guide