How to Add a Chatbot to Your Website for Free: HTML, WordPress, Shopify and React (2026)

Most visitors leave a website without contacting you. Often the reason is a question they could not answer quickly: pricing, compatibility, delivery, opening hours. A contact form asks them to wait; a chatbot answers on the spot, around the clock, and hands anything complicated to a person.

How a Chat Widget Works on a Website

A website chatbot is a small JavaScript snippet. When a page loads, the snippet loads the chat widget from the provider's servers in the background and draws a launcher button in a corner of the screen. When a visitor opens it and types, messages travel over a live connection to the chatbot platform, where a flow you built or an AI agent replies. If the visitor asks for a person, the conversation appears in your team's live chat inbox and an agent answers in the same window. Your website itself does not change; the widget floats on top of it.

What It Changes

The true cost of not having a chatbot is mostly invisible: visitors who left without asking, and staff hours spent on repetitive questions. Adding one takes a few minutes on any platform, and the rest of this guide walks through each method. Want to see the result first? Our free website chatbot preview shows a widget on your own site before you install anything.

The fastest way to add a chatbot to any website is the embed snippet. It works on plain HTML, WordPress, Squarespace, Wix, Webflow, Ghost and custom-built sites: if you can paste code into your site, you can add a chatbot.

Step 1: Build the Bot and Copy the Embed Code

Sign up for a free AI chatbot builder such as Conferbot and build your bot, or start from a ready-made template. Open the bot's Share screen, choose Embed, and copy the snippet. It looks like this, with your own bot ID:

<!--Start of Conferbot Script-->
<script type="text/javascript">
  (function (d, s, id) {
    var js, el = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s);
    js.async = true;
    js.src = 'https://cdn.conferbot.com/dist/v1/widget.min.js';
    js.id = id;
    js.charset = 'UTF-8';
    el.parentNode.insertBefore(js, el);
    js.onload = function () {
      var w = window.ConferbotWidget("YOUR_BOT_ID", "live_chat");
    };
  })(document, 'script', 'conferbot-js');
</script>
<!--End of Conferbot Script-->

Step 2: Paste It Before the Closing Body Tag

Add the snippet just before </body> on every page where you want the chatbot. For site-wide deployment, put it in your shared layout or footer template once.

Step 3: Customise the Widget

Appearance is set in the dashboard, so you never edit the code again:

• Position: bottom-right (the convention) or bottom-left
• Colours and theme: match your brand; our free chat widget designer helps you pick accessible colours
• Launcher icon and avatar
• Greeting: the message shown next to the launcher before anyone clicks

Performance Considerations

The snippet loads the widget asynchronously, so your page renders first and the launcher appears afterwards. Measure it yourself with PageSpeed Insights before and after installing. If your site uses a Content Security Policy (CSP), allow the widget's domain (cdn.conferbot.com) in script-src along with the domains the widget connects to.

Verification

Open your site in a private browser window. The launcher should appear in the corner within a few seconds. Click it and run through your main flow once.

WordPress powers a large share of the web, and adding a chatbot takes a couple of minutes. Paste the same embed snippet site-wide in one of three ways.

Option A: A Header and Footer Plugin (Easiest)

1. Go to Plugins > Add New and install a snippet plugin such as WPCode
2. Open its header and footer settings
3. Paste the Conferbot snippet into the Footer box and save

Option B: Your Theme's Custom Code Setting

Many themes (Astra, GeneratePress, Kadence) have a custom code area in the Customizer or theme settings. Paste the snippet into the "before </body>" field.

Option C: functions.php

Developers can print the snippet in the footer from a child theme's functions.php:

function add_conferbot_widget() {
  ?>
  <!-- paste the Conferbot snippet here -->
  <?php
}
add_action('wp_footer', 'add_conferbot_widget');

WordPress-Specific Tips

• Caching plugins: clear the cache after adding the snippet, and exclude it from JavaScript combining or delaying in WP Rocket, LiteSpeed Cache or similar.
• WooCommerce: use page rules to show a different greeting on product, cart and checkout pages.
• Multisite: add the snippet to the network theme to cover every site.

