How to Add a Chatbot to Your Website (WordPress, Shopify, Wix & More)

Q: ### Will a chatbot slow down my website?

No. The embed script uses the `defer` attribute, which means it loads after your page content has finished rendering. The script itself is lightweight (typically under 50 KB). It should not have a measurable impact on your Core Web Vitals or page load speed.

73% of customers expect an instant response when they contact a business online. Not in an hour. Not in five minutes. Instantly. That expectation is only growing, and most support teams cannot staff around the clock to meet it. A chatbot can. And you can add one to your website in under 10 minutes, regardless of the platform you use.

This guide walks you through three integration methods, six platform-specific tutorials, and the customization and testing steps to get your chatbot live and working today. We use Chatsy as the primary example throughout, but the core steps apply to any chatbot platform.

Disclosure: We built Chatsy, which is used as an example in this guide.

TL;DR: 3 Ways to Add a Chatbot to Your Website

There are three integration methods, each suited to different needs:

Method	Best For	Difficulty	Time
Widget embed (script tag)	Most websites — floating chat bubble	Easy	2 minutes
iFrame embed	Inline placement within a page section	Easy	5 minutes
API integration	Custom frontends, mobile apps, advanced workflows	Intermediate	30+ minutes

Most people should start with the widget embed. It is a single line of code that adds a chat bubble to every page on your site. The other methods exist for specific use cases we cover below.

What You Need Before Starting

Before you install anything, make sure you have the following ready:

A chatbot platform account. If you do not have one yet, sign up for Chatsy or choose another provider. See our complete guide to building AI chatbots if you are starting from scratch.
Your chatbot agent ID. In Chatsy, you will find this under Settings > Embed after creating your first agent. Other platforms provide a similar identifier or embed code.
Access to your website's code or CMS. You need the ability to add custom HTML, JavaScript, or install plugins on your site. If someone else manages your site, send them this guide.
Your knowledge base content (recommended). Help articles, FAQs, product documentation, or any content you want the chatbot to reference. You can add this after installation, but having it ready speeds up the process.
5-10 minutes. That is genuinely all it takes for the widget embed method.

3 Ways to Add a Chatbot to Your Website

The widget embed is the most common method. You paste a single script tag into your site, and a chat bubble appears in the bottom-right corner of every page. Visitors click it to open a conversation.

Step 1: Log into your Chatsy dashboard and navigate to Settings > Embed.

Step 2: Copy your embed script. It looks like this:

html
<script src="https://chatsy.app/api/embed-script/YOUR_AGENT_ID" defer></script>

Replace YOUR_AGENT_ID with your actual agent ID from the dashboard.

Step 3: Paste this script into your website's HTML, just before the closing </body> tag. Alternatively, add it inside the <head> section. The defer attribute ensures the script loads without blocking your page.

Step 4: Save and publish your changes. Visit your site, and you should see the chat widget in the bottom-right corner.

That is it. The widget handles everything: the chat interface, message history, typing indicators, and mobile responsiveness. You configure the appearance and behavior from your Chatsy dashboard without touching code again.

Method 2: iFrame Embed

Use an iFrame when you want the chatbot embedded inline on a specific page rather than as a floating bubble. This is useful for dedicated support pages, help centers, or landing pages where you want the chat interface to be a visible part of the page layout.

html
<iframe
  src="https://chatsy.app/chatbot-iframe/YOUR_AGENT_ID"
  width="100%"
  height="600"
  style="border: none; border-radius: 12px;"
  title="Chat with us"
></iframe>

You can adjust the width and height to fit your page layout. Place the iFrame inside any container element on your page. It works on all platforms that allow custom HTML.

One trade-off: the iFrame method does not follow visitors across pages the way the widget does. It only appears where you place it. For most businesses, the widget embed is the better default.

Method 3: API Integration

The API method is for developers building custom chat interfaces, mobile apps, or complex workflows where the standard widget does not fit. Instead of using a pre-built UI, you send and receive messages programmatically through the Chatsy API.

This method requires writing code. You make HTTP requests to the API endpoint, handle responses, and build your own chat interface. It gives you full control over the user experience but requires significantly more effort than the other two methods.

The API approach is ideal when you need to:

Build a chat interface inside a native mobile app (iOS or Android)
Integrate chatbot responses into an existing application or internal tool
Create custom workflows that combine chatbot responses with other business logic
Build a completely branded experience with no third-party UI elements
Connect the chatbot to backend systems like order databases or CRMs in real time

A basic API integration involves sending a POST request with the user's message and receiving the chatbot's response as JSON. You then render that response in whatever UI you have built. Most platforms provide SDKs or client libraries to simplify this process.

For most websites, start with the widget embed. You can always migrate to the API later if your needs outgrow the standard widget.

Adding a Chatbot to WordPress

