You do not need a developer, a big budget, or an hour of your time to add live chat to your website. With Knocket, you can go from zero to a fully functional, branded, zero-watermark chat widget in under 5 minutes – on any website platform.
This guide covers every step in detail: creating your account, installing the widget on your specific platform, configuring it for maximum conversions, and troubleshooting common issues. Pick your platform and follow along.
Why Most People Overcomplicate Adding Live Chat
Adding live chat to a website is simpler than most guides make it seem. The confusion usually comes from three sources:
1. Too many options – There are dozens of chat widgets, each with different installation methods, pricing tiers, and feature sets. Choosing one can take longer than installing it.
2. Fear of code – Many site owners assume they need developer skills. In reality, most platforms let you install a chat widget by pasting one line of text into a settings panel.
3. Setup bloat – Some chat tools require you to configure agents, routing rules, automated messages, and integrations before the widget even appears. That is not a 5-minute process.
Knocket is designed differently. You sign up, copy one script tag, paste it on your site, and the widget is live. Configuration is optional and can be done after the widget is already visible to visitors.
What You Need Before You Start
Two things, and you probably already have both:
1. A Knocket account – Sign up free at trtc.io/solutions/knocket. No credit card required. The free plan includes all features: live chat, offline forms, social links, Calendly scheduling, brand customization, and zero branding.
2. Access to your website’s admin panel or code – This means your WordPress dashboard, Shopify admin, Squarespace settings, or FTP access for static HTML sites. You do not need to know how to code.
That is it. No developer, no budget approval, no technical prerequisites.
Step 1: Create Your Widget and Get the Script (1 Minute)
After signing up for Knocket:
1. Log in to your Knocket dashboard
2. Click “Get Installation Code”
3. Copy the script tag – it is a single line that contains your unique widget ID
Keep this snippet copied to your clipboard. You will paste it into your website in the next step.
Step 2: Install on Your Platform (2-3 Minutes)
This is the step that varies by platform. Find your platform below and follow the instructions.
WordPress
Option A: Using WPCode Plugin (Recommended)
This is the easiest method and does not require editing theme files:
1. Install the free WPCode plugin from the WordPress plugin directory
2. Go to Code Snippets > Header and Footer
3. Paste the Knocket script tag in the Footer section
4. Click “Save Changes”
5. Visit your site – the chat widget appears immediately
This method is update-safe and works with any WordPress theme. If you change themes later, the widget stays active.
Option B: Editing footer.php
If you prefer not to install another plugin:
1. Go to Appearance > Theme File Editor
2. Open footer.php
3. Paste the Knocket script tag right before the closing body tag
4. Click “Update File”
Important: this edit will be overwritten if you update your theme. Use a child theme or stick with Option A to avoid losing the widget after updates.
Option C: Using functions.php in a Child Theme
For developers who want programmatic control, enqueue the script through your child theme’s functions.php using the wp_footer action hook. This approach is update-safe and lets you add conditional logic, such as showing the widget only on specific pages.
WordPress Performance Tip: If you use a caching plugin like WP Super Cache, W3 Total Cache, or LiteSpeed Cache, clear your cache after installing the widget. Cached pages will not include the new script until you purge them.
Shopify
Option A: Editing theme.liquid (Most Common)
1. Go to Shopify Admin > Online Store > Themes
2. Click the three-dot menu (or “Actions”) > Edit code
3. In the left sidebar, open Layout > theme.liquid
4. Scroll to the bottom and find the closing body tag
5. Paste the Knocket script tag on the line above it
6. Click “Save”
7. Visit your store – the chat widget is live
Note: major theme updates may overwrite this edit. If you update your theme, check that the script is still in place.
Option B: Custom Pixel (Shopify OS 2.0)
For stores using Shopify OS 2.0 themes, the Custom Pixel feature is a cleaner approach:
1. Go to Settings > Customer events
2. Click “Add custom pixel”
3. Name it “Knocket Chat Widget”
4. Paste a small snippet that loads the Knocket script on page view events
5. Click “Save” and connect the pixel
Custom Pixels are update-safe and follow Shopify’s recommended integration pattern for third-party scripts. This is the best long-term option for Shopify stores.
Shopify-Specific Note: No chat widget can appear on Shopify’s checkout page due to platform security restrictions. Your widget will be visible on all other pages, including product pages and the cart page, which is where most pre-purchase questions happen.
React and Next.js
For Next.js (App Router or Pages Router):
Add the Knocket script to your root layout using Next.js’s built-in Script component. Set the strategy to lazyOnload to ensure the widget loads after all critical page resources, preventing any impact on Core Web Vitals.
For the App Router, add it to app/layout.tsx. For the Pages Router, add it to pages/_app.tsx. The widget will persist across all route changes.
For React SPAs (Create React App, Vite, etc.):
Use the useEffect hook to dynamically inject the script tag when your root component mounts. Include a cleanup function that removes the script on unmount to prevent duplicates. Add the component to your root layout so it stays active across route changes.
Why Knocket works well with React: The widget runs in its own isolated container and never interferes with React’s virtual DOM. Unlike heavier widgets like Tawk.to (749KB), Knocket’s under-50KB script does not delay React hydration or cause rendering conflicts.
Conditional rendering tip: You can show the chat widget only on specific pages by conditionally rendering the script based on the current route. For example, show it on contact, pricing, and booking pages but not on documentation or blog pages.
Squarespace
1. Go to Settings > Advanced > Code Injection
2. Paste the Knocket script tag in the Footer field
3. Click “Save”
4. The widget appears on all pages
Code injection is available on all current Squarespace billing plans.
Wix
1. Go to Settings > Custom Code
2. Click “Add Custom Code”
3. Paste the Knocket script tag
4. Set it to load on “All Pages” and place it in the “Body - end” location
5. Click “Apply”
6. Publish your site
Note: Wix’s custom code feature requires a premium plan. Free Wix sites cannot add custom scripts.
Webflow
1. Go to Project Settings > Custom Code
2. Paste the Knocket script tag in the Footer Code section
3. Click “Save Changes”
4. Publish your site
Custom code is available on all paid Webflow Workspace plans.
Ghost
1. Go to Settings > Code Injection
2. Paste the Knocket script tag in the Site Footer section
3. Click “Save”
Works on all self-hosted Ghost installations and Ghost Pro plans.
Any HTML Website
1. Open your website’s HTML file
2. Find the closing body tag
3. Paste the Knocket script tag on the line above it
4. Save and upload to your server
This works for any static site, custom-built pages, or platforms not listed above.
Step 3: Configure Your Widget for Maximum Conversions (2 Minutes)
Your widget is now live, but do not skip this step. A default-configured widget with generic text converts poorly. Taking 2 minutes to customize these five settings can double your chat engagement rate.
1. Set Your Business Hours
In the Knocket dashboard, go to Settings > Working Hours:
● Select your timezone
● Set your online hours for each day of the week
● Enable or disable specific days (closed on weekends, for example)
When you are offline, the widget automatically switches from live chat to an offline form, so visitors can leave their name, email, and message. You never miss a lead.
Why this matters: A widget that shows “live chat” when no one is available frustrates visitors. A widget that automatically shows an offline form captures their information for follow-up. The difference is between a lost visitor and a potential customer.
2. Write a Custom Welcome Message
Go to Settings > Welcome Message and write a greeting that offers specific help, not a generic “How can I help you?”:
● For a SaaS site: “Questions about our pricing? I can help you find the right plan for your team.”
● For a service business: “Want to book an appointment? Click the calendar icon below to schedule.”
● For an e-commerce store: “Need help finding the right product? Tell me what you are looking for.”
● For a consulting firm: “Looking for a consultation? I can match you with the right specialist.”
● For a portfolio site: “Interested in working together? Let me know about your project.”
Why this matters: Specific welcome messages that reference the visitor’s likely intent get 2-3x more click-throughs than generic greetings, according to multiple live chat benchmarking studies.
3. Customize Your Brand Appearance
Go to Settings > Appearance:
● Set the primary color to match your brand’s main color
● Choose light or dark theme based on your site’s design
● Upload your logo for the chat header
● Adjust the widget position (bottom-right or bottom-left)
A chat widget that visually matches your site feels like a native feature, not a third-party add-on. Visitors trust it more.
4. Add Social Links
Go to Settings > Social Links and add links to your WhatsApp, Instagram, Telegram, and Messenger accounts.
This gives visitors multiple ways to reach you beyond in-browser chat. Some people prefer sending a WhatsApp message. Others want to DM you on Instagram. Social links capture these visitors who would otherwise leave without contacting you.
Why this matters: Not every visitor wants to use a browser-based chat window. Social link aggregation gives them the communication channel they are most comfortable with, increasing your total contact rate.
5. Add Calendly Integration (Optional but Powerful)
Go to Settings > Calendly Integration and paste your Calendly URL. Visitors can now book appointments directly from the widget without leaving your site.
This is especially valuable for service businesses, consultants, and any business where the primary call-to-action is scheduling a call or meeting.
What Happens After Installation
When a Visitor Starts a Chat
You receive a real-time notification in your Knocket dashboard. Open it and type your response. The conversation happens in real time, just like any messaging app.
When You Are Offline
Visitors see an offline form asking for their name, email, and message. These submissions appear in your dashboard under the offline messages section. You can review and respond to them when you come back online.
Tracking Your Chat Performance
Your Knocket dashboard shows key metrics:
● Total conversations – how many visitors have chatted with you
● Response time – how quickly you reply on average
● Offline submissions – how many visitors left messages when you were unavailable
● Visitor sources and pages – where chat users came from and which pages they were on when they started a conversation
Use these metrics to optimize. If most chats come from your pricing page, for example, make sure your welcome message on that page addresses pricing questions.
Common Issues and How to Fix Them
The Widget Does Not Appear
This is the most common issue and almost always has one of three causes:
1. Wrong widget ID – Double-check that you copied the full script tag with your actual widget ID, not a placeholder
2. Cache – Clear your website cache (WordPress caching plugins, Shopify cache, CDN cache, browser cache). Cached pages will not include the newly added script
3. Ad blockers – Some ad blockers and privacy extensions block chat widget scripts. Test in an incognito window to rule this out
The Widget Appears but Chat Does Not Work
● Verify your business hours are set correctly in the Knocket dashboard – if you are outside your set hours, the widget shows the offline form instead of live chat
● Make sure your team status is set to “Online” in the dashboard
● Check that your internet connection is stable – Knocket requires a live connection for real-time chat
The Widget Slows Down My Site
Knocket’s script is under 50KB and loads asynchronously, so it should not impact your site speed. If you notice a slowdown:
● Confirm the script tag includes the async attribute
● Test your PageSpeed score before and after installation using Google PageSpeed Insights
● If you recently switched from a heavier widget (like Tawk.to at 749KB), you should see a speed improvement, not a slowdown
The Widget Disappeared After a Theme Update
This happens on WordPress and Shopify when you paste the script directly into a theme file that gets overwritten during updates. To prevent this:
● On WordPress: use the WPCode plugin method instead of editing theme files
● On Shopify: use the Custom Pixel method instead of editing theme.liquid
Why Knocket Is the Fastest Free Chat Widget to Set Up
Feature | Knocket | Tawk.to | Tidio | Crisp |
Setup time | Under 5 min | ~10 min | ~5 min | ~5 min |
Script size | Under 50KB | 749KB | ~300KB | ~200KB |
No branding | Yes (free) | No ($19/month) | Yes | Yes |
Social links | Yes | No | No | No |
Calendly integration | Yes | No | No | No |
Free plan limits | None | None | 50 AI convos/month | 2 agents |
Configurable business hours | Yes | Yes | Limited | Limited |
Offline forms | Yes | Yes | Yes | Yes |
Key differences that matter for setup speed:
● Knocket requires only one script tag. No JavaScript SDK, no npm package, no widget initialization code.
● All features are available from day one on the free plan. No upgrading to unlock social links, Calendly, or branding removal.
● The configuration wizard walks you through all five recommended settings in under 2 minutes.
Going Beyond the Basics: Advanced Tips
Show the Widget Only on Specific Pages
If you only want the chat widget on certain pages (like your pricing page and contact page, but not your blog), you can conditionally load the script:
● On WordPress: use WPCode’s conditional logic feature to load the script only on specific URLs
● On React/Next.js: conditionally render the script component based on the current route
● On Shopify: wrap the script in a Liquid conditional that checks the current template
This reduces visual clutter on pages where chat is less relevant and focuses visitor attention on pages where chat drives conversions.
Use the Welcome Message to Pre-Qualify Leads
Instead of a generic greeting, use your welcome message to ask a qualifying question. For example:
● “Are you looking for a free or paid chat solution?” – routes visitors to the right information
● “What industry is your business in?” – helps you tailor your response
● “Would you prefer to chat here or schedule a call?” – gives visitors a choice immediately
Pre-qualifying questions reduce the time you spend on each conversation and increase the quality of leads.
Pair the Widget with Your Email Marketing
When visitors use the offline form, their email address is captured. Add these emails to your newsletter or drip campaign. Visitors who leave an offline message have already shown interest – they are warm leads.
Monitor Peak Chat Times
Check your Knocket dashboard to see when most conversations happen. If you notice a spike between 2-4 PM on weekdays, make sure someone is available during those hours. If you see offline form submissions piling up on weekends, consider extending your business hours or setting up automated responses.
FAQ
Can I really add a live chat widget in 5 minutes?
Yes. With Knocket, the process is: sign up (1 min), copy the script tag (30 sec), paste it on your website (2 min), configure your settings (2 min). Total: under 5 minutes. No developer needed.
Do I need coding skills to add a chat widget?
No. If you can copy and paste text, you can install Knocket. WordPress users can use a free plugin like WPCode. Shopify users paste one line into their theme. Squarespace, Wix, and Webflow all have code injection panels in their settings.
Is the chat widget really free?
Yes. Knocket is 100% free with no branding, no conversation limits, no agent limits, and no hidden fees. All features are included from day one.
Will the chat widget slow down my website?
No. Knocket’s script is under 50KB and loads asynchronously, meaning it does not block your page from rendering. For comparison, Tawk.to’s script is 749KB – 15 times heavier. Test your PageSpeed score before and after installation to confirm.
Can I customize the chat widget to match my brand?
Yes. Knocket lets you customize the primary color, theme (light or dark), logo, welcome message, widget position, and launcher text – all from a visual editor in the dashboard. No code required.
What happens when I am offline?
The widget automatically switches from live chat to an offline form that captures the visitor’s name, email, and message. You can review and respond to offline messages when you come back online. No lead is lost.
Can I show the widget only on specific pages?
Yes. On WordPress, use WPCode’s conditional logic. On React/Next.js, conditionally render the script based on the current route. On Shopify, use Liquid template conditionals. Knocket’s lightweight script makes conditional loading easy on any platform.
How does Knocket compare to Tawk.to for setup?
Both are relatively quick to set up, but Knocket has three advantages: (1) its script is 15 times lighter, (2) it has zero branding on the free plan while Tawk.to charges $19/month to remove its badge, and (3) it includes social links and Calendly integration that Tawk.to does not offer.
Add a free, professional chat widget to your website right now. Get started with Knocket