How to build your first AI chatbot

Agnieszka Dudziak

10 min read

updated: Mar 22, 2024

Scan your website and knowledge base, and let ChatBot AI Assist answer the most common user questions.

Start a free ChatBot trial and activate your account to create your bot without coding.

The bot trained automatically with ChatBot AI Assist generates responses based on your website or other resources of your choice. You can train your chatbot by scanning:

Website URL
KnowledgeBase help center
Zendesk help center

You can also use editable text articles to train your bot with the help of the AI Knowledge feature. For example, you can copy and paste your internal documentation or unpublished URL content.

If you prefer building your chatbot manually, see our article: “How to build your chatbot from scratch”. Or you can use the Templates section to find ready-made bots for specific tasks.

Create a bot by using your website URL

Set up your chatbot

Go to the Chatbots tab. Then, select + Add chatbot.
Select Website.

Train

Enter your website URL and click on the Continue button.

If you are unable to scan your website, check our FAQ for possible reasons or contact us at support@chatbot.com.

Now, you can turn off specific category pages of your website before training your bot. When you’re ready, click Continue.

Tune your chatbot

The final step allows you to:

Check and edit the attributes collected through the website scanning process.

Attributes such as company name, company address, URL to privacy policy, URL to terms, social media links, and more are collected automatically during the scanning process.
Customize your welcome message if needed.
Choose basic skills generated from your website’s content (such as the Contact us skill, suggested whenever contact details are collected).

To proceed, click Continue.

Skills are dedicated chatbot flows designed for specific tasks, such as lead generation, spam detection, contact us forms, sales processes, etc. Some skills are generated automatically during the chatbot creation process (for example, FAQ, About, Pricing), depending on your website’s content, and others can be added manually.

Now, your AI chatbot is ready for testing. Create, configure, and customize your Chat Widget, and Publish the chatbot when ready.

You can also train your chatbot using additional sources like the KnowledgeBase help center, Zendesk help center, Articles, and Files (soon) in the AI Knowledge module. You can see it in the main view of your bot, in the top-left part of your screen.

You can add more knowledge sources to your already created bot. AI Knowledge module gathers the data, which ChatBot AI Assist then uses to answer your customers’ queries. Learn how it works from our “What is AI Knowledge” article.

Test your AI chatbot

Testing tool

Testing tool allows you to test your AI chatbot within the ChatBot web app. You can check if everything works as intended before your chatbot connects with users.

Go to the main view of your AI chatbot.

AI Assist is a block that uses our in-house AI model to provide dynamic responses to the end users based on the data trained from the initial source (website URL, Zendesk help center, KnowledgeBase help center).

To test your AI chatbot, click on the Test your bot button and start a chat.

If you click on the three dots icon in the top right corner, you can choose between 5 options:

Show or hide Debug mode — it shows the names of all the actions and interactions that happen during the chat.
Returned user — turning on the “Returned user” option allows you to test the chat as a customer who’s already chatted with the bot.
Follow steps on the tree — it displays where the tested interaction is located on the conversation tree.
Show or hide the Typing indicator — it precedes the message sent by the user.

Reset chat — lets you start a chat from scratch.

If you need to test only a specific interaction or action, you can start testing from any step of your chatbot by right-clicking on that interaction and selecting Start testing from here.

The AI chatbot will search for an answer on the conversation tree first. If one isn’t found on the conversation tree, it will use the knowledge from AI Knowledge, and then use AI Assist to provide the best answer.

To create your Chat Widget and configure its settings, open your AI chatbot, navigate to the Integrations icon, and click Connect next to the Chat Widget option.

Go to the General section.

Set up the bot’s general settings:

Welcome screen — you can enable this option to show the welcome screen with a description and your social media links before the chat starts.
Bot name — type your chatbot’s name here.
Description — this short text is displayed on the welcome screen. It should briefly describe your business and explain how the chatbot can help the user.
Powered by — you can turn off this option to remove the Powered by ChatBot label from your Chat Widget.
Text field — if needed, you can turn the text field off. Remember that if you do so, you’ll need to build your chatbot using rich messages. If you turn the text field off but use the Question action in your chatbot, the text field will be activated so that the user can answer that question. After the user provides an answer, the text field will be automatically turned off again.
Social media — use it to share your social media links with customers directly in the Chat Widget on the welcome screen.

Make sure to click on the Save button in the bottom right corner to save your settings.

Open your AI chatbot, navigate to the Integrations icon, and click on the Chat Widget.

Go to the Appearance section.

Set up the bot’s appearance settings:

Theme color — this option allows you to change the main widget theme color and the background image. You can choose from ready-to-use presets or configure your colors by selecting the More advanced colors option.
Avatar — you can add the bot’s avatar here. Drag and drop or browse for an image and crop it if needed.
Background — you can add the bot’s background here. Drag and drop or browse for an image and crop it if needed.
Minimized window — here, you can define how your minimized window should look. You can choose between the bubble and the bar widget.
Minimized window theme — choose the bubble icon or upload your image. If you’re using the bar option, you can customize the displayed text instead.
Position — you can decide where the Chat Widget should appear on your website. You can choose between the left and right sides of the screen. It’s also possible to define the spacing between the Chat Widget and the corresponding bottom and side edges.

Make sure to click on the Save button in the bottom right corner to save your settings.

Set up greetings

The greeting feature allows you to display a pop-up message right above the minimized Chat Widget on your website. You can use it to catch the user’s attention and encourage them to start chatting.

You can decide when your greetings should be sent to the user. For instance, you can create a customized greeting for the user who spends a specific amount of time on a particular page or a whole domain. You can also send a customized greeting to visitors who enter your website through a specific URL address.

Click on the + Add condition button and select a condition from the list:

Time on website
Time on current page
Current Page Address
Any visited page address
Referring website address
User visited at least
User is a first time visitor
User returned to your website
{…} Custom variable

Make sure to Save greeting and click on the Save button in the bottom right corner to save your settings.

You can preview the changes applied to your Chat Widget in real time on the right side of the configuration screen. Choose from one of the views to see the minimized chat, welcome screen, or ongoing Chat Widget view.

ChatBot also lets you verify your settings and test your chatbot on the sample page — a default demo page. To open the sample page, click on the Live Preview option.

You can share the link to the sample page with your team or beta testers to gather feedback and ensure your bot provides an excellent user experience.

Remember to Publish your chatbot before you start testing. Only then will you see the latest updates in the tested chatbot.

Publish your chatbot

By editing your chatbot, you will automatically create a new Draft of your chatbot. The draft version is a duplicate of your published chatbot with the changes you added.

Draft lets you work on your chatbot without updating the published version. This way, you can experiment with your chatbot without worrying that any of these tweaks will change the behavior of your published version.

When you’re ready and decide that your Draft can replace the already published version, click the Publish button.

To install the Chatbot Chat Widget on your website, open your AI chatbot, navigate to the Integrations icon, and click on the Chat Widget.
Go to the Publish section.
Click Copy minify code to copy the code.
Paste the code to your website’s source code before the closing </body> tag.
Reload your website. The Chat Widget should appear in the bottom corner of a page.

Master your AI chatbot’s performance

You can continue training your AI chatbot with the help of the FAQ & AI Training sections in the main view of your bot, in the top-left part of your screen:

FAQ — add questions and answers that your AI model will learn and use when interacting with the customer.

Training — check the “Unmatched” category to see user messages your AI couldn’t answer. You can provide answers for these, add them to the FAQ, and then your AI model will use these for similar questions later.

In the Training section, you can also review and edit all ChatBot “AI Assist answered” queries and add them directly to the FAQ.

Read more:

How to build your first AI chatbot