WordPress powers over 40% of the web, so this is where most people start. You have two options: install a plugin or add the embed code manually.

Option A: Plugin Install

Log into your WordPress admin dashboard.
Go to Plugins > Add New.
Search for your chatbot platform's plugin (for example, "Chatsy" or the name of your provider).
Click Install Now, then Activate.
Navigate to the plugin's settings page. Enter your agent ID or API key.
Save your settings. The widget will now appear on your site.

Using a plugin is the fastest method and does not require any coding. The plugin handles script loading, and most provide a settings page where you can configure the widget without leaving WordPress.

For a detailed walkthrough, see our WordPress integration guide.

Option B: Manual Embed

If there is no plugin available, or you prefer manual control:

Go to Appearance > Theme Editor in your WordPress admin (or use the Theme File Editor under Tools in newer versions).
Open the footer.php file for your active theme.
Paste the embed script just before the closing </body> tag:

html
<script src="https://chatsy.app/api/embed-script/YOUR_AGENT_ID" defer></script>

Click Update File.

Alternatively, if you are using a block theme or the Full Site Editor, add a Custom HTML block to your site's footer template and paste the script there.

Important: If you update or switch your WordPress theme, you may need to re-add the script. Consider using a plugin like Insert Headers and Footers to make your code persistent across theme changes.

Adding a Chatbot to Shopify

Shopify stores benefit enormously from chatbots. They handle product questions, order status inquiries, and shipping questions around the clock, which directly impacts conversion rates.

Option A: Shopify App Store

Visit the Shopify App Store and search for your chatbot platform.
Click Add app and authorize the installation.
Follow the app's setup wizard to connect your chatbot agent.
The widget will appear on your storefront automatically.

App Store installations are managed through Shopify's admin panel, making updates and removal straightforward.

Option B: Manual Embed in theme.liquid

If your chatbot platform is not listed in the Shopify App Store, add the code manually:

In your Shopify admin, go to Online Store > Themes.
Click the three-dot menu next to your active theme, then select Edit code.
In the left sidebar, open the Layout folder and click on theme.liquid.
Scroll to the bottom of the file. Find the closing </body> tag.
Paste the embed script directly above </body>:

html
<script src="https://chatsy.app/api/embed-script/YOUR_AGENT_ID" defer></script>

Click Save.

The chatbot will now appear on every page of your Shopify store. If you use a headless Shopify setup (Hydrogen or a custom storefront), treat it as a custom site and follow the instructions in the Custom HTML/React/Next.js section below.

For more details, see our Shopify integration guide.

Adding a Chatbot to Wix

Wix does not allow direct HTML editing in the traditional sense, but it provides a custom code feature that works for chatbot embeds.

Steps

Log into your Wix dashboard.
Go to Settings in the left sidebar.
Click Custom Code under the Advanced section. (If you do not see this option, you may need a Wix Premium plan.)
Click + Add Custom Code.
Paste the embed script:

html
<script src="https://chatsy.app/api/embed-script/YOUR_AGENT_ID" defer></script>

Under Place Code in, select Body - end.
Under Add Code to Pages, select All pages (or choose specific pages if you prefer).
Click Apply.

The chatbot widget will appear on your Wix site after a few moments. You may need to publish your site or clear the Wix cache before the changes are visible to visitors.

One thing to be aware of: Wix's editor preview does not always render custom scripts. If you do not see the widget in the editor, check your published live site instead.

For additional guidance, see our Wix integration guide.

Adding a Chatbot to Squarespace

Squarespace has a built-in code injection feature that makes adding a chatbot straightforward.

Steps

In your Squarespace dashboard, go to Settings.
Click Advanced in the left sidebar, then select Code Injection.
In the Footer field, paste the embed script:

html
<script src="https://chatsy.app/api/embed-script/YOUR_AGENT_ID" defer></script>

Click Save.

The chatbot widget will now appear on every page of your Squarespace site.

If you want the chatbot to appear only on specific pages instead of site-wide, use a Code Block within the page editor:

Edit the page where you want the chatbot.
Add a Code Block (Insert Point > Code).
Paste the embed script and disable the Display Source toggle.
Save the page.

Keep in mind that Squarespace's code injection is available on Business and Commerce plans. If you are on a Personal plan, you will need to upgrade to use this feature.

For the full walkthrough, see our Squarespace integration guide.

Adding a Chatbot to Webflow

Webflow gives you fine-grained control over custom code, making chatbot installation clean and simple.

Steps

Open your project in the Webflow Designer.
Go to Project Settings (gear icon in the left panel).
Click the Custom Code tab.
In the Footer Code section (before </body> tag), paste the embed script:

html
<script src="https://chatsy.app/api/embed-script/YOUR_AGENT_ID" defer></script>

Click Save Changes.
Publish your site for the changes to go live.

