How to Build Your First AI Chatbot Without Writing Code
A working AI chatbot on your website — answering customer questions, qualifying leads, and booking calls — is no longer a 3-month development project. This step-by-step guide shows you how to build one using Bubble.io and the Claude or OpenAI API, with zero coding required.
The End Result
By the end of this guide you will have a fully working AI chatbot embedded on your website or Bubble.io application. The chatbot will: answer questions about your business using information you provide, maintain conversation context across multiple turns (it remembers what was said earlier in the conversation), handle questions it cannot answer gracefully by routing to a human or capturing a callback request, and log every conversation to your database for review.
This is not a scripted FAQ bot with pre-defined menus — it is a genuine AI that understands natural language and responds intelligently to anything a visitor asks, within the scope you define. The entire build takes 60 to 90 minutes for a first-time builder following these steps.
Prerequisites
An API key
You need an API key from either Anthropic (for Claude) or OpenAI (for GPT-4). Anthropic: create an account at console.anthropic.com, add a payment method, and create an API key. OpenAI: create an account at platform.openai.com, add a payment method, and create an API key. Both charge per use — a typical chatbot conversation costs between $0.001 and $0.01 depending on length. Start with a $5 credit and monitor usage. You do not need both — choose one.
A Bubble.io account
Create a free account at bubble.io. The free plan is sufficient to build and test the chatbot. You will need a paid plan ($29/month) to deploy to a custom domain or remove Bubble branding. For this guide, the free plan is fine for the build and test phase.
Your business knowledge document
Write a plain-text document (200 to 500 words) containing: what your business does, who your customers are, what services or products you offer (with brief descriptions), your pricing (or a note that pricing is discussed on a call), your location and service area, your working hours, and the most common questions customers ask with their answers. This document becomes the AI’s knowledge base — everything it knows about your business comes from here.
Follow These Steps in Order
Create your Bubble.io application and set up the database
Log into Bubble.io and create a new application. In the Data section, create two new data types. First: Conversation — fields: session_id (text), created_date (date). Second: Message — fields: conversation (link to Conversation), role (text — will store ‘user’ or ‘assistant’), content (text), created_date (date). These two tables store every chatbot conversation and every message within it. The session_id ties all messages from one browser session to one conversation record.
Build the chat interface in Bubble’s visual editor
In the Design section, build the chat UI. Add a Repeating Group element — set its data source to ‘Do a search for Messages where conversation = current conversation, sorted by created_date ascending’. Inside the repeating group, add a text element for the message content and style it differently for ‘user’ role (right-aligned, coloured background) vs ‘assistant’ role (left-aligned, white background). Below the repeating group, add an Input element (for the user to type) and a Button labelled Send. This is your complete chat interface.
Set up the API Connector for Claude or OpenAI
In Bubble’s Plugins section, add the API Connector plugin (free). Create a new API called AI Chat. Add a call named Send Message. Set the method to POST. For Claude: URL is https://api.anthropic.com/v1/messages. Add headers: x-api-key (your API key), anthropic-version (2023-06-01), Content-Type (application/json). For OpenAI: URL is https://api.openai.com/v1/chat/completions. Header: Authorization (Bearer YOUR_KEY), Content-Type (application/json). In the body, you will pass the conversation history as JSON — we set this up in the next step.
Build the Send Message workflow
When the Send button is clicked: Step 1 — Create a new Message with role=’user’, content=Input’s value, conversation=current session’s conversation. Step 2 — Make the API call. In the request body, build the messages array from the conversation history: all previous messages in the format [{role: message’s role, content: message’s content}] plus the system message at the start. The system message is your business knowledge document, prefixed with: You are a helpful assistant for [Business Name]. Answer questions based only on the following information about our business: [paste your knowledge document]. Be concise, friendly, and professional. If asked something not covered in the information, say you’ll have a team member follow up. Step 3 — Create a new Message with role=’assistant’, content=API response’s content. The repeating group updates automatically.
Handle the session and test
On page load, check if a conversation record exists for this browser session (use Bubble’s URL parameter or a cookie to store the session_id). If not, create a new Conversation record and store its unique ID. This ensures all messages in one visit are linked to one conversation. Test by previewing the page, typing a question about your business, and verifying the AI responds using your knowledge document. Try questions your document covers and questions it does not — verify the AI handles both appropriately.
Embed on your website
Once tested in Bubble preview, deploy the application. To embed the chatbot on an existing website (not built in Bubble), use Bubble’s iframe embed: add a small floating chat button to your website using a snippet of HTML/JavaScript that opens the Bubble chatbot URL in an iframe when clicked. Alternatively, publish the Bubble page as your standalone chatbot page and link to it from your main website. Your AI chatbot is now live and answering questions 24 hours a day.
The First 30 Days
Review conversation logs weekly in your Bubble database. Look for: questions the chatbot answered incorrectly (update your knowledge document), questions it could not answer (add information to the knowledge document), any patterns in what visitors are asking (signals about what your website copy is not making clear), and any lead qualification opportunities you are missing (add a prompt to offer a call booking when the visitor asks about pricing or timelines).
The chatbot improves continuously as you update the knowledge document. After 30 days, most businesses find the chatbot handles 70 to 80 percent of incoming website inquiries automatically — freeing the team from reactive answering while ensuring every visitor gets an immediate, helpful response.
📌 Add this line to your system prompt to improve lead capture: If the visitor asks about pricing, timelines, or wants to discuss their specific project, offer to schedule a call using this link: [your Calendly link]. This turns the chatbot into a lead qualification and meeting booking tool, not just a FAQ responder.
How much will the chatbot cost to run per month?
At typical website traffic levels for an SME (500 to 2,000 visitors per month with 10 to 20% starting a chat conversation), the API cost is $5 to $25 per month. This is the variable cost — you also pay for Bubble hosting ($29/month on the paid plan if you need a custom domain). Total running cost: $35 to $55 per month for a chatbot handling hundreds of customer conversations. Compare to the cost of a human answering the same questions.
Can I make the chatbot answer only from my knowledge document and not make things up?
Yes — this is called grounding and is controlled by your system prompt. Include this instruction: Answer only based on the information provided above. If a question is not covered by this information, say: ‘That’s a great question — I don’t have that information available right now, but a team member can help. Would you like to leave your email or book a quick call?’ Do not guess or invent information. This instruction dramatically reduces hallucination for business-specific chatbots.
Want Your AI Chatbot Built by Experts?
SA Solutions builds production-grade AI chatbots on Bubble.io — with custom knowledge bases, lead capture flows, conversation analytics, and CRM integration.
