How to Add Your Chatbot to Any Website

What You Will Learn

In this tutorial, you will learn how to embed your chatbot on a website. You will get the embed code, add it to a site, and test that it works.

Before you start: Have your chatbot built and tested in the platform. Have access to the website where you want to add it (or use a test page).

Before You Start

You need a trained chatbot you have already built. You also need access to a website where you can paste a small piece of code.

WordPress, Squarespace, Webflow, and Wix all work. If you do not have a website yet, you can follow along and return to this step later.

Why Website Embedding Matters

Most clients want the chatbot on their website. Visitors see it in the corner of the page. They click, type a question, and get an answer. No redirect, no app download. It feels like part of the site.

Step 1: Get the Embed Code

In your chatbot platform, look for "Embed," "Install," or "Website integration." The platform will give you a snippet of code. It usually looks like this:

<script>
  (function() {
    var s = document.createElement('script');
    s.src = 'https://your-platform.com/widget.js';
    s.setAttribute('data-bot-id', 'YOUR_BOT_ID');
    document.body.appendChild(s);
  })();
</script>

Copy the full snippet. Do not change it unless the platform instructs you to.

Step 2: Add the Code to the Website

If you use WordPress:

• Install a plugin like "Insert Headers and Footers" or "Code Snippets"
• Paste the code in the footer section
• Save and refresh the site

If you use a website builder (Wix, Squarespace, Webflow):

• Find the "Custom code" or "Embed" section
• Paste the code where it says to add before </body>
• Save and publish

If you use a custom site:

• Add the script before the closing </body> tag in your HTML
• Or add it via your CMS or hosting panel

Step 3: Customize the Widget Appearance

Most platforms let you change:

• Position (bottom right, bottom left)
• Colors (to match the brand)
• Welcome message
• Logo or icon

Match the client's brand. A mismatched widget looks unprofessional.

Step 4: Test on Multiple Devices

Check the chatbot on:

• Desktop (Chrome, Safari, Firefox)
• Mobile (phone and tablet)
• Different pages

Make sure it loads, opens, and answers correctly everywhere.

Real Example: Local Gym

A gym adds a chatbot to their website. The bot answers:

• Class schedules
• Membership pricing
• How to sign up
• Location and parking

The widget is in the bottom right. It uses the gym's brand colors. On mobile, it expands to full screen when opened. The gym owner gets a notification when someone asks for a callback.

Common Mistakes to Avoid

• Do not add the embed code in the wrong place. It must run on every page where you want the chatbot. Footer or global scripts are usually correct.
• Do not forget to test after adding. Some themes or plugins conflict with chatbot scripts. Test before you tell the client it is live.
• Do not ignore mobile. Many users will open the chatbot on their phone. Make sure it works there.
• Do not leave default branding if the client paid for a custom bot. Switch to white-label or custom colors if the platform allows.

Next Step

Your chatbot is now live on a website. In the next step, you will explore the best AI tools for building a website with AI. You will use one to create a simple landing page to showcase your chatbot service. After that, you will learn how to monetize your chatbot business.