The widget will appear on every page of your Webflow site after publishing. Custom code in Webflow only runs on the published site, not in the Designer preview, so you will need to publish and check the live URL to confirm the widget is working.

If you want the chatbot on specific pages only, use Webflow's page-level custom code instead:

Select the page in the Pages panel.
Click the gear icon next to the page name.
Scroll to Custom Code and add the script in the Before </body> tag field.
Publish.

For complete instructions, see our Webflow integration guide.

Adding a Chatbot to Custom HTML, React, or Next.js Sites

If you manage your own code, you have the most flexibility. Here is how to add a chatbot to each type of custom site.

Plain HTML

Add the script tag to your HTML file, just before the closing </body> tag:

html
<!DOCTYPE html>
<html>
<head>
  <title>Your Website</title>
</head>
<body>
  <!-- Your page content -->

  <script src="https://chatsy.app/api/embed-script/YOUR_AGENT_ID" defer></script>
</body>
</html>

That is all. The script loads asynchronously and does not affect your page load speed.

React (Create React App, Vite, etc.)

Add the script tag to your public/index.html file, the same way you would with plain HTML. Alternatively, load it dynamically in your root component:

jsx
import { useEffect } from 'react';

function App() {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://chatsy.app/api/embed-script/YOUR_AGENT_ID';
    script.defer = true;
    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    };
  }, []);

  return <div>{/* Your app */}</div>;
}

Next.js

In Next.js, use the built-in next/script component. Add it to your root layout file (app/layout.tsx or pages/_app.tsx):

tsx
import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Script
          src="https://chatsy.app/api/embed-script/YOUR_AGENT_ID"
          strategy="lazyOnload"
        />
      </body>
    </html>
  );
}

The lazyOnload strategy ensures the chatbot script loads after the page is fully interactive, keeping your Core Web Vitals scores intact.

Customizing Your Chatbot

Once the chatbot is installed, customize it so it fits your brand and actually helps visitors. Most customization is done from your chatbot platform's dashboard, not in code.

Colors and Branding

Match the chat widget to your site's color scheme. In Chatsy, go to Settings > Appearance to set your primary color, text color, and background. A widget that looks like it belongs on your site builds more trust than a generic one.

Greeting Message

The first message visitors see matters. Avoid generic greetings like "Hello! How can I help you?" Instead, be specific: "Hi there. Ask me anything about our pricing, features, or how to get started." A clear greeting sets expectations and encourages engagement.

The default bottom-right position works for most sites. If your site has a floating action button or other element in that corner, move the chatbot to the bottom-left. Make sure it does not overlap with cookie banners, back-to-top buttons, or other fixed elements.

Language

If your audience is multilingual, configure the chatbot to detect the visitor's browser language and respond accordingly. Chatsy supports automatic language detection for over 50 languages. Set the default language in your dashboard under Settings > General.

Operating Hours and Fallback

If you have live agents, configure the chatbot to show availability status. When agents are offline, the chatbot should let visitors know and offer to collect their email for follow-up. This prevents frustration from unanswered live chat requests.

Common Mistakes to Avoid

After helping thousands of businesses install chatbots, these are the five mistakes we see most often. Avoid them to save yourself time and frustration.

1. Launching Without Training the AI

Adding a chatbot that cannot answer your customers' questions is worse than having no chatbot at all. Visitors will try it once, get a useless response, and never trust it again. Before going live, upload your help articles, FAQs, and product documentation. Test the 20 most common questions your support team receives. If the chatbot cannot answer them accurately, keep training before you launch. A well-trained chatbot that handles 80% of questions correctly on day one will build trust. One that guesses wrong will lose it permanently. See our guide on common chatbot mistakes for more on this.

2. Hiding the Chatbot

Some businesses make the widget tiny, transparent, or tucked away in a submenu. If customers cannot find it, they will not use it. Keep the widget visible in a standard position (bottom-right or bottom-left corner). Use a contrasting color so it stands out from your background.

3. Not Setting Up Human Handoff

AI chatbots are good, but they are not perfect. Some questions require a human -- complex billing disputes, sensitive account issues, or situations where the customer is upset and needs empathy that AI cannot deliver. If your chatbot has no escalation path, frustrated customers will leave your site instead of getting help. Configure handoff rules so conversations route to a live agent when the chatbot is unsure, when the customer explicitly asks for a human, or when the topic involves billing, refunds, or account security. A smooth handoff preserves the conversation context so the customer does not have to repeat themselves.

4. Forgetting Mobile

Over half of web traffic is mobile, and for e-commerce sites that number is often closer to 70%. Test your chatbot on an actual phone, not just a browser's responsive mode. Make sure the widget does not cover critical page elements like "Add to Cart" buttons or navigation menus. Verify the chat window is usable on small screens, that text is readable without zooming, and that the close button is easy to tap. Most modern chatbot widgets are responsive by default, but always verify on both iOS and Android devices before going live.

