Back to docsGuide

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

1

Go to Settings > Websites

Open the sidebar and navigate to Settings, then click Websites. You need to be an owner or admin to access this page.

2

Select your website

Click on the website you want to customize. This opens the website detail page where all customization options are available.

3

Update settings

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

4

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

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.

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