Creating an Educational AI Bot with Follow-Up Questions

In this tutorial, we will create an educational AI bot that can answer student's questions and provide follow-up questions to deepen their understanding. We'll use the widget integration provided by ChatBotKit to achieve this. The bot's responses will include not just an answer to the original question, but also further questions that students can click on to explore the topic in more depth.

Step 1: Understanding the Widget Button Syntax

Before we start, let's understand how buttons work inside ChatBotKit widgets. Widgets are powerful tools that allow you to provide interactive, embeddable conversation areas. They can display a variety of content types, including clickable buttons, which we will use in this tutorial to render follow-up questions.

Buttons in ChatBotKit widgets are created using a specific markdown format. The button syntax requires an empty href within the markdown link. Here's an example:

When the widget renders this markdown, the link becomes a clickable button. Clicking it automatically sends the button text as a new user message, allowing students to continue exploring the topic seamlessly.

Step 2: Create a Bot

1. Navigate to the ChatBotKit platform and create a new bot.
2. Give the bot a descriptive name, such as "Educational Assistant".
3. Add an optional description to clarify the bot's purpose.
4. Choose a language model. For educational bots that need to produce well-structured, accurate responses, claude-4.5-sonnet or gpt-4o are strong choices. If you prefer a more cost-effective option, gpt-4o-mini works well for straightforward question-and-answer scenarios.

Step 3: Set Up the Bot's Backstory

A bot's backstory is where you define the bot's characteristics, skills, and behavior. For this educational bot, the backstory must instruct the bot to always append clickable follow-up questions after each answer.

Paste the following into the backstory field:

With this setup, every bot response becomes a stepping stone for further learning. Students are guided to explore related topics or delve deeper into the same subject, making the bot a more effective educational tool.

Step 4: Create a Widget Integration

1. Navigate to Integrations and click the Create Widget Integration button.
2. Fill in the name, for example "Educational Bot Widget".
3. Connect the widget to the bot you created in the previous step.
4. Click the Create button to save the integration.

Step 5: Embed and Share

Once the widget is created, click the Install button to retrieve the embed snippet. You can either:

• Share by link - Use the direct widget URL to share the bot with students.
• Embed on your website - Copy the snippet and paste it into your webpage's HTML to host the bot on your own site.

Replace {YOUR_WIDGET_ID} with the actual widget ID shown in your ChatBotKit account.

Troubleshooting

• Follow-up questions not appearing as buttons - Verify that the backstory includes the exact markdown format with empty hrefs: [Question](). Any non-empty href will render as a regular link, not a button.
• Buttons not sending the question text - Make sure you are using the ChatBotKit widget (v2 or later). The clickable button behavior is specific to the widget rendering engine.
• Bot responses lack detail - Consider upgrading to a more capable model like claude-4.5-sonnet or gpt-4o and refining the backstory to specify the subject area and depth of answers expected.

Conclusion

By following these steps, you can create an educational AI bot that not only provides answers but also encourages students to delve deeper into the topic by presenting clickable follow-up questions. This interactive learning approach enhances the student experience and promotes a more in-depth understanding of any subject.