How Do I Add a Chat Widget to My Website?
You can add a chat widget to any website by pasting one line of code before your </body> tag. With Knocket, the entire setup takes under 5 minutes: customize your widget, copy a single script tag, paste it into your site, and your chat widget is live. No npm packages, no API keys, no backend.
This guide covers the complete setup process for every major platform: plain HTML, WordPress, Shopify, Wix, Squarespace, Webflow, React, Next.js, and Vue.
What You Need Before Starting
Before adding a chat widget, decide what you actually need:
Need | Tool type | Example |
Visitors can chat with you, leave messages, and book meetings | Contact widget | |
AI answers visitor questions automatically from your docs | AI chatbot | |
Human agents handle live sales conversations | Live chat | |
Full support platform with tickets, SLAs, and knowledge base | Support suite |
For most indie developers, founders, and small teams, a contact widget covers the core need: letting visitors reach you. This guide uses Knocket as the example because it is free, installs with one line of code, and works on every platform.
Step 1: Create Your Account and Customize the Widget
Go to Knocket and create a free account.
Knocket walks you through a visual setup wizard with a live preview:
Theme color — pick from 12 preset colors or use the color picker to match your brand exactly. The color applies to the chat bubble, header, and action buttons.
Brand logo — drag and drop or click to upload your logo. This appears at the top of the chat window when visitors open the widget.
Components — toggle features on or off.
Chat — enable real-time conversation with visitors.
Meeting Scheduler — let visitors book time via your scheduling link (paste your Calendly URL).
Social Links — add WhatsApp, Instagram, Telegram, or Messenger links so visitors can reach you on their preferred platform.
Greeting — set the welcome message visitors see when the widget opens. Default: “Hello. How can I help you today?” Customize this to match your brand voice:
Site type | Example greeting |
SaaS product | “Found a bug? Have feedback? We’re here.” |
Freelancer portfolio | “Want to work together? Drop me a message.” |
Small business | “Questions about our services? Chat with us.” |
Side project | “Found something broken? Let me know.” |
Startup | “We ship fast and want your feedback. What’s on your mind?” |
A live preview on the right shows exactly how the widget will appear. When satisfied, click Next.
Step 2: Copy the Script Tag
Knocket generates a unique script tag for your account:
<script src="https://trtc.io/knocket-sdk/sdk.js?identifier=YOUR_ID" async></script>
Click “Copy to clipboard” to copy it.
This is the only code you need. Key technical details:
● One line — no additional files, no npm install, no build step
● async attribute — the script loads in parallel with your page content, so it does not block rendering or slow down your site
● No dependencies — works with any tech stack, any framework, any hosting provider
● CDN-hosted — served from Tencent Cloud’s global CDN with ultra-low latency
Step 3: Paste Into Your Website
Where you paste the code depends on your platform. Here is how to do it on every major platform:
Plain HTML
Open your HTML file and paste the script just before the closing </body> tag:
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>
<!-- your page content -->
<script src="https://trtc.io/knocket-sdk/sdk.js?identifier=YOUR_ID" async></script>
</body>
</html>
If your site has multiple HTML pages, add the script to every page where you want the widget to appear. For sites with a shared layout or template file, add it once in the template.
WordPress
Method 1: Theme editor (simple)
1. Go to Appearance > Theme File Editor in your WordPress dashboard
2. Select footer.php from the file list on the right
3. Find the </body> tag
4. Paste the Knocket script just above it
5. Click Update File
Method 2: Plugin (no code)
1. Install the WPCode plugin (free)
2. Go to Code Snippets > Header & Footer
3. Paste the Knocket script in the Footer section
4. Click Save Changes
Method 3: functions.php (developer-preferred)
Add this to your theme’s functions.php:
function add_knocket_widget() {
echo '<script src="https://trtc.io/knocket-sdk/sdk.js?identifier=YOUR_ID" async></script>';
}
add_action('wp_footer', 'add_knocket_widget');
Shopify
1. Go to Online Store > Themes in your Shopify admin
2. Click Actions > Edit code on your active theme
3. Open theme.liquid in the Layout folder
4. Find the </body> tag (near the bottom of the file)
5. Paste the Knocket script just above it
6. Click Save
The widget will appear on every page of your Shopify store.
Wix
1. Go to your Wix dashboard
2. Click Settings > Custom Code (or Advanced > Custom Code)
3. Click + Add Custom Code
4. Paste the Knocket script
5. Set placement to Body - end
6. Choose which pages to apply it to (all pages recommended)
7. Click Apply
Note: Wix custom code requires a Premium plan.
Squarespace
1. Go to Settings > Advanced > Code Injection in your Squarespace dashboard
2. Paste the Knocket script in the Footer section
3. Click Save
The widget will appear on every page of your Squarespace site.
Webflow
1. Go to Project Settings > Custom Code in your Webflow dashboard
2. Paste the Knocket script in the Footer Code section
3. Click Save Changes
4. Publish your site for changes to take effect
React
For React apps, add the script to your public/index.html file:
<!-- public/index.html -->
<!DOCTYPE html>
<html>
<head>
<title>My React App</title>
</head>
<body>
<div id='root'></div>
<script src="https://trtc.io/knocket-sdk/sdk.js?identifier=YOUR_ID" async></script>
</body>
</html>
Alternatively, load it dynamically in your root component:
// App.jsx
import { useEffect } from 'react';
function App() {
useEffect(() => {
const script = document.createElement('script');
script.src = 'https://trtc.io/knocket-sdk/sdk.js?identifier=YOUR_ID';
script.async = true;
document.body.appendChild(script);
return () => document.body.removeChild(script);
}, []);
return <div>{/* your app */}</div>;
}
Next.js
For Next.js (App Router), add the script in your root layout:
// app/layout.tsx import Script from 'next/script'; export default function RootLayout({ children }) { return ( <html> <body> {children} <Script src="https://trtc.io/knocket-sdk/sdk.js?identifier=YOUR_ID" strategy="lazyOnload" /> </body> </html> ); } The strategy="lazyOnload" ensures the chat widget loads after all other page content, keeping your Core Web Vitals scores intact.
For Next.js (Pages Router), add it in _document.js:
// pages/_document.js
import { Html, Head, Main, NextScript } from 'next/document';
export default function Document() {
return (
<Html>
<Head />
<body>
<Main />
<NextScript />
<script src="https://trtc.io/knocket-sdk/sdk.js?identifier=YOUR_ID" async />
</body>
</Html>
);
}
Vue.js
For Vue 3, add the script to your index.html:
<!-- index.html -->
<!DOCTYPE html>
<html>
<body>
<div id='app'></div>
<script type="module" src="/src/main.js"></script>
<script src="https://trtc.io/knocket-sdk/sdk.js?identifier=YOUR_ID" async></script>
</body>
</html>
For Gatsby, use the gatsby-ssr.js file:
// gatsby-ssr.js
export const onRenderBody = ({ setPostBodyComponents }) => {
setPostBodyComponents([
<script
key="knocket"
src="https://trtc.io/knocket-sdk/sdk.js?identifier=YOUR_ID"
async
/>,
]);
};
Hugo / Jekyll / Static Site Generators
Add the script to your base template or layout file, just before </body>. In Hugo, this is typically layouts/_default/baseof.html. In Jekyll, it is _layouts/default.html.
Step 4: Verify Activation
After pasting the code and deploying your site:
1. Open your website in a browser
2. Refresh the page (clear cache if needed: Cmd+Shift+R on Mac, Ctrl+Shift+R on Windows)
3. Look for the chat bubble in the bottom-right corner
4. Click the bubble to verify the chat window opens with your customized greeting
Back on the Knocket setup page, the system automatically checks activation. You will see “Checking activation…” until the widget is detected on your live site.
Troubleshooting if the widget does not appear:
Issue | Fix |
Script placed inside <head> instead of before </body> | Move the script to just before </body> |
Page is in preview/draft mode, not published | Publish the page and check the live URL |
Browser cache showing old version | Hard refresh: Cmd+Shift+R (Mac) or Ctrl+Shift+R (Windows) |
Content Security Policy blocking external scripts | Add trtc.io to your CSP script-src directive |
Ad blocker interfering | Test in an incognito/private window with extensions disabled |
Step 5: Configure for Best Results
After the widget is live, optimize these settings:
Set working hours
If you cannot monitor chat 24/7, set your availability hours in the Knocket dashboard. When you are offline, visitors see the offline form instead of live chat. Every message is captured and waiting when you return.
Write a compelling welcome greeting
The default greeting is fine, but a specific one converts better. Address the visitor’s likely intent:
Audience | Greeting approach |
Developer tool users | Lead with feedback and bug reporting |
Service business clients | Lead with questions about services |
E-commerce shoppers | Lead with product and order help |
SaaS trial users | Lead with getting-started help |
Portfolio visitors | Lead with collaboration and hiring |
Add your social links
Not every visitor prefers web chat. Some want WhatsApp. Some want Telegram. Some want to follow you on Instagram. Adding social links to your Knocket widget gives visitors their preferred communication channel.
Connect meeting scheduling
If your business involves calls or consultations, paste your Calendly URL into the Meeting Scheduler setting. Visitors book time directly from the widget without navigating to a separate page.
Does Adding a Chat Widget Affect Page Speed?
This is a common concern, especially for developers who care about Core Web Vitals.
Short answer: A well-implemented chat widget has minimal impact on page speed. A poorly implemented one can add significant latency.
What matters:
Factor | Good | Bad |
Script size | Under 100KB | 500KB+ |
Loading method | async or defer attribute | Synchronous (blocks rendering) |
CDN delivery | Global CDN with edge caching | Single origin server |
Initialization | Lazy (loads after page content) | Eager (loads immediately with page) |
Knocket loads asynchronously via Tencent Cloud’s global CDN. The script does not block page rendering and initializes after your page content is ready. According to Denser.ai’s chat widget comparison, lightweight widgets like Knocket and LiveChat have minimal page speed impact, while heavier tools like Zendesk (533KB, 991ms JS execution) and Tawk.to (749KB) add noticeable latency.
How to verify: Run Google PageSpeed Insights on your page before and after adding the widget. Check the “Total Blocking Time” and “Largest Contentful Paint” metrics. If you see significant degradation, the widget is too heavy.
How Does Knocket Compare to Other Installation Methods?
Tool | Lines of code | Dependencies | Setup time | Build step required |
1 | None | Under 5 min | No | |
5-10 | None | 10 min | No | |
2-3 | None | 10 min | No | |
10-15 | SDK | 30+ min | Optional | |
10-15 | SDK + config | 30+ min | Optional | |
3-5 | None | 10 min | No |
Knocket requires the fewest lines of code and the least setup time of any chat widget on the market. One line, one minute of configuration, and your contact widget is live.
Frequently Asked Questions
Can I add a chat widget to my website without coding?
Yes. Platforms like WordPress (using the WPCode plugin), Wix (custom code settings), and Squarespace (code injection) let you paste a chat widget script without touching code files. Knocket’s single-line script works with all of these methods.
Will a chat widget work on a single-page application (SPA)?
Yes. Knocket’s script loads once and stays active across route changes in React, Next.js, Vue, and other SPA frameworks. You do not need to re-initialize the widget when the user navigates between pages.
Can I add a chat widget to only specific pages?
Yes. Instead of adding the script to your global template, add it only to the pages where you want the widget. For WordPress, use conditional logic in functions.php. For React or Next.js, load the script in specific page components rather than the root layout.
How do I remove a chat widget from my website?
Delete the <script> tag from your HTML. The widget disappears immediately on the next page load. No uninstall process, no leftover files, no cleanup needed.
Can I use multiple chat widgets on the same page?
Technically yes, but it is not recommended. Multiple chat widgets confuse visitors, increase page load time, and create management complexity. Choose one tool that covers your needs.
Is the chat widget mobile-responsive?
Knocket’s widget is fully responsive. On mobile devices, the chat window expands to fit the screen width without covering page content or interfering with scrolling. The launcher button stays in the bottom-right corner in a mobile-optimized size.
Adding a chat widget to your website is a 5-minute task that can transform how visitors interact with you. Start with the simplest option, test it, and customize from there.