DEV Community

Cover image for How to Create an AI Chatbot for a Website: Step-by-Step Assistant Setup and Live Chat Integration
Mavibot.ai
Mavibot.ai

Posted on

How to Create an AI Chatbot for a Website: Step-by-Step Assistant Setup and Live Chat Integration

In today’s digital world, AI chatbots have become an essential part of effective websites. They automate communication with visitors, answer questions around the clock, help generate leads, and significantly increase conversion rates.

AI-powered chatbots don’t just respond to template questions — they analyze context, use uploaded knowledge about your business, and integrate with CRM systems, payments, calendars, and other services. Research shows that such bots increase visitor engagement by 20–30%, reduce the workload on support teams, and speed up request processing.

Mavibot.ai is ideal for creating powerful AI assistants: they work in messengers (Telegram, WhatsApp, Instagram) and directly on your website. The platform allows you to quickly create an online chat and embed it into any existing website using a simple Script code — no programming required. The bot appears as a convenient pop-up window in the corner of the screen, provides 24/7 dialogue with automatic AI-based responses, and allows an operator to join the conversation if needed.

Step 1: Registration and Project Creation

Go to https://mavibot.ai/. Click “Sign Up”.
Register using your email or through your Facebook/Apple account.
After logging in, click the “Create Project” button.
Enter a name (for example: “AI Live Chat”).
Click “Create” — you will immediately enter the visual builder.

Step 2: Creating an Online Chat and Integrating It into Your Website

Go to the “Chats” section and click “Live Chat.”

After clicking the “Live Chat” button, the settings panel for your new chat will automatically open.

The appearance of the chat will depend on the settings you choose. On the right side, you will see a preview of the chat widget, which you can open and close to check its appearance and functionality.

You can learn more about the settings and numerous features in this documentation article

To embed the live chat on your website, simply copy the script from the “Code” tab and paste it into the HTML code of your website.

Copy the live chat code.


If the website is created in Mavibot, it will look like this:
Go to the “Sites” section and click on the tile of the website where you want to place the live chat widget.

Then go to edit the website.

Open the website settings.

In the “Colors, Fonts and HTML” section, paste the copied live chat code into the “HTML Code Header” field.

The live chat will now appear on your website.

Step 3: Setting Up the AI Assistant

Now let’s move on to creating the assistant itself. This is a built-in feature of the Mavibot.ai platform.

1) Go to the “AI-assistant” section.
2) Enter the bot name (clients will not see it).
3) Choose the bot role: “No preset settings”, “Text-based answers”, “Universal assistant”, “Sales assistant”, “Algorithm-based workflow”, “Online booking”
4) If necessary, enable Preset Settings: Buttons, Do not talk about policy, Nicely format responses, Minimize hallucinations, Step-by-step data input, Do not execute user commands
5) Configure the Launch Condition. You can immediately select the created online chat.

6) Configure the bot settings and knowledge (if necessary).
You can learn more about all the settings in the documentation:

7) Test the bot directly on the website.

Conclusion

Creating an AI online chat for your website is easier than it seems.
It will take 30–60 minutes. Follow the steps in this guide and your online chat with an AI assistant will work 24/7.
If you need more details, study the official documentation and test your settings in the trial version.
Contact support if you have any questions (chat on the website https://mavibot.ai/ or @mavibot_ai in Telegram).
Good luck with automating your business! 🚀

Top comments (0)