How to Add a Chatbot to Your Website in 5 Minutes

Embedding your AI chatbot is a single line of code — whether you're on WordPress, Webflow, Shopify, or a custom React app. Here's exactly how.

Jeetendra KumarPublished Jan 21, 2026 Updated Aug 31, 20262 min read

How to Add a Chatbot to Your Website in 5 Minutes

The most common question we get after "how do I build a chatbot?" is "how do I put it on my website?". The answer is delightfully simple: one script tag. But the exact steps vary slightly by platform — so we've covered all the popular ones here.

Finding Your Embed Script

Before anything, get your unique embed script from your agent: Agent → Deploy → Chat Widget. It looks like this:

<script>
  window.aiChatConfig = {
    chatbotId: "YOUR_AGENT_SLUG"
  };
</script>
<script
  src="https://www.aichatvault.com/widget.js"
  chatbotId="YOUR_AGENT_SLUG"
  domain="https://www.aichatvault.com"
  defer
></script>

WordPress

The easiest no-plugin method: install the free Insert Headers and Footers plugin, go to Settings → Insert Headers and Footers, paste your script in the Footer section, and save. The chatbot appears on every page immediately.

Webflow

Open your Webflow project → Site Settings → Custom Code → paste the script in the Footer Code section → publish. Done.

Shopify

From your Shopify admin, go to Online Store → Themes → Edit Code → layout/theme.liquid and paste the script just before </body>.

For Shopify stores, we also recommend uploading your product catalogue to the knowledge base so the bot can handle order tracking, product questions, and return queries.

React / Next.js

In your root layout (app/layout.tsx or _app.tsx):

import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Script id="aichatvault-config">
          {`window.aiChatConfig = { chatbotId: "YOUR_AGENT_SLUG" };`}
        </Script>
        <Script
          src="https://www.aichatvault.com/widget.js"
          chatbotId="YOUR_AGENT_SLUG"
          domain="https://www.aichatvault.com"
          strategy="lazyOnload"
        />
      </body>
    </html>
  );
}

Customising the Widget

All visual customisation is done from the Deploy → Widget Settings tab — no code changes needed: brand colour, button icon, position, greeting message, and page-level show/hide rules.

#embed#website#widget#WordPress#Shopify

Written by

Jeetendra Kumar

Founder, Developer, Website Manager

Jeetendra Kumar is the Founder and CEO of AIChatVault, an AI-powered customer engagement platform that helps businesses automate customer support, capture leads, and engage website visitors through intelligent AI assistants. He leads the platform's product development, technology strategy, and innovation initiatives, focusing on making advanced AI solutions accessible to businesses of all sizes. With over 18 years of experience in software development and digital technologies, Jeetendra specialises in web application development, SaaS platforms, business automation, artificial intelligence integration, and customer relationship management systems. Throughout his career, he has successfully delivered solutions across industries including real estate, education, e-commerce, healthcare, and professional services. As the founder of AIChatVault, Jeetendra is focused on helping organisations improve customer experiences through AI-driven automation. Under his leadership, AIChatVault has been developed to provide businesses with intelligent chatbots, automated lead qualification, appointment scheduling, customer support automation, and conversational AI solutions that operate around the clock. Recognising the rapid evolution of search and AI technologies, Jeetendra actively works with emerging technologies including Artificial Intelligence, Large Language Models (LLMs), Answer Engine Optimisation (AEO), Generative Engine Optimisation (GEO), and AI-powered search experiences. His vision is to help businesses not only automate conversations but also increase their visibility within modern AI-driven discovery platforms. Alongside AIChatVault, Jeetendra has extensive experience in building scalable SaaS products, CRM systems, lead management platforms, and enterprise business applications. His technical expertise spans PHP, Laravel, WordPress, React, Vue.js, mobile applications, cloud infrastructure, and AI integrations. Through AIChatVault, Jeetendra is committed to empowering businesses with practical AI solutions that improve productivity, enhance customer engagement, and drive sustainable growth in an increasingly digital world.