How to Create an AI Chatbot For Your Website (Step by Step)

Posted on April 3, 2024 by Leave a Comment

Editorial Note: We may earn a commission when you visit links on our website.
How to Create an AI Chatbot For Your Website (Step by Step)
Blog / Business / How to Create an AI Chatbot For Your Website (Step by Step)

Imagine transforming your website’s customer interaction overnight; AI chatbots are your key to making this a reality.

Do you find yourself spending countless hours responding to customer inquiries, wishing there was a more efficient way to manage these interactions? Creating an AI chatbot might just revolutionize the way you engage with your website visitors. This guide on how to create an AI chatbot is your first step toward transforming your customer interactions.

We’ll walk you through choosing a platform that aligns with your business goals, the intricacies of training your chatbot to understand and respond accurately, and finally, deploying it to work its magic.

How to Build an AI Chatbot for Your Website

Creating your own AI chatbot from scratch sounds more difficult than it actually is. Thanks to some amazing AI products, it is quite easy to do. Here’s the general step-by-step process for creating a chatbot for your website.

  1. Choose the right AI chatbot platform
  2. Create your account
  3. Build and customize your chatbot
  4. Train it with unique source data
  5. Install the chatbot on your website

We cover all of these steps in detail, starting with picking the perfect platform. There are some low-cost ones here, too.

1. Choose Your Website’s AI Chatbot Builder

AI Chatbots for Your Website Options

Choose an AI chatbot that has the features you need (Referenced in Image: Chatbase, DocsBot.ai, and Botsonic)

To build a chatbot for your website, you need to choose the best AI chatbot platform for website engagement. There are a lot of different types of chatbots out there, so it can be hard to find the right one.

We recommend that you use one of these: Chatbase, DocsBot.ai, or Botonic. Each of these is a good option and easy enough to start with. You should look into each of these and see which ones match your needs. Look at cost, ease of use, and integrations that all work with the software that you use for your business.

Here are the top AI chatbot builders we recommend (and why):

DocBotAI

Docsbot - Homepage

DocsBot.ai is an intelligent chatbot builder that is easy to use and has a free personal plan to try out. It has the most native integrations for interesting data sources—so you don’t have to shuffle things around too much. Just connect it straight to Notion, a URL, or wherever your info is. It’s constantly getting new features and refinements and is a great chatbot to start and build with.

Paid plans for DocsBot AI start at $19 per month but try out the free plan to test it out.

Get Docsbot AI

Botsonic

Botsonic AI tools

Botsonic comes at a great monthly price and has all the features that a dedicated AI chatbot should have. It’s a no-code solution, which is helpful for all those wanting to get up and started quickly. Botsonic has a large user base that really enjoys the product. It’s a great platform to start on and is really easy to use.

See our Botsonic review to get a full idea of the platform.

Botsonic has a free plan with paid plans starting at $20 per month (before discounts).

Try Botsonic

Chatbase

Chatbase was the first dead simple AI chatbot builder that we came across. It has fallen into stiff competition ever since, but it is still a quality tool. Chatbase has a very simple UI that is easy to navigate. Training is straightforward, as is customizing your chatbots.

Learn how to make your own AI with Chatbase in our detailed guide. We also have a review of Chatbase.

Chatbase offers a free plan with paid plans starting at $19 per month.

Get Chatbase

If you want to look at other options, we’ve reviewed the best AI chatbots for websites. There are quite a few on that list that aren’t mentioned here.

For this guide, we’ve chosen to use DocBot.AI because of its excellent features, ease of use, and free trial.

2. Create and Set Up an Account

The first thing that you need to do is sign up for a new account. You can create an account for free, which will let you create chatbots for personal use that expire after 30 days. It’s perfect for testing out the feasibility of this platform for your use case.

Signup for DocsBot.ai - Steps 1

From there, you can select which type of AI chatbot you wish to create. DocBot.ai offers AI chatbots for answering support and presale questions, creating internal knowledge bases, simple Q&A chatbots, and even for Content creation.

Signup for DocsBot.ai - Steps 2

It is worth noting that you will need to provide your OpenAI API key. It uses OpenAI’s API to power the chatbot instead of selling you up-charged AI credits for its platform. For larger chatbots or websites using chatbots, this can greatly reduce overhead costs associated with running your chatbot.

Signup for DocsBot.ai - Steps 3-5

You will need to create one if you do not already have an OpenAI account. You will also need to add a card on file and prepay for your first credits.

3. Create Chatbot

