Build AI Chat & Voice Assistants with Bubble, OpenAI & VAPI

Build an internal login in a Bubble app with email verification before the dashboard, including email and password inputs, a forgot password reset flow, and a verification code step.

Build a multi-step login flow in Bubble with URL-driven visibility for login, password, and verify, generate and email a six-character verification code, then verify to access the dashboard.

Test the reset password page for responsive design by switching to column layout and removing fixed widths. Validate forgot password flow, including new and confirm passwords, reset email, and login.

Configure a dashboard with a navigation sidebar and conditional visibility, and build four reusable elements (widgets, conversations, leads, and settings) to manage widget settings, conversations, and the OpenAI key.

Design a settings page wireframe using reusable elements, featuring a FAQ section, an OpenAI API key field, and a user management area with an add admin pop-up.

Create and customize a reusable leads element for the dashboard, displaying lead details (first name, last name, email, phone, creation date) with icons to view conversations and download the list.

Build a reusable conversations element and wireframe conversations and message tabs, detailing a chat layout with a conversations list, selected message pane, read/unread indicators, empty state, and a send input.

Create a wireframe for chat conversations by building a reusable chart widget in Bubble, configuring color, avatar, headlines, and preview, while adding color picker and copy-to-clipboard plugins for easy setup.

Configure a reusable dashboard page by assembling a navigation group for conversations, leads, widget configuration, and settings; implement page url parameter driven visibility, defaulting to conversations, and test via preview.

Design a live chat page wireframe that mirrors the chat widget, acts as the iframe foundation for client-site conversations, and toggles between welcome messages and the repeating group.

Configure the settings page data and workflows for user management, including adding users, admin roles, invitation emails, and a FAQ pop-up with delete confirmations.

Build and test an FAQ system in setting page part 2 with grouped controls, auto-binding and privacy rules, and configure an OpenAI key workflow to train a real estate chatbot.

Configure the leads page in bubble, linking leads to conversations and exporting name, email, phone, and creation date to CSV, noting the backend workflows location.

Configure conversations, leads, and messages in a Bubble app, linking conversations to leads, displaying last messages, filtering archived chats, and using page URL parameters to navigate and update read status.

Configure the widget's color, headlines, and message, set avatar and icon, validate the live preview, and copy and install the code to embed the widget iframe on client sites.

configure the chat widget html, set up a widget organization and organization name inputs, adjust privacy settings and auto-binding, and tailor the chatbot layout with max height controls.

Learn to install and embed a chat widget by pasting HTML code, copying text to clipboard with the hair clipboard plug-in, and configuring widget colors, icons, and URLs.

Configure the chat widget with popup in bubble mode, paste and adjust the embed code, set bubble text and welcome messages, verify icon and url settings, and preview on pages.

Configure and deploy an OpenAI based real estate chatbot by creating API keys, setting system instructions and functions, and integrating via Bubble iframe for lead qualification.

Configure a bubble chatbot and connect it to OpenAI with the API connector, managing threads, messages, and runs while handling status flows and function calls for leads.

Master send message configuration for AI chat and voice assistants built with Bubble, OpenAI, and VAPI, enabling seamless messaging workflows in your app.

Master configuring the send message button, trigger OpenAI submit to, and automatically create leads linked to conversations by extracting name and phone, with status-driven actions.

Apply role-based privacy settings to restrict access, automatically log out non-admin users, and enforce backend rules for users, leads, conversations, and messages; secure OpenAI keys and assistant IDs, test thoroughly.

Demonstrates loading chat messages from the bottom up with an inverted repeating group plugin and id-based configuration. Covers lead navigation, UI tweaks, and key security practices for storing OpenAI keys.

Refine live chat styling with a dark blue palette, reorient lead and bot bubbles, enable fit-to-content messages, and add a Lottie typing indicator using PayMe for testing.

Optimize OpenAI costing and prompts for a real estate chatbot, managing billing, tokens, and system instructions to keep responses aligned with real estate needs.

Discover how to build and test voice agents with VAPI, configure AI assistants for website chats and calls using OpenAI, manage voices, tools, knowledge bases, and monitor activity via dashboard.

Configure your assistant with a first message and system prompt, and publish Paul. Set up api keys for OpenAI or Anthropic and test with voice options in Bubble.

Install and configure your VAPI chat assistant on Bubble, create a tool to extract lead name and phone number from conversations, and validate with backend workflows and API tokens.

Connect the VAPI chat assistant to bubble.io to capture real estate leads, detect data, and manage conversations with API workflows, extracting names and phone numbers for sales follow-up.

Configure the Ken assistant in VAPI Connect using templates and system prompts, then integrate tools to extract client name and phone number and capture conversations and messages.

Configure the assistant for better performance by managing OpenAI tokens and WAPI, handling voice and chat conversations, and setting bot, user, and lead roles in Bubble and VAPI deployment.

Install the VAPI voice assistant on a WordPress site by pasting the web snippet and configuring your assistant ID and API keys, then ensure https.

Map the VAPI tool call ID to leads and conversations using a session ID and the first two-call ID, linking via backend workflows and configuring a chat and voice toggle.

Demonstrates final recording and testing of a voice agent and chatbot, showcasing real estate lead qualification, conversation capture, and dashboard integration with OpenAI and Bubble.