DEV Community

Cover image for Build Custom AI Chatbot with your website or documents for customer support
Borey
Borey

Posted on

Build Custom AI Chatbot with your website or documents for customer support

This tutorial is for the busy dev or anyone who wants an AI Chatbot without spending much time coding it. This chatbot can help you with customer support on your website or Facebook Messenger App.

We will be using a no-code platform MybotChat to train ChatGPT on your website contents or documents (PDF, word, excel, text). The end result will be a working AI Chatbot that you can embed on your website to help your customers just like a human live chat agents. Because it's powered by Large Lange Model like ChatGPT or Llama 3 (by Meta); it can handle user's hard questions intelligently.

So, here are the plans:

  1. Create free account at MybotChat
  2. Create a Chatbot and train it with your contents.
  3. Test it.
  4. Embed it on your website.

All of these steps should take a few minutes of your time.

1. Create Free Account: Go to MybotChat and sign up for a free account.

2. Create a Chatbot and Train it: After creating account and login, you should see the link to view My Chatbots on the top right menu as in the picture. Click on that link to see the page where you can create a new chatbot by click on the button Add New

Image description

After click on that Add New button, there should be a popup form to enter a name of you bot. You can change it later.

Image description

After creating a new chatbot you should land on the training page as in the picture blow. If not, this page can be access from My Chatbots page too.

Image description
As seen on this picture, you can enter a website and check the option to crawl all links or just a single link. Click "Fetch Link" button to execute the action. It takes a few minutes, depending on your much content your website has.

Train Your Chatbot
Now that the content has been imported, it's time to train by clicking on the button Train Chatbot as in the picture. Then wait a bit. When it's done, you will see the status of the training.

Image description
3. Test It
Click on the Console tab to see the chatbot console where you can test and change some setting if needed.

Image description

4. Embed it on your website.
Click on the button Embed Code For Website to see the popup where you can copy the code or iframe code (only use one).

Image description

Here is an example of embedding the code in a HTML page. The code is placed at bottom by the body tag.

Image description

That is it.

API Trace View

Struggling with slow API calls? 👀

Dan Mindru walks through how he used Sentry's new Trace View feature to shave off 22.3 seconds from an API call.

Get a practical walkthrough of how to identify bottlenecks, split tasks into multiple parallel tasks, identify slow AI model calls, and more.

Read more →

Top comments (0)

The Most Contextual AI Development Assistant

Pieces.app image

Our centralized storage agent works on-device, unifying various developer tools to proactively capture and enrich useful materials, streamline collaboration, and solve complex problems through a contextual understanding of your unique workflow.

👥 Ideal for solo developers, teams, and cross-company projects

Learn more