Creating your first chatbot is very easy with docsbot.ai. Once you’ve created and set up your account, you’re able to create a new chatbot from the dashboard. You should see a dialog box asking you to create a new chatbot. Provide the name of the chatbot, its description, and your privacy settings. You can also choose which AI model you’d like to use with your chatbot.

Create First Chatbot with DocsBot.ai - Steps 1-5

Once you’ve provided all the starting details for your chatbot, you will be taken to the options page for your bot. As you can see, your chatbot needs training sources that you will need to provide. But first, let’s style and customize our chatbot. We’ll come back to training sources later.

Create First Chatbot with DocsBot.ai - Steps 6

On this page, find the “Widget embed” link. This will take you to the customization options for your chatbot.

Create First Chatbot with DocsBot.ai - Steps 11

Scrolling past the first section on the newly loaded page, you will notice options for customizing your chatbot. You can change the color, button icon, and button alignment on your website and the Avatar your bot uses.

Create First Chatbot with DocsBot.ai - Steps 12-15

Scrolling a little further down, you can add a header logo, I just had her alignment, set your bot’s first message, determine a support link with button text, and toggle on/off source citations. There are also options for displaying DocBot.ai branding and setting the domains on which your chatbot is allowed to be used.

Create First Chatbot with DocsBot.ai - Steps 16-22
There is a save button on the bottom of the page for this long list of customization options.

4. Train Chatbot with Unique Sources & Data

Now that we’ve gotten your chatbot designed and configured how you want it to, we can turn to actually training it. This is the part where you’ll spend most of your time. Training an AI chatbot is as simple or complex as you make it. Those needing tighter controls over how your chatbot behaves will need to do more testing than those for it is less important.

Go back to the main page for your chatbot. Click on a source type that you’d like to add. We’ll add a URL source to make it easy.

Create Train Chatbot - Steps 1-2

To add a new URL source, DocsBot.ai requests that we provide the source URL from which it can pull data, a source title, and, for paid accounts, a scheduled refresh interval. After that, click “+ Add source” to populate the training data for your Bot to learn. CobBot.ai will fetch the data from your source, vectorized it, and make it available to users of your chatbot.

Create Train Chatbot - Steps 3-5

Once the page loads, you’ll see your new source on your chatbot’s dashboard. Scrolling to the bottom of the page, you could add even more sources. And if you want to test out your chatbot with the new sources added, scroll to the top, find the “Chat,” and click it to access your chatbot.

Create Train Chatbot - Steps 6-8

A popup overlay with your chatbot will appear. You could use one of the quick questions or type out a question for your chatbot. There’s also a research mode for more detailed questions that might cost you more with your OpenAI API.

Create Train Chatbot - Steps 9
Testing is going to be a huge part of deploying your chatbot. You want to ensure it answers the questions your users will most likely ask it. You also want to make sure that it behaves as expected. The only way to have confidence that your chatbot can do this is by thoroughly testing it yourself.

5. Add Chatbot To Your Website

Once you’ve customized the look of your chatbot and added sources to it, you should be ready to add it to your website. Clicking on the widget embed button at the top again will take us to the Customizations page. Here, you will find your chat widget embed codes with two embedding options. You can copy and add the JavaScript embed code to your website’s HTML or use the iframe embed option to add an inline on a specific page.

Create First Chatbot with DocsBot.ai - Steps 23

Where you go from here depends entirely on your website-building platform. Below, we’ll show you how to add and install your chatbot on WordPress (using Divi Theme or WPCode plugin) and on website builders, Wix and Squarespace.

Installing Your AI Chatbot on a WordPress Website

To install your AI Chatbot in WordPress, you will need to add the chatbot embed code to your WordPress site. There are two easy ways to do this. The first is by using built-in theme options (if available in your theme). The second way is to use a plugin. Either of these methods allows you to add Javascript code site-wide (to your site’s main head tag or body tag) without having to do it manually on the backend.

How to Add Your Chatbot to WordPress with Divi

Installing your chatbot with the Divi Theme is easy because it makes it easy to add custom JavaScript snippets (like our chatbot embed code) right from the dashboard. Copy the Chatbot embed code and head over to the Integrations tab in your Divi Theme Options. Find the head or body custom code fields and paste your code there. Click save to save changes. Your chatbot should appear on the front end of your website.

Divi Theme Options - Integrations Tab

Alternatively, you could take the iframe embed code from DocsBot AI and add it directly to your page in WordPress. Since Divi is also a top page builder, you can use a Divi code module to paste the iframe code to your page. Save your page changes, and the chatbot should appear on that page’s front end.

Divi's code module