For screenshots of each step, see our WordPress chatbot installation guide. For Squarespace, see the Squarespace chatbot guide, and for GoDaddy, our GoDaddy chatbot guide.

Shopify stores use chatbots for pre-purchase questions, sizing and delivery answers, and order-status questions. Here's how to add one.

Add the Snippet to theme.liquid

1. Go to Online Store → Themes → Actions → Edit code
2. Open theme.liquid (the main layout file)
3. Scroll to the bottom and paste the chatbot script just before </body>
4. Click Save

The chatbot will now appear on every page of your store.

Shopify-Specific Strategies

E-commerce chatbots work best when the greeting matches the page. Some starting points:

Matching the message to the page gives visitors a reason to open the chat. Test greetings one at a time and keep the ones that start conversations.

For "where is my order?" questions, a flow can ask for the order number and call your store's order API through a webhook step, or link to your order-status page. See how this reduces support tickets.

For Webflow-based stores, see our Webflow chatbot guide. Additionally, Wix users should check the Wix chatbot integration guide. For the detailed setup process, visit our Shopify chatbot installation guide.

In React, Next.js, Vue or Angular, load the same script once when the app starts. The widget follows route changes on single-page sites, so you do not need to reload it per page.

React

Inject the script in a useEffect in your root component (or paste the snippet into public/index.html):

import { useEffect } from 'react';

export default function App() {
  useEffect(() => {
    if (document.getElementById('conferbot-js')) return;
    const js = document.createElement('script');
    js.id = 'conferbot-js';
    js.async = true;
    js.src = 'https://cdn.conferbot.com/dist/v1/widget.min.js';
    js.onload = () => window.ConferbotWidget('YOUR_BOT_ID', 'live_chat');
    document.body.appendChild(js);
  }, []);

  return <main>{/* your app */}</main>;
}

Next.js

Use next/script in your root layout (App Router) or _app.js (Pages Router) with a lazy strategy, so it never blocks rendering and avoids hydration issues:

import Script from 'next/script';

<Script
  id="conferbot-js"
  src="https://cdn.conferbot.com/dist/v1/widget.min.js"
  strategy="lazyOnload"
  onLoad={() => window.ConferbotWidget('YOUR_BOT_ID', 'live_chat')}
/>

Use the exact bot ID and embed type from your own Share screen.

Vue, Angular, Svelte and Others

Paste the snippet into your app's index.html, or inject it once in the root component as in the React example.

Full framework guides: React | Next.js | HTML. Building a mobile app instead? See the Android, iOS and Flutter SDKs.

Adding the chatbot is step one. Configuring it to engage the right visitors, at the right time, with the right message is where the real ROI comes from.

Widget Appearance Best Practices

Your chatbot widget should feel like a natural part of your site, not a third-party add-on:

• Colours: use your brand colour for the launcher and header, and keep text contrast at least 4.5:1 (WCAG AA).
• Avatar: a logo or bot avatar makes it clear the visitor is talking to your brand's assistant.
• Position: bottom-right is the convention visitors expect; move it only if it covers something important.
• Size: keep the launcher at least 44 by 44 pixels so it is easy to tap (the WCAG 2.2 AAA target size).

Page-Level Targeting

Different pages need different openers. In Conferbot, page rules set a different greeting and suggested questions for each URL:

Behavioral Triggers

Move beyond passive chat icons with smart triggers that engage visitors based on their behavior:

• Time on page: show the greeting after a short delay, once the visitor has had time to read
• Scroll depth: Trigger at 50% scroll on long pages - the visitor is engaged but may have questions
• Exit intent: Detect mouse moving toward the browser close button and display a retention message
• Return visitor: restore the earlier conversation so the visitor can pick up where they left off
• URL parameters: Customize greetings for visitors coming from specific campaigns (UTM tags)

Following Web Vitals best practices, ensure that proactive triggers do not shift layout or block user interactions. Configure these in the Conferbot dashboard without code, and use analytics to see which ones start conversations. If you want design rules for the window itself - dimensions, launcher position, header and input area - our chat window UI design guide covers them in detail.

