Copy page

Developers

Web Chat Widget SDK

Integrate the Qwetty web chat widget into your website for real-time customer communication.

Installation

Add the widget script to your website:

Code
<script src="https://app.qwetty.com/webchat/widget.js"
  data-channel-id="YOUR_CHANNEL_ID">
</script>

Configuration options

Pass configuration via data- attributes on the script tag:

Attribute	Description	Default
data-channel-id	Your web chat channel ID (required)	—
data-position	Widget position: left or right	right
data-color	Primary color (hex)	#0066ff
data-title	Chat window title	"Chat with us"

How it works

1. The widget loads and displays a chat button on your page
2. When a visitor clicks, a chat window opens
3. If "require form before chat" is enabled, the visitor fills in their details first
4. A guest chat session is created on the Qwetty backend
5. Messages are exchanged in real-time via WebSocket
6. Your team sees the conversation in the Qwetty inbox

Guest sessions

Web chat visitors don't need to log in. Each visitor gets a guest session tied to the channel. If the visitor provides their name or email (via the pre-chat form), a contact is created in your directory.

Framework examples

React

Code
import { useEffect } from 'react';

function QwettyChat({ channelId }) {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://app.qwetty.com/webchat/widget.js';
    script.dataset.channelId = channelId;
    document.body.appendChild(script);
    return () => document.body.removeChild(script);
  }, [channelId]);

  return null;
}

Next.js

Code
import Script from 'next/script';

export default function Layout({ children }) {
  return (
    <>
      {children}
      <Script
        src="https://app.qwetty.com/webchat/widget.js"
        data-channel-id="YOUR_CHANNEL_ID"
        strategy="lazyOnload"
      />
    </>
  );
}

Next steps

• Web Chat Widget — Channel setup and design configuration
• Channel Configuration — Advanced widget settings