Web Chat Widget

Embed a customizable chat widget on your website so visitors can message your team directly.

Create a Web Chat channel

1. Go to Settings → Channel
2. Click Create Channel and select Web
3. Enter a name for your channel (e.g., "Website Chat")
4. Optionally enable Require form before chat — visitors must fill in their details before starting a conversation
5. Save the channel

Customize the widget

Go to Settings → Channel → [Your Channel] → Details → Config to customize:

Embed on your website

After configuring, go to the Config tab and copy the embed code. Qwetty provides code snippets for multiple frameworks:

HTML

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

JavaScript

Code
const script = document.createElement('script');
script.src = 'https://app.qwetty.com/webchat/widget.js';
script.dataset.channelId = 'YOUR_CHANNEL_ID';
document.body.appendChild(script);

React

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

Replace YOUR_CHANNEL_ID with the actual channel ID shown in the Config tab.

How it works

• Visitors start a guest chat session — no login required
• Messages appear in your Qwetty inbox alongside WhatsApp and Instagram conversations
• The widget uses WebSocket for real-time messaging
• If the "require form" option is enabled, visitors provide their name and contact info before chatting

Next steps

• Channel Configuration — Advanced widget settings
• Inbox Overview — Managing web chat conversations
• Web Chat Widget SDK — Developer integration guide