Widget Installation

Add the Sonny live chat widget to your website in under 5 minutes. All you need is a single script tag.

Installation steps

Get your workspace ID

Add the script tag

Copy the script tag below and paste it into your website's HTML, just before the closing </body> tag. Replace YOUR_WORKSPACE_ID with your actual workspace ID.

Customize (optional)

You can customize the widget appearance using data attributes on the script tag. See the customization options below.

Verify installation

Visit your website and you should see the chat widget appear in the bottom-right corner. Send a test message to confirm it works.

Basic installation

Add this script tag to your website, just before the closing </body> tag:

HTML

<script
  src="https://widget.usesonny.com/loader.js"
  data-workspace-id="YOUR_WORKSPACE_ID"
  async
></script>

Customization options

Customize the widget by adding data attributes to the script tag:

HTML (with customization)

<script
  src="https://widget.usesonny.com/loader.js"
  data-workspace-id="YOUR_WORKSPACE_ID"
  data-color="#4F46E5"
  data-position="bottom-right"
  data-greeting="Hi there! How can we help?"
  async
></script>

data-color

Primary color of the widget (hex code)

Default: #000000

data-position

Widget position on the page

Default: bottom-right

data-greeting

Greeting message shown to visitors

Default: Hi! How can we help?

Next steps

Now that your widget is installed, you might want to set up email forwarding too.

Set up email forwarding