Set up the website chat widget

Last updated: July 23, 2026

The Winly website chat widget adds a chat button to your website. When a visitor sends a message, the conversation appears in the Winly Inbox alongside your other conversations. Your team can reply from the Inbox, or you can let Autopilot respond automatically.

This guide covers creating the widget, installing it on your website, configuring its appearance and allowed domains, setting its Autopilot prompt, and managing it later.

Before you start

Requirement	What to know
Widget limit	You can create one website widget per Winly account.
Website access	You or your website administrator must be able to add a `<script>` tag to the website's HTML.
Team replies	The widget works as a team-managed chat without Autopilot.
Autopilot replies	Automatic replies are optional and require Autopilot to be enabled for the account.

Create the widget

Open Settings in Winly.
Select Widget.
Select Create Widget.
Configure the widget fields.
Select Create.

New widgets are active as soon as they are created.

Configure the widget fields

Field	What it does	Requirements
Business name	Shows your business name in the widget header.	Optional; up to 120 characters.
Greeting text	Shows an opening message when a visitor opens the chat.	Optional; up to 300 characters.
Launcher color	Sets the color of the round chat button on your website.	Enter a valid hex color or use the color picker. The default is `#6366f1`.
Logo URL	Shows your logo in the widget.	Optional; use a complete image URL such as `https://example.com/logo.png`.
Allowed domains	Restricts the websites that can load the widget.	Optional; leave empty to allow any domain, or add each permitted website origin.

You can change these settings later without replacing the installation snippet.

Copy the installation snippet

After the widget is created, Winly shows the installation snippet. Select Copy snippet to copy it.

The snippet follows this format:

<script
  defer
  src="https://w.sbccrm.com/widget.js"
  data-widget-id="wc_xxxxxxxxxxxx"
></script>

The data-widget-id value is unique to your account. It connects the widget on your website to the correct Winly Inbox and widget settings.

Always copy the snippet from Settings → Widget. The example above is for illustration and does not contain your widget ID.

Only the script needs to be added to your website. Winly loads the business name, greeting, color, logo, and other settings automatically.

Install the widget on your website

Paste the snippet immediately before the closing </body> tag on every page where the chat button should appear.

<!doctype html>
<html lang="en">
  <head>
    <title>Your website</title>
  </head>
  <body>
    <!-- Your page content -->

    <!-- Winly chat widget -->
    <script
      defer
      src="https://w.sbccrm.com/widget.js"
      data-widget-id="wc_xxxxxxxxxxxx"
    ></script>
  </body>
</html>

If your website uses a shared layout, footer, or template, add the snippet there once to load the widget on every page that uses that layout.

After publishing the website changes:

Open the website page where you installed the snippet.
Confirm that the launcher appears in the selected color.
Open the launcher and confirm that the greeting appears.
Send a test message and confirm that the conversation reaches the Winly Inbox.

Restrict the widget to specific domains

Use Allowed domains to control which websites can load your widget.

Leave the list empty to allow the widget on any website. This can be useful while testing.
Add one or more origins to restrict the widget to those websites.
Add every subdomain separately. For example, www.example.com and shop.example.com are different origins.

Enter the scheme and host only. Do not include a path or trailing slash.

Configure Autopilot replies

The widget works as a team-managed chat without Autopilot. When Autopilot is enabled for the account, use its separate widget prompt to control how it responds to website visitors.

Open Autopilot.
Select Widget Prompt.
Review or edit the Conversation Prompt.
Select Save Prompt.

The prompt is prefilled with a default. You can use it unchanged, customize it, or clear the field and save to return to Winly's current default. A widget using the default prompt automatically receives future changes to that default.

Include:

What your business offers.
Approved pricing, hours, locations, policies, and links.
The tone Autopilot should use.
Questions it should ask (currently only name and email is supported).
The outcome it should work toward, such as answering a question or offering to book a demo.
When it should hand the conversation to a teammate.

The widget prompt is separate from the main Autopilot conversation prompt used for other conversations. See Configure Autopilot conversations.

Understand what happens when a visitor chats

The visitor opens the launcher and sees the configured greeting.
Their messages create a website contact and conversation in the Winly Inbox.
A teammate can reply from the Inbox. If Autopilot is enabled, it can respond using the widget prompt.
When instructed to do so, Autopilot can ask for the visitor's name and email address and add those details to the contact as the conversation progresses.

For everyday Inbox navigation and conversation handling, see Navigate, search, and filter the Inbox and Compose and send messages.

Manage an existing widget

Edit the widget

Open Settings → Widget.
Select the pencil icon on the widget row.
Update the settings.
Select Save.

You do not need to reinstall the snippet. Saved branding, greeting, color, logo, domain, and Autopilot-prompt changes are loaded automatically.

Copy the installation snippet again

Open Settings → Widget.
Select the Install code (<>) icon on the widget row.
Select Copy snippet.

Pause or delete the widget

Goal	Action	Result
Temporarily stop the widget	Edit the widget and set Status to Inactive.	The widget stops working until you set it back to Active.
Permanently remove the widget	Select the trash icon and confirm deletion.	The widget stops working immediately. The installed snippet no longer loads that widget.

Use Inactive when you may want to restore the widget. Delete it only when you intend to remove it permanently.

Troubleshoot the widget

If the launcher does not appear, Autopilot does not respond, or recent settings do not load, follow Troubleshoot the website widget.