Explore 300 Bubble tutorials
Build your dream no code SaaS and dive into our comprehensive bubble tutorials
Filters
Sort by

Better checkboxes and toggles
In this Bubble tutorial video we demonstrate how you can quickly improve the look of checkboxes in your Bubble app by adding an Ionic Toggle.
Design
Checkbox
Plugins

Generate version specific webhook URLs
In this Bubble.io tutorial, we dive into the intricate world of webhooks in data processing for your Bubble app. If you're using a third-party service like AssemblyAI, a high-performing speech-to-text API, this video is a must-watch. We address a common issue where the webhook works perfectly in the development version but fails in the live version - a problem that can be easily solved with the right approach.
Workflow
Backend Workflows
Webhooks

How to create a consistent margin around page content using Groups
In this Bubble.io tutorial video we demonstrate how to achieve a consistent and clean layout with a 20 pixel margin surrounding the inner content of your page in the Bubble editor.
Design
Margins & Padding

Build a no-code chatbot with custom knowledge base in 5 mins
In this Bubble tutorial, we show you how to quickly set up a custom chatbot powered by your own knowledge base using Voiceflow. Learn how to create an interface to upload documents, submit URLs, and engage with the Voiceflow API to get query data back from your knowledge base within your Bubble app. No more struggling with tricky chatbot setups in Bubble - we've got you covered with this step-by-step guide. Watch now to level up your chatbot game!
Plugins
API Connector
Voiceflow

Building Smarter No-Code Chatbots in Voiceflow: An Introductory Guide
In this video, we're showcasing Voiceflow, an incredible no-code chatbot creation tool that integrates seamlessly with Bubble. If you're looking to build an AI chatbot, particularly a chatbot that provides a knowledge base and responds based on its contents, then you need to check out Voiceflow.
Plugins
API Connector
Voiceflow

Build Your Own No-Code Custom GPT
Learn how to build your own custom GPT with no-code, Bubble.io, and the OpenAI API in just 20 minutes! Capitalize on the power of no-code development and the ease of Bubble.io to customize AI for your unique business needs. Get started in the world of AI without needing extensive coding knowledge, making the process more accessible and cost-efficient. This video will guide you on how to streamline business operations, transform customer experiences, and tap into new revenue streams in the AI market, all with the power of no-code AI development.
Plugins
API Connector
OpenAI
formatted as JSON-safe

How to update Font Awesome to V6
The Bubble.io icon library is stuck with Font Awesome version 4 because V4 is not backwards compatibility with Font Awesome's most recent release version 6. In this Bubble tutorial video we demonstrate a work around that'll help you import the latest Font Awesome icons into Bubble.
Design
Icons
Font Awesome

How to set color hex code opacity in Bubble.io
In this Bubble tutorial video we share a quick color opacity trick at that came up in a Bubble Coaching call. Learn how you can make your hex code colors semi-transparent in this video.
Design
Background
Icons
Database
Option Sets

AI Images with Bubble.io using OpenAI DALL-E 3
In this Bubble tutorial we demonstrate how to use the OpenAI DALL-E 3 API to generate AI images in your Bubble app.
Workflow
Database
Plugins
Design
OpenAI

Dynamic icons with Option Sets
In this Bubble.io tutorial we demonstrate how to use add Font Awesome icons to an Option Set and how to express a colour hex code within an Option Set.
Design
Icons
Database
Option Sets
Font Awesome
No results found.
There are no results with this criteria. Try changing your search.