BlogHow-To
How-To5 min readMarch 14, 2025

How to Embed an AI Chat Widget on Any Website

Step-by-step guide to embedding an AI chat widget on your website — whether you're on Shopify, WordPress, Webflow, or custom HTML. Takes under 5 minutes.

Adding an AI chat widget to your website used to mean months of development, a dedicated ML team, and a significant infrastructure budget. Today, you can embed a fully functional AI product knowledge bot in under five minutes — and it will be live, trained on your content, and answering real customer questions the same day.

What You Need Before You Start

The prerequisites are minimal. You need access to your website's HTML (either directly or through a CMS or e-commerce platform's theme/code editor), and you need the knowledge content you want the bot to use — your FAQs, product pages, or documentation. That's it. No developers, no hosting setup, no API keys to manage.

Step 1: Create Your Bot and Upload Your Knowledge

Sign up at Questme.ai and create your first bot. Give it a name and choose an accent colour to match your brand. Then add your knowledge sources — you can crawl a URL (your FAQ page, product pages, or help centre), upload PDF files, paste text content, or add Q&A pairs manually. The more knowledge you add, the more questions your bot can answer accurately.

Step 2: Copy Your Embed Code

In the Embed & Share tab of your bot dashboard, you'll find a single line of JavaScript. It looks like this:

<script src="https://questme.ai/widget.js" data-bot-id="your-bot-id"></script>

Copy this line. This is all you need to add to your website. The widget loads asynchronously, so it doesn't affect your page speed.

Step 3: Add the Code to Your Website

Paste the script tag before the closing </body> tag of your website's HTML. The method depends on your platform:

  • Shopify: Go to Online Store → Themes → Edit Code → theme.liquid, paste before </body>
  • WordPress: Use a plugin like "Insert Headers and Footers" or paste in your theme's footer.php
  • Webflow: Go to Project Settings → Custom Code → Footer Code, paste the script
  • Squarespace: Settings → Advanced → Code Injection → Footer, paste the script
  • Wix: Add a Custom Code element from the Wix Add-ons panel
  • Custom HTML: Paste directly before the closing </body> tag in your HTML file
  • React/Next.js: Add using next/script or a Script component in your layout

Step 4: Test It

Visit your website and you'll see the chat widget appear in the corner. Click it, ask a question that your knowledge base covers, and verify the bot gives an accurate answer. If something's missing, go back to your dashboard and add more knowledge sources — it updates in real time.

Tips for Placing Your Widget Effectively

  • Put it on product pages — that's where shoppers have the most questions
  • Add it to your checkout page to reduce cart abandonment from unanswered questions
  • Place it on your support or contact page as a first-line responder
  • On high-traffic blog posts, use it to answer questions about related products
  • Consider showing a welcome message to prompt engagement

Alternative: Share a Direct Link

If you don't have a website yet, or want to share your bot on social media, in emails, or via WhatsApp, Questme.ai also gives you a shareable link — a dedicated chat page that lives at questme.ai/chat/your-bot-id. Share it anywhere, and customers can start chatting immediately.

Frequently Asked Questions

Will the widget slow down my website?

No. The widget script is loaded asynchronously, meaning it doesn't block your page from rendering. It has no measurable impact on Core Web Vitals or page load time.

Can I customise the widget's appearance?

Yes. In the bot settings, you can set the accent colour, welcome message, and bot name. The widget adapts to your brand rather than imposing a generic look.

Can I embed the bot on multiple pages or domains?

Yes. The same embed code works across as many pages and domains as you need. There's no per-page or per-domain restriction.

Q

Try Questme.ai Free

Upload your product docs and get an AI chat widget answering customer questions in under 30 minutes.

Start Free Today →

More from the blog

Conversion

How to Turn Website Visitors into Leads Using AI Chatbots

Read →
Strategy

AI Chatbots vs Human Support: Cost and Efficiency Breakdown

Read →
Guides

How AI Can Answer Customer Questions Using Your Own Product Data

Read →