Adding a chat widget to your website is easier than you think. Whether you're using WordPress, Shopify, or a custom HTML site, this guide will walk you through the process step by step.
Step 1: Sign Up and Get Your Widget Code
First, you'll need to create an account with a chat widget provider. For this guide, we'll use Kwicklingo, which offers a free forever plan.
Visit the chat widget provider's website
Sign up for a free account (no credit card required)
Complete your business profile
Copy your unique widget code from the dashboard
Step 2: Add the Code to Your Website
Adding chat widget code to website
Your widget code will look something like this:
<script src="https://www.kwicklingo.com/widget.js?businessId=YOUR_ID&apiUrl=https://www.kwicklingo.com" async></script>
For WordPress Websites
Log in to your WordPress admin dashboard
Go to Appearance → Theme Editor or install a plugin like "Insert Headers and Footers"
Paste the widget code just before the closing
Example with Next.js:
<Script src="https://www.kwicklingo.com/widget.js?businessId=YOUR_ID&apiUrl=https://www.kwicklingo.com" strategy="afterInteractive" />
Step 3: Customize Your Widget
Once installed, customize your chat widget to match your brand:
Widget Position
Choose bottom-right, bottom-left, or custom position
Brand Colors
Match your website's color scheme
Welcome Message
Set a custom greeting for visitors
AI Responses
Configure automated responses to common questions
Step 4: Test Your Chat Widget
After installation, test your chat widget:
Visit your website in an incognito/private browser window
Look for the chat widget icon (usually in the bottom-right corner)
Click to open the chat window
Send a test message to verify it's working
Check that messages appear in your dashboard
Common Issues and Solutions
Widget Not Appearing?
Clear your browser cache and refresh
Check that the code is placed before the closing
Top comments (0)