Tutorial

VIDEO | How to Integrate a Chatbot into Your Website: A Step-by-Step Guide

Learn to add an AI chatbot to your site in minutes using Eden AI, no coding skills needed. This step-by-step guide simplifies everything, from layout to live chat, with flexible access to top AI providers like OpenAI and Cohere.

TABLE OF CONTENTS

Text Link

In 2025, building digital experiences that feel fast, helpful, and human is no longer optional, it’s expected.

Whether you’re running an e-commerce store, a startup, a support desk, or even a personal blog, people want answers fast. That’s where chatbots come in.

A chatbot is an AI assistant that lives on your website, always ready to talk to your visitors. It can answer questions, recommend products, schedule appointments, or just provide friendly conversation.

Businesses are using them everywhere, in customer service to reduce wait times, in healthcare to offer instant triage help, and even in retail to guide shoppers.

These bots don’t sleep, don’t take breaks, and they get smarter with time.

But here’s the good news: you don’t need to be a developer to add one to your site.

How to Integrate a Chatbot into Your Website

Thanks to Eden AI, you can embed a powerful AI chatbot backed by models like OpenAI’s GPT-4o in just a few steps. Even better, you don’t have to commit to one AI provider. Eden AI gives you access to dozens of providers through a single, simple API.

For a more detailed and easy-to-follow, step-by-step walkthrough, be sure to watch our YouTube video where our developer advocate, Krishna Kumpolli, breaks everything down clearly so you can follow along with ease!

‍

Step 1: Understanding the Big Picture

Before diving into the code, it’s important to understand what we’re building.

By the end of this tutorial, you’ll have a clean, professional-looking website with an AI chatbot that appears as a floating icon in the corner.

When a visitor clicks it, the chatbot pops up and begins chatting instantly, powered by Eden AI’s YodaBot and OpenAI’s GPT-4o model.

You won’t need to install anything on your computer. All you need is a simple text editor like Notepad or VS Code, and a browser like Chrome or Firefox to view the result. The chatbot works entirely through the web, all the complex stuff (like AI processing) happens behind the scenes, thanks to Eden AI.

‍

Step 2: Creating the Website Structure (HTML)

Let’s start by creating the foundation of your site using HTML. HTML is the language that tells browsers what to display. Open your text editor, and create a new file called index.html.

Now, paste in the following code:


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>My Website with Chatbot</title>
</head>
<body>
  <header>
    <h1>Welcome to My Website</h1>
    <p>A simple site with integrated chatbot assistance</p>
  </header>
</body>
</html>

This may look confusing at first, but it’s actually quite straightforward.

The <!DOCTYPE html> line tells the browser, “Hey, this is an HTML5 document.” Inside the <head> section, we include important metadata, things like the title of the page, which shows up on your browser tab.

The <body> section is what the visitor actually sees on the page, including the title, subtitle, and everything we’ll build next.

‍

Step 3: Adding Design with CSS

Your website needs to look good — so we’ll style it using CSS, which controls fonts, colors, layout, and spacing. We’ll add the CSS directly inside the <head> section of our HTML file using a <style> tag. Here’s what it looks like:


<style>
  body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f8f9fa;
    margin: 0;
    padding: 0;
    color: #333;
  }

  header {
    background-color: #4a6fa5;
    color: white;
    text-align: center;
    padding: 2rem 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  }
</style>

Here’s what each part means: The body section sets the font, background color, and removes default spacing. This makes your site look cleaner and more modern.

The header section gives your header a nice blue background, white text, some padding (space inside the box), and a soft shadow to make it stand out.

Now, when you open this HTML file in your browser, it should display a large welcome banner at the top, centered with clean text and color.

‍

Step 4: Adding Content and Layout

Underneath the header, we’ll add the main content of your page, including a simple layout that shows information on the left and a chatbot prompt on the right. We use a <main> tag with two sections: content and sidebar.

Add this inside your <body> tag:


<div class="container">
  <main>
    <div class="content">
      <h2>About Us</h2>
      <p>This is a simple demonstration of a website with an integrated chatbot. Feel free to explore the site and interact with our AI assistant.</p>

      <h2>Our Services</h2>
      <p>We offer web development, AI integration, UX design, and support.</p>

      <h2>Contact Us</h2>
      <p>Have questions? Use the chatbot or click the button below to reach out.</p>
      <a href="#" class="btn">Get in Touch</a>
    </div>

    <div class="sidebar">
      <h3>Chat with Us</h3>
      <p>Our AI assistant is ready to help. Click the icon in the corner!</p>
    </div>
  </main>
</div>

This code adds real content to your site. The .content section contains information about your business. The .sidebar gently nudges the user to try the chatbot. The layout is styled using CSS grid (already defined in the full file you shared), which places the two sections side-by-side on larger screens and stacks them on mobile.

‍

Step 5: Embedding the Eden AI Chatbot

Now for the magic part, the chatbot itself.

At the very bottom of your HTML file, just before the closing </body> tag, add this one line:


<script src="https://cdn.jsdelivr.net/gh/edenai/yodabot@e4f753f/embed.js?project=743e1e5f-3ae6-4083-aeaf-be3861eee875&provider=openai&model=gpt-4o"></script>

This script comes directly from Eden AI’s servers. When the browser loads your website, it sees this line and pulls in a tiny piece of JavaScript that embeds the chatbot.

Here’s what each part does:

project=743e1e5f-3ae6-4083-aeaf-be3861eee875 connects the chatbot to your specific Eden AI project. You’ll get your own unique ID when you create a project in the Eden AI dashboard.
provider=openai tells Eden AI to use OpenAI’s models for the chatbot.
model=gpt-4o specifies which OpenAI model to use. GPT-4o is one of the newest, most advanced models for natural conversation.

That’s it! As soon as you save the file and open it in a browser, you’ll see a small chatbot icon in the bottom-right corner. Clicking it will open the chat window, and the bot is instantly ready to chat.

‍

How the Chatbot Works Behind the Scenes

Even though you’re just adding a single script line, a lot is happening behind the scenes.

When a visitor interacts with your chatbot, their messages are sent securely to Eden AI’s servers. Eden AI then routes the message to the selected provider, in this case, OpenAI, and the model (GPT-4o) generates a response. That response is sent back through Eden AI and displayed to the user.

You didn’t have to write any server code, manage authentication, or handle billing for multiple providers. Eden AI does all that for you.

You can switch to another provider like Google, Cohere, or Mistral just by changing one word in the script no need to rewrite anything.

‍

Your First AI Chatbot Is Live!

Congratulations, you just built a working AI chatbot into your very own website! And you did it without needing to know Python, Node.js, or any complicated frameworks. That’s the power of Eden AI: it removes the barriers so anyone can harness the power of artificial intelligence.

This is just the beginning. You can expand this chatbot to answer FAQs, help customers navigate your site, or connect it to your backend systems.

With Eden AI, you’re not stuck with one provider, either. You can try different models, compare responses, and find what works best, all through one API.

If you’re ready to keep learning, check out more of our tutorials on the Eden AI YouTube channel.

Subscribe so you never miss a new guide. And if you haven’t already, create your free account at EdenAI.co to start building with our multi-AI platform.

Create your Account on Eden AI

Try Eden AI for free.

You can directly start building now. If you have any questions, feel free to chat with us!

Get started Contact sales