Adding a chatbot to your website sounds technical, but with a modern AI chatbot it’s closer to adding a YouTube video. If you can copy and paste, you can have a working chat widget live in under 10 minutes. Here’s how.
Before You Start: What You Need
You’ll need three things:
- Access to your website’s admin area or theme settings
- A chatbot account, such as a free Chattbott plan
- A few help articles or FAQs for the bot to learn from
If you haven’t set up the bot itself yet, follow our guide on how to build an AI chatbot without coding first. It takes about the same amount of time.
Step 1: Train Your Chatbot (3 Minutes)
Inside your chatbot dashboard, add your website URL or upload a few documents. The AI reads them and learns how to answer customer questions. Ask it two or three test questions to make sure the answers look right.
Step 2: Customise the Chat Widget (2 Minutes)
Pick colours that match your brand, upload a logo or avatar and write a short greeting. Something like “Hi! Ask me anything about orders, shipping or returns” works better than a generic “How can I help?” because it tells visitors what the bot is good at.
Chattbott’s smart widget also lets you choose where the launcher button sits and which pages it appears on.
Step 3: Copy Your Embed Code (1 Minute)
Your dashboard will give you a short script tag. Copy it. This one snippet loads the chat widget on any page where it’s placed.
Step 4: Add the Chatbot to Your Website (3 Minutes)
The exact steps depend on your platform.
Add a Chatbot to WordPress
Install a header and footer code plugin, or open your theme’s settings. Paste the snippet into the footer section and save. The widget appears on every page.
Add a Chatbot to Shopify
In your Shopify admin, open Online Store → Themes → Edit code. Find theme.liquid, paste the snippet just before the closing body tag and save.
Add a Chatbot to Webflow
Open Site settings → Custom code, paste the snippet into the footer code box and publish your site.
Add a Chatbot to a Custom Website
Paste the snippet just before the closing body tag in your main template or layout file, then deploy as usual.
Step 5: Test It Live (1 Minute)
Open your site in a private browser window and on your phone. Check that the widget loads, the greeting looks right and the bot answers a couple of real questions.
Where to Place Your Website Chatbot
Site-wide is fine, but some pages matter more than others:
- Pricing pages, where visitors have buying questions
- Help and contact pages, where people already want answers
- Checkout or sign-up pages, where a quick reply can save a sale
Free or Paid Widget?
Free plans are great for testing, but they often limit conversations or add branding. Our guide to free vs. paid AI chatbots explains the trade-offs so you can choose with confidence.
Avoid These Setup Mistakes
The most common problems we see are bots launched with no content, greetings that pop up too aggressively and no clear way to reach a human. Read common AI chatbot mistakes before you go live.
Website Chatbot FAQs
Will a chatbot slow down my website?
A well-built widget loads after the main page content, so visitors shouldn’t notice any delay. Test your page speed before and after to be sure.
Can I show the chatbot on some pages only?
Yes. Most platforms let you choose which pages show the widget, which is useful for keeping it off checkout or legal pages.
Your Chatbot Can Be Live Today
Train, customise, paste and test. That’s the whole process. Create a free Chattbott account and add an AI chatbot to your website before your coffee goes cold.
