Add an AI Chatbot to Your Website in 5 Min

Adding an AI chatbot to your website used to require a developer, a few thousand dollars, and weeks of back-and-forth. In 2026, you can do it yourself in about five minutes — no coding experience required.

This guide walks you through the entire process: creating your chatbot, configuring its behavior, customizing how it looks, and embedding it on your website. We cover plain HTML sites, WordPress, Shopify, React, and Next.js. By the end, you'll have a working AI chatbot live on your site, answering visitor questions in real time.

Let's get into it.

Table of Contents

• What You'll Need
• Step 1: Create Your LoopReply Account
• Step 2: Create Your First Bot
• Step 3: Build Your Conversation Flow
• Step 4: Customize Your Widget
• Step 5: Install the Chat Widget
  • Plain HTML / Static Sites
  • WordPress
  • Shopify
  • React / Next.js
• Step 6: Test Your Chatbot
• Troubleshooting Common Issues
• Frequently Asked Questions
• Next Steps

What You'll Need

Before starting, here's what you need:

• A LoopReply account — The free tier works perfectly for this tutorial. No credit card required.
• Access to your website's code or CMS — You'll need to paste a small script tag. If you use WordPress or Shopify, you can do this through the admin panel without touching code directly.
• 5-10 minutes — Account creation takes about a minute. Building a basic flow takes another couple of minutes. Installation is a single copy-paste.

That's it. No API keys to configure, no servers to provision, no dependencies to install.

Step 1: Create Your LoopReply Account

Head to LoopReply and sign up. You can use your email or sign in with Google. The free tier includes:

• 1 bot
• 1,000 messages per month
• Full access to the visual workflow builder
• Knowledge base with RAG
• Widget customization

Once you've signed up, you'll land on the dashboard. This is your home base — you'll see your bots, conversations, and analytics here.

Step 2: Create Your First Bot

Click Create Bot from the dashboard. You'll be asked to:

1. Name your bot — Something descriptive like "Website Support Bot" or "Sales Assistant." This name is internal only; your visitors won't see it unless you choose to display it.
2. Choose your AI model — LoopReply supports multiple models including GPT-5, Claude Opus 4.6, Gemini 3 Pro, Llama 4, Mistral, and DeepSeek. For most use cases, GPT-5 or Claude Opus 4.6 are excellent starting points. You can always change this later.
3. Set the system prompt — This tells the AI how to behave. For a general website chatbot, something like: "You are a helpful assistant for [Your Company]. Answer questions about our products and services. Be friendly, concise, and professional. If you don't know the answer, suggest the visitor contact our support team."

Click Create and you'll be taken to the bot's settings page.

Step 3: Build Your Conversation Flow

Navigate to the Workflow tab in your bot's settings. This opens the visual workflow builder — a drag-and-drop canvas where you design how your chatbot handles conversations.

For a basic website chatbot, you need just a few nodes:

1. Trigger Node — This is already on the canvas. It fires when a visitor starts a conversation.
2. Message Node — Drag one from the node palette and connect it to the Trigger. Set a welcome message like: "Hi there! How can I help you today?"
3. AI Response Node — Connect this after the Message node. This is where the AI takes over and responds to whatever the visitor asks, using the model and system prompt you configured.

That's a working chatbot in three nodes. The visitor gets a welcome message, then the AI handles the rest.

Want something more sophisticated? You can add:

• Knowledge Search nodes to ground responses in your documentation (see our guide on training your chatbot on custom data)
• Intent Router nodes to detect what the visitor wants and route them accordingly
• Human Handover nodes for when the AI can't handle a question (see our human handover setup guide)
• Collect Input nodes to gather information like email addresses or order numbers

For now, the three-node setup will get you live. You can refine the flow later.

Step 4: Customize Your Widget

Head to the Appearance tab. This is where you make the chat widget match your brand:

• Primary color — Set this to your brand color. The widget button, header, and accent elements will use it.
• Bot name — The name displayed in the chat header. This is what visitors see.
• Welcome message — The text that appears when the widget opens before any conversation starts.
• Bot avatar — Upload your logo or a custom avatar image.
• Widget position — Bottom-right (default) or bottom-left.
• Initial state — Start with the widget open or collapsed to just the button.