Most chatbot installation issues fall into five categories. Here's how to diagnose and fix each one quickly.

Issue 1: Widget Not Appearing

Causes:

• Script blocked by ad blocker - test in incognito with extensions disabled
• Content Security Policy blocking the script domain - add the chatbot domain to your CSP script-src directive
• Caching showing old version of page - clear browser cache and server-side cache (CDN, WordPress caching plugin)
• Snippet pasted twice, or pasted partly - copy it again in full from the Share screen
• JavaScript error on page preventing script execution - check browser console (F12) for errors

Issue 2: Widget Appears But Conversations Don't Work

Causes:

• Bot ID is incorrect or bot is in draft/unpublished state - verify in your chatbot dashboard
• Monthly conversation allowance used up - check your plan limits
• Network firewall blocking WebSocket connections - common in corporate environments; check with IT

Issue 3: Widget Conflicts With Other Scripts

Causes:

• Multiple chat widgets installed (e.g., old Intercom + new chatbot) - remove the old widget code
• CSS conflicts with your theme - use the chatbot's z-index settings or custom CSS to resolve overlay issues
• JavaScript framework hydration errors (React/Next.js) - load the script with next/script or in a useEffect, as shown above

Issue 4: Slow Page Load After Adding Chatbot

Solutions:

• Ensure the script has the async or defer attribute - it should never block page rendering
• If using a WordPress optimization plugin, exclude the chatbot script from JavaScript minification and deferral
• Verify the script loads from a CDN (most platforms do this by default)
• Compare PageSpeed Insights results before and after installing to see the real effect

Issue 5: Widget Not Responsive on Mobile

Solutions:

• Use the platform's built-in mobile settings to reduce the launcher size on small screens
• Enable full-screen mode for mobile chat (better UX than a tiny floating window)
• Test on actual mobile devices, not just browser dev tools - touch targets and scrolling behavior differ
• Ensure the widget doesn't overlap your site's mobile navigation or CTA buttons

Quick Diagnostic Checklist

Run through this list if your chatbot isn't working as expected:

1. Open browser developer console (F12) - look for red errors mentioning your chatbot domain
2. Check the Network tab - is the chatbot script actually loading? (Status 200)
3. Verify your bot is published and the Bot ID matches
4. Test in a completely clean browser (incognito, no extensions)
5. Try the embed code on a simple standalone HTML page to isolate the issue

Still stuck? Our chat widget not showing guide covers more cases, or contact us.

A common concern when adding any third-party script to a website is the impact on page speed, Core Web Vitals, and ultimately search rankings. Here is how to keep a chat widget from hurting either.

Core Web Vitals: What to Check

Google's Core Web Vitals are Largest Contentful Paint (LCP), Interaction to Next Paint (INP) and Cumulative Layout Shift (CLS). A chat widget can only hurt them if it blocks rendering, competes for the main thread early, or moves content. Compare PageSpeed Insights results before and after installing. The requirements for a clean result are:

• The async attribute on the script tag (prevents render blocking)
• Floating position (bottom-right corner, absolute/fixed positioning - no CLS)
• Deferred initialization (widget loads after page content is interactive)
• CDN delivery (the widget script should load from edge servers)

When Chatbots Hurt SEO (And How to Prevent It)

Chatbots negatively impact SEO only when implemented incorrectly:

• Synchronous loading: Removing the async attribute blocks page rendering. Always load asynchronously.
• Excessive overlay: Full-screen chatbot modals that cover content on mobile can trigger Google's intrusive interstitial penalty. Keep the widget as a floating button until the user clicks.
• Layout shift: a banner-style widget that pushes content down hurts CLS. Keep it floating.
• Redirect behavior: Chatbots that redirect users away from the page (to a separate chat page) increase bounce rate and reduce time-on-page. Keep conversations within the widget overlay.

Indirect Benefits

A chatbot does not rank pages by itself. What it can do is keep visitors who had a question on your site instead of sending them back to search, and show you which questions your pages fail to answer, which is useful input for new content.