If you are using the default WordPress block editor, you can use the code block to insert the code to your page as well.

How to Add Your Chatbot to WordPress with WPCode

Installing DocsBot.ai’s javascript embed code is very straightforward with the WPCode plugin on WordPress. Once installed, you hover over code Snippets and click “+ Add Snippet.” From there, give the custom snippet a title and paste the embed code. Make sure the location fires in the header or the body sections. You can choose HTML as the code type. And don’t forget to set the code snippet to “Active” before saving the snippet.

Install Chatbot to WordPress with WPCode - Steps 1-7

Now, your chatbot is available to all users across the front end of your website.

How To Install Your Chatbot on Wix or Squarespace

Squarespace allows certain paid tiers to add custom code. From the main “Settings” panel, go to “Advanced” then “Code Injection.”  In the header inject area, simply past your chatbot Javascript embed code. Press “Save” and navigate to the front end of your site, where you’ll see your chatbot.

Install Chatbot to Squarespace

For Wix sites, navigate to the “Settings” section in your site’s dashboard and select the “Custom Code” tab within the “Advanced” options. Click on “+ Add Custom Code” and paste your code snippet into the provided text box. Name your code and select where to add this code: to all pages of your site, including future pages, or to specific pages by selecting from the drop-down menu. Choose between adding it to the HTML Head, the Body’s start, or the Body’s end. Click “Apply” to finalize the setup.

Wix Custom Code Install for Chatbots

Improve Your Productivity with a Custom AI Chatbot (3 Use Cases)

Chatbots handle so many different types of conversation that it’s hard to find a new use case for them. While they have some limitations, they’re surprisingly nimble in what they can do. Here are our favorite uses for the AI chatbots you’ve created.

Customer Service Chatbots: AI chatbots can handle basic questions at any time of the day. They are great for handling those routine questions you kind of get tired of answering. We love how much this can actually free up business owners to focus on other tasks. Plus, streamlining answers to customer queries will boost user experience and customer satisfaction.

Business Writing: Since you are already training chatbots on your internal docs, why not have them generate content for you, too? Just fine-tune one with training data matching your tone and what you expect it to know. Then, it can whip out first drafts for every letter, marketing campaign, and email. A true time-saver built for you!

2nd Brain: Chatbots are great second brains that can keep you sane. They can remember things for you, like your a contact’s birthday, or help you figure out the best way to accomplish important tasks. All you have to do is add the data you want to help you keep track of and ask it questions. Using AI bots this way helps keep those plates spinning for you as you get more done yourself.

How Else AI Is Helping Business Owners & Freelancers

We can’t recommend DocsBot.ai enough. It’s a solid chatbot builder that you can use to create your own website chatbot using artificial intelligence. Most AI builders are inaccessible, but this one is not.

AI Chatbots are one way businesses use AI. There are plenty of other use cases and tool types that we’re bullish on. To help you get more done with less, we recommend you closely look at the best AI website builders. They are truly a great way to utilize AI for business. If you’re wondering how you can use AI to build a website, we created a guide for that.

For our freelancers, see the best ways to make money using AI. It’s packed with ideas and the tools you need to make it happen. We also recommend these top AI courses for those looking to polish up their resumes and enter into new career territory.

How are you using AI chatbots for your business or personal projects? We’d love to hear how you’re using the technology to create better systems and solutions.

Featured Image by Bahaddin / shutterstock.com

Top Picks
Product Image

Get Started With DocsBot.ai!

Explore plans, pricing and features. Click here to get started. 👇

Visit DocsBot.ai

Get Started With DocsBot.ai!

Explore plans, pricing and features here. 👇

Explore DocsBot.ai
Premade Layouts

Check Out These Related Posts

9 Best PowerPoint Alternatives in 2024 (Powered by AI)

9 Best PowerPoint Alternatives in 2024 (Powered by AI)

Posted on April 7, 2024 in Business

Feeling boxed in by PowerPoint’s templates? If you’re looking for more creativity and flexibility in your presentations, you’re not alone. There are plenty of PowerPoint alternatives out there that offer a wide range of visuals, transitions, and interactive features—perfect for...

View Full Post
How to Write With AI: Essential Guide, Tools, & Tips (2024)

How to Write With AI: Essential Guide, Tools, & Tips (2024)

Posted on April 4, 2024 in Business

Writing enriches life, shaping our business, academic, and personal narratives. Yet, as AI redefines boundaries, it poses compelling questions: Can it replace human writers, or should it merely enhance our creative processes? How do we harness AI in our writing workflows effectively? We explore...

View Full Post

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

Join To Download Today