The preview updates in real time as you make changes, so you can see exactly how it will look on your site.

Step 5: Install the Chat Widget

This is the part where your chatbot goes live. Click the Install tab in your bot's settings. You'll see a code snippet that looks like this:

Plain HTML / Static Sites

For any standard HTML website, paste this snippet just before the closing </body> tag on every page where you want the chatbot to appear:

<script
  src="https://widget.loopreply.com/embed.js"
  data-agent-id="YOUR_BOT_ID"
  defer
></script>

Replace YOUR_BOT_ID with the actual ID shown in your Install tab (it's pre-filled when you copy the snippet). That's it — one script tag and your chatbot is live.

If you want the widget on every page, add it to your site's shared layout, header, or footer template.

WordPress

You have two options for WordPress:

Option A: Using a plugin (recommended for beginners)

1. Install a plugin like Insert Headers and Footers (by WPCode) from the WordPress plugin directory.
2. Go to Settings → Insert Headers and Footers in your WordPress admin.
3. Paste the embed snippet into the Footer Scripts section.
4. Click Save.

Option B: Editing your theme directly

1. In your WordPress admin, go to Appearance → Theme Editor.
2. Open footer.php (or your theme's equivalent footer template).
3. Paste the embed snippet just before </body>.
4. Click Update File.

If you're using a page builder like Elementor or Divi, look for a "Custom Code" or "HTML" widget and paste the snippet there instead.

For more on WordPress chatbot options, check our guide on the best AI chatbots for WordPress.

Shopify

1. In your Shopify admin, go to Online Store → Themes.
2. Click Actions → Edit code on your active theme.
3. Under Layout, open theme.liquid.
4. Paste the embed snippet just before the closing </body> tag.
5. Click Save.

The chatbot will now appear on every page of your store. If you're evaluating chatbot options for your Shopify store, see our comparison of the best AI chatbots for Shopify.

React / Next.js

For React and Next.js applications, you can load the widget using a useEffect hook or by adding the script to your root layout.

React (Vite, Create React App, etc.):

Add this to your App.tsx or root component:

import { useEffect } from 'react';
 
function App() {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://widget.loopreply.com/embed.js';
    script.setAttribute('data-agent-id', 'YOUR_BOT_ID');
    script.defer = true;
    document.body.appendChild(script);
 
    return () => {
      document.body.removeChild(script);
    };
  }, []);
 
  return (
    // your app content
  );
}

Next.js (App Router):

Add the script to your root layout (app/layout.tsx):

import Script from 'next/script';
 
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://widget.loopreply.com/embed.js"
          data-agent-id="YOUR_BOT_ID"
          strategy="lazyOnload"
        />
      </body>
    </html>
  );
}

The lazyOnload strategy ensures the widget doesn't block your page's initial load performance.

Step 6: Test Your Chatbot

After installing the snippet, visit your website and look for the chat widget in the bottom corner. Click it and try a few things:

1. Send a greeting — Make sure the welcome message appears correctly.
2. Ask a question — Verify the AI responds appropriately based on your system prompt.
3. Test edge cases — Ask something the bot shouldn't know. Does it handle it gracefully?
4. Check on mobile — The widget should be responsive and work well on phones and tablets.
5. Try different pages — Make sure the widget appears on all the pages you intended.

Back in your LoopReply dashboard, go to Conversations to see the test conversations appear in real time. This is where you'll monitor all visitor interactions once you're live.

Troubleshooting Common Issues

The widget doesn't appear

• Check the script placement. Make sure the snippet is inside the <body> tag, not the <head>. Placing it just before </body> is the safest option.
• Verify your bot ID. Copy the snippet directly from the Install tab to ensure the data-agent-id value is correct.
• Check for JavaScript errors. Open your browser's developer console (F12 → Console tab) and look for any errors related to the widget script.
• Ad blockers. Some aggressive ad blockers may block third-party scripts. Test in an incognito window with extensions disabled.
• Caching. If you're using a CDN or caching plugin (common with WordPress), clear the cache after adding the snippet.

The bot responds slowly

