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. Provide data-organization-id or data-channel-id (at least one is required):

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

Configuration options

Pass configuration via data- attributes on the script tag:

Attribute	Description	Default
data-organization-id	Your organization ID (this or data-channel-id required)	—
data-channel-id	Your web chat channel ID (this or data-organization-id required)	—
data-position	Widget position: bottom-right or bottom-left	bottom-right
data-primary-color	Primary color (hex)	#10b981
data-widget-title	Chat window title	"Chat with us"
data-widget-subtitle	Subtitle below the title	—
data-require-form-before-chat	Require a pre-chat form ("true"/"false")	false
data-popup-message	Proactive popup message	—
data-popup-delay	Delay before the popup (ms)	—
data-language	Widget language	—
data-api-url	Override the API base URL	—
data-api-key	Optional API key	—

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/embed.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/embed.js"
        data-channel-id="YOUR_CHANNEL_ID"
        strategy="lazyOnload"
      />
    </>
  );
}

Next steps

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