Setup Guide

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 site ID

Add the script tag

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

Customize in Sonny

Set brand color, position, greeting, launcher style, and other behavior from the website source settings in Sonny.

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>
  (function(w,d,s,o,f,js,fjs){
    w[o]=w[o]||function(){(w[o].q=w[o].q||[]).push(arguments)};
    js=d.createElement(s);fjs=d.getElementsByTagName(s)[0];
    js.id=o;js.src=f;js.async=1;fjs.parentNode.insertBefore(js,fjs);
  })(window,document,'script','sonny','https://usesonny.com/widget.js');

  sonny('init', { siteId: 'YOUR_SITE_ID' });
</script>

Auto-init snippet

You can also use a single script tag if you do not need to queue commands before the widget loads:

HTML

<script
  src="https://usesonny.com/widget.js"
  data-site-id="YOUR_SITE_ID"
  async
></script>

Identify visitors & send custom attributes

Once a user logs in to your site, call sonny('identify') with their email and any extra data you want your support team to see. Pass extra fields under attributes — new keys are created as Custom Fields automatically and shown on the right-hand side of the conversation. Subsequent calls overwrite the previous value.

HTML

<script>
  // Identify the visitor and pass any custom attributes you want
  // surfaced in the agent sidebar. Unknown keys are auto-created
  // as Custom Fields in your workspace settings.
  sonny('identify', {
    email: 'jane@acme.com',
    name: 'Jane Doe',
    attributes: {
      plan: 'pro',
      mrr: 499,
      signedUpAt: '2025-08-01T00:00:00Z',
      website: 'https://acme.com'
    }
  });
</script>

Supported value types: string, number, boolean, ISO-8601 date, URL. Pass null to clear an attribute. Keys must start with a letter and use only letters, numbers, or underscores. Limit: 50 attributes per call.

Customization options

Customize the widget from your Sonny website source settings.

Brand color

Primary color of the widget (hex code)

Default: #000000

Position

Widget position on the page

Default: bottom-right

Greeting message

Greeting message shown to visitors

Default: Hi! How can we help?

Next steps

Now that your widget is installed, set up email forwarding too.

Set up email forwarding