How to create a FAQ chatbot in Bubble.io: Step-by-Step Guide

Go to the Data tab and create two Data Types. FAQ: question (text), answer (text), keywords (list of texts), category (text), helpful_count (number). ChatMessage: session_id (text), sender (text — bot or user), message (text), timestamp (date), faq_matched (FAQ). Populate the FAQ type with your common questions and their answers. For each FAQ entry, add a list of keywords that users might type when asking that question.

Create a page or popup for the chatbot. Add a Repeating Group set to type ChatMessage, sorted by timestamp ascending. In each cell, use conditional formatting to style bot messages differently from user messages (e.g., bot messages aligned left with a grey background, user messages aligned right with a blue background). Below the Repeating Group, add an Input element for the user's question and a Send button. Add a Custom State on the page called session_id (text) and set it to a random string on page load to track the conversation.

Create a workflow for When Button Send is clicked. Step 1: Create a new ChatMessage with sender = user, message = Input's value, session_id = page's session_id, timestamp = Current date/time. Step 2: Search for a matching FAQ. Use Do a search for FAQs with an advanced filter: This FAQ's keywords contains Input's value :split by (space) :each item. This checks if any word in the user's input matches a keyword. Step 3: If a match is found (search result is not empty), create another ChatMessage with sender = bot, message = the first match's answer, faq_matched = the match. Step 4: If no match, create a ChatMessage with sender = bot and a fallback message. Step 5: Reset the input.

When no FAQ match is found, display a message like I could not find an answer to that question. Would you like to talk to a human? Add two buttons in the bot message: Yes, connect me and No, thanks. When the user clicks Yes, create a SupportRequest record (user, message, session_id, status = New) and display a confirmation: A support agent will get back to you shortly. Notify your support team via email. When the user clicks No, display alternative suggestions like popular FAQ categories or a Browse all FAQs link.

After each bot answer, display small thumbs up and thumbs down buttons. Create workflows: When thumbs up is clicked → Make changes to the matched FAQ → helpful_count + 1. When thumbs down is clicked → Create a ChatMessage with sender = bot asking Would you like me to rephrase or connect you to support? Also log unhelpful responses by creating a FeedbackLog record with the FAQ, the original question, and a rating of unhelpful. Use the helpful_count to prioritize better answers when multiple FAQs match a query.

Create a Reusable Element of type Floating Group positioned in the bottom-right corner. Add a chat icon Button that toggles a chat popup's visibility using a Custom State (is_open yes/no). Place the entire chat interface (Repeating Group, input, send button) inside the popup. Add the Reusable Element to every page where you want the chatbot available. Style the floating button with a recognizable chat bubble icon and optionally show an unread badge when the bot has responded. For complex chatbot implementations, RapidDev can help integrate AI-powered responses using OpenAI or Claude APIs.