5. Adding the Script Multiple Times

If you install the chatbot via a plugin and also paste the embed code manually, you will get duplicate widgets. This causes visual glitches, double messages, and a poor experience. Pick one installation method and stick with it.

Testing Your Chatbot

Before announcing your chatbot to the world, run through this checklist:

Functionality:

Widget loads on desktop browsers (Chrome, Firefox, Safari, Edge)
Widget loads on mobile devices (iOS Safari, Android Chrome)
Opening and closing the chat window works smoothly
Messages send and receive correctly
The chatbot responds with accurate, relevant answers
Human handoff triggers when it should

Appearance:

Widget colors match your brand
The greeting message displays correctly
The widget does not overlap with other page elements
The chat window is readable on mobile screens
The widget position is consistent across pages

Performance:

Your site's load time is not noticeably affected
The widget loads within a few seconds of page load
No JavaScript errors in the browser console related to the chatbot

Edge Cases:

Chatbot handles gibberish or off-topic messages gracefully
Long messages do not break the chat layout
Refreshing the page preserves the conversation (if your platform supports it)
The chatbot works correctly behind a VPN or in incognito mode

If everything checks out, you are ready to go live.

Frequently Asked Questions

Will a chatbot slow down my website?

No. The embed script uses the defer attribute, which means it loads after your page content has finished rendering. The script itself is lightweight (typically under 50 KB). It should not have a measurable impact on your Core Web Vitals or page load speed.

Can I add a chatbot to multiple websites with one account?

Yes. Most chatbot platforms, including Chatsy, let you create multiple agents under a single account. Each agent gets its own embed code and can be trained on different content. This is useful if you run several brands or properties.

Do I need coding skills to install a chatbot?

Not for the widget embed method. If you can copy and paste a line of code into your website's settings, you can install a chatbot. The platform-specific sections above provide step-by-step instructions for each CMS. For the API integration method, you will need development experience.

How do I remove the chatbot if I change my mind?

Remove the embed script from wherever you placed it: your theme file, code injection settings, or plugin. If you installed through a plugin, deactivating and deleting the plugin will remove the chatbot. The removal takes effect immediately once you save and publish.

Can the chatbot collect leads and emails?

Yes. Most chatbot platforms let you configure the chatbot to ask for a visitor's name and email before or during the conversation. In Chatsy, you can set this up under Settings > Lead Capture. Collected information syncs to your dashboard and can be exported or pushed to your CRM via integrations.

Next Steps

You now have a chatbot running on your website. Here is what to do next:

Train it thoroughly. Upload your entire knowledge base and test every common question. The more content you feed it, the more accurate its responses will be.
Monitor conversations. Review chat transcripts in your dashboard during the first week. Look for questions the chatbot struggles with and add training data to fill the gaps.
Track metrics. Measure resolution rate, customer satisfaction, and handoff rate. These numbers tell you whether the chatbot is helping or frustrating visitors. See our guide on chatbot metrics to track for details.
Iterate. A chatbot is not a set-and-forget tool. Update its training data as your product evolves, your FAQs change, and customer questions shift.

If you have not created your chatbot yet, start with Chatsy for free. You can have a trained, customized chatbot live on your site in under 10 minutes.

TL;DR: 3 Ways to Add a Chatbot to Your Website

What You Need Before Starting

3 Ways to Add a Chatbot to Your Website

Method 1: Widget Embed (Recommended)

Method 2: iFrame Embed

Method 3: API Integration

Adding a Chatbot to WordPress

Option A: Plugin Install

Option B: Manual Embed

Adding a Chatbot to Shopify

Option A: Shopify App Store

Option B: Manual Embed in theme.liquid

Adding a Chatbot to Wix

Steps

Adding a Chatbot to Squarespace

Steps

Adding a Chatbot to Webflow

Steps

Adding a Chatbot to Custom HTML, React, or Next.js Sites

Plain HTML

React (Create React App, Vite, etc.)

Next.js

Customizing Your Chatbot

Colors and Branding

Greeting Message

Widget Position

Language

Operating Hours and Fallback

Common Mistakes to Avoid

1. Launching Without Training the AI

2. Hiding the Chatbot

3. Not Setting Up Human Handoff

4. Forgetting Mobile

5. Adding the Script Multiple Times

Testing Your Chatbot

Frequently Asked Questions

Will a chatbot slow down my website?

Can I add a chatbot to multiple websites with one account?

Do I need coding skills to install a chatbot?

How do I remove the chatbot if I change my mind?

Can the chatbot collect leads and emails?

Next Steps

Related Articles

Related Articles

Building Custom Chatbot Integrations with Webhooks & APIs

How to Add Live Chat to Your Website in 2026 (Step-by-Step)

How to Create a Knowledge Base That Actually Reduces Tickets

Ready to try Chatsy?