• Model selection matters. Larger models like o3-pro are more capable but slower. For fast responses, GPT-5 or Claude Opus 4.6 strike the best balance of speed and quality.
• Knowledge base size. If you've uploaded a large knowledge base, the initial indexing may take time. Check the Knowledge Base tab to see if indexing is complete.
• Network conditions. The widget communicates with LoopReply's servers in real time. Slow responses on your end may be due to network latency.

The bot gives wrong answers

• Review your system prompt. The system prompt is the most important factor in response quality. Be specific about what the bot should and shouldn't do.
• Add a knowledge base. Without custom data, the AI relies on its general knowledge. Upload your FAQs, documentation, or product information to get accurate, grounded responses. See our guide on building a knowledge base for your AI chatbot.
• Adjust the workflow. Add a Knowledge Search node before the AI Response node to ensure the bot references your data.

The widget looks wrong on my site

• CSS conflicts. LoopReply's widget uses Shadow DOM to isolate its styles, so conflicts are rare. If you notice issues, check if your site has CSS that targets all iframe or div elements globally.
• Z-index issues. If other elements overlap the widget, the widget's z-index may need adjustment. Contact support if this happens.
• Responsive behavior. The widget is designed to work across all screen sizes. If it looks broken on a specific device, reach out with a screenshot and we'll investigate.

Frequently Asked Questions

How much does it cost to add a chatbot to my website?

LoopReply's free tier lets you add a fully functional AI chatbot at no cost. You get 1 bot, 1,000 messages per month, the visual workflow builder, and knowledge base access. For higher volumes, the Pro plan is $49/month and the Scale plan is $149/month. There are no per-message or per-resolution fees on any plan.

Will the chatbot slow down my website?

No. The widget script is loaded asynchronously with the defer attribute, meaning it doesn't block your page from rendering. The widget itself is lightweight — under 50KB gzipped. It has zero impact on your Core Web Vitals or page load speed.

Can I customize how the chatbot looks?

Yes, extensively. You can change the primary color, bot name, avatar, welcome message, widget position, and initial state. The widget is designed to blend into your site's branding, not look like a third-party add-on.

Does the chatbot work on mobile devices?

Yes. The widget is fully responsive and optimized for mobile browsers. On smaller screens, the chat opens as a full-screen overlay for a better conversational experience.

Can I use the chatbot on multiple websites?

Yes. Each bot in LoopReply gets its own embed snippet. On the free tier, you can create 1 bot (for 1 site). On Pro and Scale plans, you can create multiple bots, each with its own widget configured for a different website.

Do I need to know how to code?

Not at all. The entire process — from creating your bot to building the conversation flow to installing the widget — can be done without writing a single line of code. For WordPress and Shopify, you're just pasting a snippet into a designated area of your admin panel. For a deeper dive into building without code, see our guide on how to build a chatbot without coding.

What AI models can the chatbot use?

LoopReply supports GPT-5, Claude Opus 4.6, Gemini 3 Pro, Llama 4, Mistral, and DeepSeek. You choose the model when creating your bot and can switch anytime. Different models have different strengths — GPT-5 and Claude Opus 4.6 are the most popular for general-purpose chatbots.

Next Steps

You've got a chatbot live on your website. Here's where to go from here:

1. Train it on your data. Upload your FAQs, product documentation, and support articles to the knowledge base so the bot gives accurate, company-specific answers. Follow our guide to training your chatbot on custom data.
2. Build smarter workflows. Add intent routing, conditional logic, and lead capture to your conversation flow. Our no-code chatbot building guide walks through advanced workflow patterns.
3. Set up human handover. Configure escalation rules so complex questions get routed to your team in real time. See our human handover best practices guide.
4. Capture leads. Turn your chatbot into a lead qualification machine that scores visitors and routes hot prospects to sales. Check out our lead qualification chatbot tutorial.
5. Monitor and optimize. Use the Analytics dashboard to track response quality, conversation volume, and customer satisfaction. Iterate on your flows based on real data.

For a comprehensive overview of AI chatbot platforms and strategies, see our complete guide to AI chatbots for business.

The difference between a chatbot that visitors ignore and one they actually use comes down to relevance. The more you train it on your specific data and fine-tune the conversation flow, the more valuable it becomes.