Chat Widget Guide
Embed a chat widget on your website so visitors can chat without leaving your site.
Quick Start
Add KwenTalk's chat widget to your website with a single line of code. Visitors see a floating chat bubble, click to open, and chat with your AI assistant - all without leaving your site.
For Business Owners
How to Get the Embed Code
- Go to Dashboard → AI Assistants → [Your Chatbot]
- Click Settings → Embed
- Copy the code snippet:
<script data-chatbot-id="YOUR-CHATBOT-ID" src="https://kwentalk.com/widget/kwentalk-widget.js" ></script> - Paste before
</body>tag on your website
How to Customize the Widget
- Go to AI Assistants → [Chatbot] → Settings → Embed
- Configure appearance:
- Position: Bottom-right or bottom-left
- Primary Color: Match your brand
- Header Style: Solid or gradient
- Size: Small, medium, or large
- Configure behavior:
- Welcome Message: First message visitors see
- Proactive Message: Auto-show message after delay
- Sound Notifications: Enable/disable sounds
- Set up CSAT (optional):
- Enable customer satisfaction rating
- Choose trigger: manual or after X messages
How to Restrict to Specific Domains
- Go to Embed Settings
- Add Allowed Domains:
example.com- exact match*.example.com- all subdomains
- Leave empty to allow all domains
Settings & Configuration
| Setting | What it does |
|---|---|
| Display Name | Agent name shown in widget header |
| Welcome Message | First message when chat opens |
| Position | Bottom-right or bottom-left corner |
| Primary Color | Widget theme color |
| Header Style | Solid color or gradient |
| Size | Small (350×500), Medium (400×600), Large (450×700) |
| Show Branding | Display "Powered by KwenTalk" |
| Allowed Domains | Restrict where widget can load |
| Proactive Message | Auto-show message after delay |
| Sound Enabled | Play notification sounds |
| CSAT Enabled | Show satisfaction rating |
For Website Developers
Installation
Basic installation - add before </body>:
<script
data-chatbot-id="abc-123-def-456"
src="https://kwentalk.com/widget/kwentalk-widget.js"
></script>
Platform-Specific Instructions
WordPress:
- Go to Appearance → Theme Editor → footer.php
- Paste code before
</body> - Or use a plugin like "Insert Headers and Footers"
Shopify:
- Go to Online Store → Themes → Edit code
- Open theme.liquid
- Paste code before
</body>
Wix:
- Go to Settings → Custom Code
- Add new code → Body - End
- Paste the script
FAQ
Q: Will the widget slow down my website? A: No, the widget script is lightweight (<10KB) and loads asynchronously.
Q: Does it work on mobile? A: Yes, the widget automatically switches to full-screen mode on mobile devices.
Q: Will conversations persist if visitors navigate to other pages? A: Yes, chat sessions are saved in the browser and persist across page navigation.
Q: Can I test the widget before going live? A: Yes, use the preview in the Embed Settings page, or add to a staging site first.
Q: What if my site has Content Security Policy (CSP)?
A: Add kwentalk.com to your CSP script-src and frame-src directives.
Troubleshooting
Issue: Widget not appearing Solution: Check that:
- The chatbot is active (not paused)
- Your domain is in the allowed list (or list is empty)
- There are no JavaScript errors in browser console
Issue: Chat not saving between pages Solution: Ensure localStorage is enabled in the browser. Private/incognito mode may not persist sessions.
Issue: CORS or CSP errors
Solution: Add kwentalk.com to your Content Security Policy if your site uses one.