The net effect: a well-implemented chatbot should be neutral for speed and helpful for visitors. The key is proper implementation - async loading, floating positioning, and no content injection.

Web accessibility is a legal requirement in many places (the ADA in the US, the European Accessibility Act in the EU) and the WHO estimates that about 1.3 billion people, 1 in 6, live with a significant disability. A chatbot that is not accessible excludes a significant portion of your audience and creates legal liability.

Essential Accessibility Requirements

Your chatbot widget must meet these minimum standards:

1. Keyboard navigation: Users must be able to open, navigate, and close the chatbot using only keyboard inputs. Tab key moves focus between elements, Enter/Space activates buttons, and Escape closes the widget. Test by unplugging your mouse and navigating the entire chatbot flow with keyboard alone.
2. Screen reader compatibility: All interactive elements need proper ARIA labels. The chatbot launcher button needs aria-label="Open chat". Messages need role="log" with aria-live="polite" so screen readers announce new messages without interrupting the user.
3. Color contrast: Text in the chatbot must meet WCAG 2.1 AA contrast ratios - 4.5:1 for normal text, 3:1 for large text. Your brand colors may need adjustment within the chatbot if they fail contrast checks.
4. Focus management: When the chatbot opens, focus should move to the input field. When it closes, focus should return to the launcher button. Focus trapping within the open widget prevents users from accidentally tabbing into page content behind the overlay.
5. Text resizing: The chatbot must remain functional when users increase browser text size to 200%. Fixed pixel sizing that breaks at larger text sizes violates WCAG requirements.

Testing Accessibility

Run these checks before deploying your chatbot:

• Automated scan: Use axe DevTools or WAVE browser extension to scan the chatbot widget for accessibility violations.
• Keyboard test: Navigate the complete chatbot flow using only Tab, Enter, Space, and Escape keys.
• Screen reader test: Use VoiceOver (Mac), NVDA (Windows), or TalkBack (Android) to verify all elements are announced correctly.
• Zoom test: Zoom to 200% and verify the chatbot remains fully functional and readable.
• Motion sensitivity: Ensure no chatbot animations play for users who have prefers-reduced-motion enabled in their OS settings.

Accessible Chatbot Configuration Checklist

Choose a widget built for accessibility, then verify it after deployment - custom styling or theme overrides can inadvertently break accessibility compliance. Regular accessibility audits should be part of your chatbot maintenance cycle alongside content updates and performance monitoring.

Getting the chatbot on your site is the starting line, not the finish. Here's your 30-day roadmap for maximizing ROI.

Week 1: Monitor and Adjust

• Review the analytics dashboard daily for the first week
• Check which questions visitors ask most - are they covered by your bot's knowledge base?
• Monitor completion rates: if visitors start conversations but don't finish, the flow is too long or confusing
• Adjust the proactive greeting timing and message based on engagement data

Week 2: Train and Expand

• Upload additional content to the AI knowledge base based on questions the bot couldn't answer
• Add rich media elements - images, buttons, carousels - for common product questions
• Set up live chat handoff rules so complex issues reach a human seamlessly
• Connect your CRM through integrations such as HubSpot, Salesforce or Google Sheets so leads arrive automatically

Week 3: Deploy on More Channels

• Extend the same chatbot to WhatsApp and Messenger
• Add the widget to your mobile app using the Android or iOS SDK
• Set up calendar booking so high-intent visitors can schedule directly

Week 4: Measure ROI

Use the chatbot cost calculator to quantify your results:

• How many leads did the chatbot capture vs. your previous form?
• How many support tickets were deflected?
• What's the conversion rate improvement?
• How many staff hours did automated answers save?

Each weekly pass fills gaps in the bot's knowledge and tightens your greetings, so results usually improve over the first month.

For small businesses evaluating whether a chatbot is worth the effort, our chatbot for small business guide covers the full ROI case. For a comparison of available platforms, check our comparison of no-code chatbot builders. If you want to understand how chatbots impact your bottom line, our chatbot ROI calculator guide provides a framework. If you haven't built your chatbot yet, start with our guide on how to build a chatbot without coding or explore ready-made templates to deploy in minutes.