DEV Community: NJOKU SAMSON EBERE

How to Connect Bubble to n8n Using Webhooks and the API Connector

NJOKU SAMSON EBERE — Tue, 17 Mar 2026 13:39:22 +0000

If you're building with Bubble, you’ve probably hit a point where workflows start getting complex.

That’s where n8n comes in.

Instead of forcing everything inside Bubble, you can offload automation, integrations, and background processing to n8n—while Bubble stays focused on your frontend.

In this guide, you’ll learn how to connect both tools using webhooks and the API Connector.

Why Connect Bubble to n8n?

Bubble is great for building apps fast.

But when you need to:

Run complex workflows
Integrate multiple services
Handle background jobs
Or plug in AI workflows

…it starts to get messy.

n8n solves this by acting as your automation engine.

Think of it like this:

Bubble → sends data → n8n → processes → triggers actions

How the Integration Works

At a high level, the flow is simple:

A user acts like Bubble
Bubble sends data via API Connector
n8n receives it through a webhook
n8n runs a workflow (automation)

This makes your app more scalable and easier to manage.

Step 1: Create a Webhook in n8n

In n8n:

Create a new workflow
Add a Webhook node
Set the HTTP method (usually POST)
Copy the webhook URL

This URL is where Bubble will send data to.

Step 2: Set Up API Connector in Bubble

In Bubble:

Go to Plugins → API Connector
Create a new API
Add a new call
Set method to POST
Paste your n8n webhook URL

Then define your request body (JSON format), for example:

{
  "name": "<name>",
  "email": "<email>"
}

Map these values dynamically from Bubble inputs or database fields.

Step 3: Trigger the Workflow from Bubble

Now connect it to a workflow:

Go to your Bubble workflow editor
Add an action → API Connector
Select the API call you created
Pass the data (e.g. user info)

Whenever this action runs, it sends data to n8n.

Step 4: Process Data in n8n

Back in n8n:

Add nodes after the webhook
Example actions:
- Send email
- Store in the database
- Call external APIs
- Trigger AI workflows

You now have a fully automated backend flow.

Step 5: Test the Integration

Trigger the workflow in Bubble
Check execution in n8n
Confirm data is received and processed

If something breaks, check:

Webhook URL
Request format
Execution logs in n8n

Real Use Cases

This setup is extremely flexible. You can use it to:

Send welcome emails on signup
Trigger AI content generation
Sync data with external tools
Build notification systems
Run background jobs outside Bubble

Key Advantage

This pattern gives you separation of concerns:

Bubble → UI + user interaction
n8n → automation + integrations

That alone makes your app easier to scale and maintain.

Watch the Full Tutorial

If you want to see the full step-by-step walkthrough, watch the video here:

Final Thoughts

If you're serious about building scalable apps with Bubble, integrating it with n8n is a smart move.

You stop forcing Bubble to do everything—and instead use the right tool for the right job.

How I Built an AI RAG App MVP with Lovable (Step-by-Step)

NJOKU SAMSON EBERE — Tue, 03 Mar 2026 11:02:22 +0000

Building AI products doesn’t have to take months.

In this article, I’ll walk you through how I built an AI-powered Tax Assistant MVP using Lovable — including the architecture decisions, knowledge base setup, and guardrails that made it production-ready.

This isn’t just about tools. It’s about product thinking.

Watch the full build here:
https://youtu.be/RYlnbu2jTjI?si=OXqbXqPk4p11SoXh

The Problem

Tax laws are complex, dense, and often buried inside long PDF documents. Small business owners and freelancers struggle to:

Find accurate information quickly
Understand compliance requirements
Interpret legal language

A simple chatbot isn’t enough. It needs context-aware answers grounded in official sources.

That’s where RAG comes in.

What Is a RAG App?

RAG (Retrieval-Augmented Generation) combines:

A knowledge base (structured documents)
A retrieval system (searches relevant sections)
An LLM (generates contextual answers)

Instead of generating answers from memory, the AI retrieves relevant documents first, then responds.

This reduces hallucination and improves accuracy.

Defining the MVP Scope

Before touching Lovable, I defined the boundaries.

Included in V1:

Ask tax-related questions
AI grounded in a structured knowledge base
Consultant listing
Clear disclaimer (educational use only)
Clean minimal UI
User accounts

Not Included:

Payment processing
Advanced compliance workflows
Legal advisory functionality

A tight scope keeps the MVP focused and realistic.

Step 1: Designing the Core Workflow

The architecture is simple:

User → AI → Knowledge Base → Contextual Response

The key decision here was to avoid raw prompting.
Everything needed to be grounded in documented tax regulations.

This is what separates a real AI product from a basic chatbot wrapper.

Step 2: Preparing the Knowledge Base

I sourced official tax documents and structured them into logical sections.

Why structure matters:

Smaller chunks improve retrieval precision
Categorization improves answer relevance
Clean formatting reduces hallucination

Most AI apps fail here. Garbage input equals weak output.

Step 3: Setting Up AI Guardrails in Lovable

This was critical.

I defined:

System instructions (educational tone, clarity)
Boundaries (no legal guarantees)
Refusal behavior when uncertain
Encouragement to consult professionals for complex cases

Guardrails are not optional when building AI tools in regulated domains.

Step 4: Adding Human Consultants

AI handles general questions.

Humans handle edge cases.

This hybrid model makes the product more credible and scalable long-term.

It also opens monetization pathways later.

Step 5: Disclaimers and Risk Positioning

The app clearly states it is for educational purposes only.

When building AI tools that deal with finance, health, or law, clarity protects both users and builders.

Never skip this step.

Lessons Learned

Here’s what I’d improve in V2:

Better document chunking strategy
Conversation history
Paid consultation booking
Industry-specific tax flows
Analytics dashboard

Building V1 isn’t about perfection. It’s about validation.

Final Thoughts

AI tools are becoming easier to build.

But strong AI products still require:

Clear problem definition
Focused MVP scope
Thoughtful knowledge base design
Guardrails
Long-term product thinking

If you're building AI SaaS or experimenting with RAG apps, I hope this breakdown helps.

Full walkthrough here:

Learn n8n Automation in 1 Hour – Complete Beginner Guide

NJOKU SAMSON EBERE — Tue, 03 Mar 2026 10:55:46 +0000

Automation is one of those skills that instantly upgrades how you work.

Instead of copying data between tools, sending repetitive Slack messages, or manually updating spreadsheets, you build a workflow once and let it run.

In this guide, I’ll show you how to get started with n8n and build your first real automation step by step.

If you’re a beginner, this is the right place to start.

What is n8n?

n8n is an open-source workflow automation tool that allows you to connect apps, APIs, and services.

At its core, every workflow follows a simple pattern:

Trigger → Process → Action

You define:

What starts the workflow
How the data should be transformed
What should happen next

And n8n executes it automatically.

What You’ll Learn in This Tutorial

In the full video, we build a practical workflow while covering the essential nodes you actually need to understand.

1️⃣ Triggers – How Workflows Start

Every automation begins with a trigger.

We cover:

Form submission trigger
Schedule trigger (run workflows automatically at specific times)

Once you understand triggers, you understand how automation begins.

2️⃣ Editing & Transforming Data

Incoming data is rarely clean or structured the way you want.

Using the Edit Fields node, you’ll learn how to:

Rename fields
Format values
Clean up incoming data

This is where automation becomes structured and reliable.

3️⃣ Conditional Logic (If/Else Workflows)

Real-world automation requires decision-making.

With conditional nodes, you can:

Run actions only if certain conditions are met
Create multiple branches inside a single workflow

This transforms simple workflows into intelligent systems.

4️⃣ Looping Through Items

When your workflow receives multiple items, you need to process each one correctly.

You’ll learn how to:

Loop through data
Handle multiple records properly

This is especially useful when working with lists or API responses.

5️⃣ Connecting External Tools

Automation becomes powerful when it interacts with real tools.

In this tutorial, we integrate:

Slack for notifications
Google Sheets for storing structured data

This is where workflows start producing real outcomes.

6️⃣ Error Handling

Things break.

APIs fail. Credentials expire. Data formats change.

Instead of letting workflows fail silently, you’ll learn how to:

Catch errors
Handle failures properly
Build more reliable automations

This is what separates experiments from production-ready systems.

7️⃣ HTTP Request Node (Unlocking APIs)

The HTTP Request node allows you to:

Connect to any API
Send or retrieve data
Build custom integrations

Once you understand this node, you’re no longer limited to built-in integrations.

Who Is This For?

This tutorial is perfect for:

Developers exploring automation
Founders building internal tools
Freelancers automating client workflows
Anyone tired of repetitive manual tasks

No advanced knowledge required.

🎥 Watch the Full Tutorial

If you want to follow along and build the workflow step by step:

Automation gives you leverage.

Start small. Build simple workflows. Add logic. Connect APIs.

That’s how you move from manual work to scalable systems.

Stop Using the Old Bubble API Plugin: Use the New Editor-Based API Connector

NJOKU SAMSON EBERE — Wed, 04 Feb 2026 10:22:46 +0000

Bubble has started moving away from the old plugin-based API Connector, and the new editor-based version makes that direction very clear.

If you rely on APIs in Bubble—especially for AI, payments, or third-party services—this is not just a UI refresh. It changes how API configuration fits into the overall Bubble building experience.

In this article, I’ll explain what the new API Connector is, what actually changed, what stayed the same, and why it’s worth switching now. I’ll also reference a practical demo using OpenAI’s Text-to-Speech API.

The Problem with the Old Plugin-Based API Connector

The plugin-based API Connector worked, but it always felt slightly detached from the rest of the editor. You had to jump into the plugin tab, configure endpoints in isolation, then mentally map them back to your workflows.

As Bubble apps grew more complex, this separation became friction:

API logic lived outside the main editor flow
Managing large or multiple APIs became harder to reason about
It didn’t feel like a core part of how Bubble wanted you to build long-term

Bubble’s new approach fixes that.

What the New Editor-Based API Connector Changes

The biggest improvement is where the API Connector lives.

It’s now part of the Bubble editor itself, which means API setup feels like a native step in building your app, not an add-on.

Key improvements include:

A cleaner, more structured interface for endpoints, headers, and parameters
Better visibility into how APIs fit into workflows
Less context switching when building or debugging
A setup that scales better as your app grows

It feels designed for serious apps, not just quick integrations.

What Stayed the Same

This is not a complete mental reset.

Most of the fundamentals still apply:

You still define endpoints with URLs, headers, and parameters
Authentication works largely the same way
Calls still need to be initialized
Responses are still reusable across workflows

If you’ve used the old API Connector before, you won’t feel lost.

Migrating from the Old Plugin

There’s currently no automatic migration from the plugin-based connector to the new editor-based one.

Migration is manual, but manageable:

Recreate existing endpoints in the new connector
Copy authentication, headers, and parameters
Initialize the calls
Update workflows to point to the new API actions

For most apps, this is more of a careful copy-and-verify process than a full rewrite.

Example: OpenAI Text-to-Speech with the New API Connector

To show how the new connector works in practice, I demonstrated calling an OpenAI Text-to-Speech endpoint directly from Bubble.

This example highlights a few important things:

AI APIs fit very naturally into the new connector
Configuration is clearer and easier to follow
The setup works cleanly with Bubble workflows

If you’re building AI-powered features in Bubble, the new connector makes these integrations feel much more first-class.

Why You Should Switch Now

The old plugin still works, but it’s clearly no longer the focus.

The editor-based API Connector is:

More integrated
Easier to maintain
Better aligned with modern Bubble apps

Switching early helps future-proof your projects and reduces technical debt later.

Watch the Full Walkthrough

I cover the full migration process, UI walkthrough, and OpenAI Text-to-Speech demo in this video:

If you build serious applications in Bubble and rely on APIs, this update is worth your attention.

Bubble Mobile Crash Course: Build a Real App from Scratch

NJOKU SAMSON EBERE — Tue, 27 Jan 2026 14:04:25 +0000

Building mobile apps with Bubble.io no longer feels experimental — it’s real, powerful, and ready for production. But if you’re just getting started, the mobile side of Bubble can feel confusing: new UI patterns, new components, and new ways of thinking compared to web apps.

That’s exactly why I created this Bubble Mobile Crash Course.

In this video, we go beyond theory and build a fully functional Task Manager mobile app with authentication, step by step. The goal is simple: help you understand Bubble mobile by actually using it.

👉 Watch the full video here:

What This Crash Course Covers

This is a practical, beginner-friendly walkthrough of Bubble’s mobile experience. We start from the basics and gradually build confidence as we move into real features.

1. Introduction & Documentation Walkthrough

We begin by understanding how Bubble’s mobile platform works, what it supports today, and how to read the documentation without getting overwhelmed.

2. Mobile Editor Walkthrough

Next, we explore the mobile editor and its layout. You’ll learn how Bubble structures mobile screens and how navigation differs from traditional web pages.

Core Mobile Concepts Explained

Before building the app, we break down the key building blocks you’ll use in almost every Bubble mobile project:

Views – How mobile screens are structured
Lists – Displaying dynamic data
Sheets – Bottom sheets and contextual UI
Images – Handling user images and visuals
Forms – Collecting and validating user input
Authentication – Signup, login, and user sessions
Stacks vs Modals – When to use each and why it matters

These concepts are explained in context, not in isolation, so you can immediately see how and why they’re used.

Building the Task Manager Mobile App

To make everything stick, we build a real project: a Task Manager app with authentication. This isn’t a toy example — it’s the kind of structure you can reuse for real products.

Features We Build

Home page layout
User authentication (signup & login)
View all tasks
Add new tasks
Edit existing tasks
Update task status
Delete tasks
Tab navigation setup
Settings page
Logout functionality
Update user profile information
Update user photo
Update user credentials

By the end, you’ll have a complete mobile app flow and a strong mental model for building your own.

Who This Video Is For

This crash course is ideal if:

You’re new to Bubble mobile
You’ve built Bubble web apps and want to move into mobile
You want a practical, end-to-end example instead of isolated demos
You’re building an MVP or prototype and need mobile support

Why This Approach Works

Instead of jumping between disconnected tutorials, this video keeps everything in one place:

Learn the concepts
Apply them immediately
See how they fit together in a real app

That’s the fastest way to build confidence with Bubble mobile.

Watch the Crash Course

If you want a clear, practical introduction to building mobile apps with Bubble.io, this video will give you a strong foundation.

👉 Watch here: https://youtu.be/acDWR5tXP0U

If you have questions or ideas for follow-up videos, drop them in the comments. I’m happy to build on this.

Build a Full Cart, Ordering & Stripe Payment System in Bubble (Canvas Framework)

NJOKU SAMSON EBERE — Tue, 27 Jan 2026 14:01:45 +0000

Building a real e-commerce or ordering system in Bubble goes far beyond adding a checkout button. You need proper cart logic, a clean data structure, reliable order flows, and a payment setup that won’t break in production.

In this tutorial, I walk through how to build a full cart, ordering, and Stripe payment system in Bubble using the Canvas framework, step by step, with real-world considerations.

👉 Watch the full video here:

What This Tutorial Covers

This is not a surface-level demo. The focus is on building something you can actually ship.

Here’s what you’ll learn in the video:

1. Product Listing & Cart Logic

You’ll see how to structure products and handle cart state properly in Bubble:

Adding products to a cart
Updating quantities
Removing items
Preventing duplicate cart entries

This approach avoids common mistakes that lead to messy workflows and broken totals.

2. Structuring Cart & Order Data

One of the biggest issues I see in Bubble apps is poor data modeling.

In this tutorial, I show:

How to structure cart items vs orders
When to create an order
How to convert cart items into order items cleanly
How to keep your database scalable as usage grows

This is especially important if you’re building a marketplace or multi-vendor app.

3. Order Creation & Status Flow

Once a user checks out, you need a reliable order lifecycle.

We cover:

Creating orders from cart items
Managing order statuses (pending, paid, completed, etc.)
Ensuring orders are only confirmed after successful payment

This helps you avoid scenarios where users get access without paying or payments don’t map correctly to orders.

4. Stripe Payment Integration

Stripe integration is one of the most requested topics in Bubble.

In the video, you’ll learn:

How to connect Stripe to your Bubble app
Triggering payments from the checkout flow
Handling successful and failed payments
Linking Stripe payments back to orders

All demonstrated within the Canvas framework setup.

5. Using the Canvas Framework the Right Way

Canvas gives you structure, but only if you use it properly.

I also explain:

How to organize workflows cleanly
Where logic should live in a Canvas-based app
How to keep your app maintainable as features grow

This is especially useful if you’re building client projects or long-term SaaS products.

Who This Tutorial Is For

This video is ideal if you:

Already have basic Bubble knowledge
Are building an e-commerce, ordering, or marketplace app
Want to integrate real payments with Stripe
Care about clean data structure and production readiness

If you’ve struggled with cart logic or messy Stripe setups before, this will save you time and frustration.

Watch the Full Tutorial

If you found this helpful, consider subscribing to the channel. More Bubble, Canvas, and real-world app tutorials are coming.

Using APIs in Bubble Native Mobile Apps

NJOKU SAMSON EBERE — Tue, 27 Jan 2026 13:58:11 +0000

APIs are at the core of most modern mobile applications. Whether you’re pulling data from an external service, triggering workflows, or adding AI-powered features, understanding how APIs work in Bubble native mobile apps is no longer optional.

In this tutorial, we walk through how to use APIs in Bubble’s native mobile environment, highlight key differences from Bubble web apps, and build practical examples using a public API and OpenAI.

Why APIs Matter in Bubble Mobile Apps

Mobile apps rely heavily on external services. From authentication and payments to AI and analytics, APIs are how your app talks to the outside world.

In Bubble’s native mobile apps, API usage follows the same core principles as web apps, but there are important differences in when and how API calls are triggered, especially when working with workflows and UI elements.

What Is an API? (The Bubble Way)

An API (Application Programming Interface) allows one application to send requests to another application and receive responses in return.

In Bubble, APIs are typically handled through the API Connector, where you:

Define the request (endpoint, method, headers, parameters)
Initialize the call
Decide whether the API should be used as data or as an action

Understanding this distinction is critical for mobile apps.

Integrating a Public API in a Bubble Mobile App (Pokémon API)

To keep things simple, we use a public Pokémon API as our first example.

Step 1: Set Up the API Connector

Add the API Connector plugin
Create a new API with a GET request
Point it to the Pokémon API endpoint
Initialize the call to expose the data in Bubble

Step 2: Use the API Data in the Mobile UI

Bind API data to mobile UI elements
Display text and images returned from the API
Handle loading states properly for a smooth mobile experience

This approach mirrors real-world use cases like pulling product data, user profiles, or analytics from external services.

API Data vs API Action in Bubble (Very Important)

This is one of the most misunderstood parts of using APIs in Bubble.

API Data

Used when you want to fetch and display data
Automatically refreshes when parameters change
Ideal for lists, repeating groups, and dynamic UI elements

API Action

Used when you want to trigger something
Runs inside workflows
Ideal for form submissions, button clicks, and background processes

In native mobile apps, choosing the wrong one often leads to confusing bugs or unexpected behavior.

Calling the OpenAI API in a Bubble Mobile App

Once you understand the basics, adding AI becomes much easier.

Setting Up OpenAI

Create an OpenAI API call in the API Connector
Secure your API key
Structure the request body correctly

From here, you can trigger OpenAI using workflows or fetch responses as data depending on your use case.

Retrieving Images from OpenAI

Using OpenAI’s image generation endpoint, you can:

Send a prompt from your mobile app
Receive an image URL in response
Display the image directly in the mobile UI

This is useful for AI avatars, creative tools, or dynamic visual content.

Retrieving Text Responses from OpenAI

Text-based responses are just as powerful.

In the tutorial, we show how to:

Send user input to OpenAI
Retrieve the generated response
Display it cleanly in a mobile-friendly layout

This pattern can power chatbots, assistants, and smart content features.

Final Thoughts

APIs unlock the real power of Bubble native mobile apps. Once you understand how to integrate external services, choose between API Data and API Actions, and structure your workflows correctly, you can build highly capable mobile applications without writing traditional code.

If you’re serious about building mobile apps with Bubble or adding AI features, mastering API integration is a must.

🎥 Watch the full video tutorial here:

If you’d like to see more tutorials like this, including real-world SaaS and AI use cases, stay connected and follow along.

Build Websites with GrapesJS AI: From Resume PDFs to Landing Pages

NJOKU SAMSON EBERE — Tue, 27 Jan 2026 13:53:36 +0000

Building websites no longer has to start from a blank canvas or endless boilerplate. With GrapesJS AI, you can generate complete websites using prompts, existing documents, and visual editing workflows.

In this article, I walk through how GrapesJS AI can be used to build different types of websites quickly and practically — based on a recent hands-on video tutorial.

What Is GrapesJS AI?

GrapesJS is a visual web builder known for its flexible drag-and-drop editor and extensibility. With AI added into the workflow, it becomes even more powerful — helping you generate layouts, content, and entire pages using prompts or existing assets.

Instead of manually assembling every section, GrapesJS AI helps you:

Convert documents into structured web pages
Generate layouts and sections automatically
Modify and extend designs visually
Move faster without losing control of the output

It’s a solid middle ground between traditional frontend development and no-code tools.

Use Case 1: Resume (PDF) to Personal Website

One of the most interesting workflows is turning a resume PDF into a personal website.

Using GrapesJS AI, you can:

Upload or reference a resume document
Generate a structured personal website layout
Automatically map sections like About, Experience, Skills, and Contact
Visually tweak the design using the editor

This is especially useful for developers, designers, and freelancers who want a quick online presence without redesigning their resume from scratch.

Use Case 2: Cloning Existing Websites

Another practical feature is website cloning.

In the video, I show how GrapesJS AI can help recreate existing website layouts by:

Analyzing page structure
Rebuilding sections using editable components
Allowing you to customize content and styling

This isn’t about copying blindly — it’s about using existing designs as a starting point and adapting them to your own needs.

Use Case 3: Building Landing Pages with AI

Landing pages are one of the most common website needs, and GrapesJS AI makes this straightforward.

You can:

Prompt the AI to generate a landing page layout
Get pre-structured sections like hero, features, testimonials, and CTA
Adjust spacing, colors, and content visually

This is ideal for startups, product launches, and quick experiments where speed matters.

Use Case 4: Using GrapesJS Starter Templates

If you prefer not to start from AI-generated layouts, GrapesJS also provides starter templates.

These templates:

Give you a solid design foundation
Are fully editable with the visual editor
Work well when combined with AI-generated content

In the tutorial, I show how templates and AI can be used together rather than as separate workflows.

Who Is This For?

This approach works well for:

Frontend developers who want to prototype faster
No-code and low-code builders
Founders validating ideas
Freelancers building client websites
Anyone curious about AI-assisted web development

You still maintain control over structure and design — the AI just removes a lot of repetitive work.

Final Thoughts

GrapesJS AI isn’t about replacing developers. It’s about speed, iteration, and flexibility.

By combining AI generation with a visual editor, you can move from idea to working website much faster — whether that’s a personal portfolio, landing page, or cloned layout you plan to customize.

If you want to see all of this in action, the full walkthrough is available here:

🎥 Watch the video: https://youtu.be/B7LvTTQnpAI

If you’re experimenting with GrapesJS AI or similar tools, I’d be curious to hear what you’re building next.

How to Build a Fully Responsive Website with Bubble

NJOKU SAMSON EBERE — Sat, 09 Aug 2025 16:51:49 +0000

Building a website in Bubble is quick and powerful — but if it’s not responsive, your design could look great on desktop and completely break on mobile or tablet.

In this tutorial, I walk you through how to create a complete website in Bubble and make it look perfect on all devices using the responsive engine.

🚀 What You’ll Learn

By the end of this tutorial, you’ll know how to:

Structure your Bubble website layout for flexibility
Use Groups and Containers effectively
Work with Bubble’s Responsive Tab
Test your site on desktop, tablet, and mobile views
Apply pro design tips for clean, mobile-friendly layouts

💡 Why Responsiveness Matters

With most users browsing on mobile devices, a non-responsive website can hurt user experience and SEO rankings. Bubble’s responsive engine makes it easier than ever to create designs that adapt beautifully across screen sizes — if you know how to use it.

🔗 Watch the Full Tutorial

👉 Watch Now on YouTube

Whether you’re a Bubble beginner or an experienced no-code builder, this guide will help you save hours of trial and error and give your users the best possible experience.

🏷️ Tags

Bubble #NoCode #ResponsiveDesign #WebDevelopment #LearnBubble #WebDesign #UIUXDesign

How to Use Reusable Elements in Bubble.io (Pass Data In & Out)

NJOKU SAMSON EBERE — Wed, 30 Jul 2025 13:49:05 +0000

Bubble's Reusable Elements help you build cleaner, more scalable applications. Whether you're building a dynamic UI, reusable modals, or consistent layouts, mastering how to pass data into and out of reusable elements is essential.

In this tutorial, you'll learn:

✅ How to create a Reusable Element

✅ How to use it on any page

✅ How to pass data from a parent page or group to the Reusable Element

✅ How to pass data back from the Reusable Element to the parent using workflows or custom states

📺 Watch the full video tutorial here:

🧩 What Are Reusable Elements?

Reusable Elements in Bubble are like components in traditional development. They allow you to design something once—like a modal, card, navbar, or popup—and use it across multiple pages or contexts.

Instead of duplicating logic, UI, and workflows, you simply reuse the element, making your app easier to manage and update.

🛠️ How to Create a Reusable Element

In the Bubble Editor, go to the Reusable Elements section.
Click “New Reusable Element”.
Give it a name (e.g. ProductCard, UserModal, or NotificationPopup).
Design your element inside the editor.

➡️ Passing Data from Parent Page to Reusable Element

To allow a reusable element to receive data:

Open the Reusable Element editor.
Set the Type of Content (e.g. User, Product, Transaction).
Inside the element, use This Reusable Element's [field] to display or use data.
On the parent page, select the element and set its data source (e.g. Current Page's User or Parent group's Product).

📌 Tip: You can also add custom states if you want more control over what gets passed in.

⬅️ Passing Data from Reusable Element to Parent

There are two main ways to pass data back up to the parent page or group:

1. Trigger a Custom Event

In the reusable element, create a workflow like "When button is clicked".
Use the action “Trigger a custom event in the parent element”.
On the page, define that custom event and what to do when it runs (e.g., update a state, show a popup, etc.).

2. Set Custom State on Parent

Add a custom state to the parent page or group.
From inside the reusable element's workflow, set the value of that state.
Use that custom state to drive the parent page's logic.

✅ Example: When a user selects a product in a reusable ProductCard, you update a custom state on the page with the product's ID.

💡 Use Cases for Reusable Elements

Modals (Login, Edit Profile, Confirm Delete)
Custom Cards (User, Product, Article)
Navigation Bars / Sidebars
Notification Systems
Search Filters or Sort Dropdowns

📺 Watch the Full Video Tutorial

I walk you through each step visually with a working example.

👉 Watch here: https://www.youtube.com/watch?v=Hz12QY8nBdE

🔁 Final Thoughts

Reusable Elements are a must-have skill if you're building anything more than a simple MVP with Bubble. Mastering how to pass data in and out makes your app dynamic, modular, and much easier to maintain.

Let me know in the comments:

What reusable elements are you building?
Do you want to see how to make reusable popups, forms, or search components next?

📣 Stay Connected

I create weekly tutorials on:

Bubble.io development
No-Code best practices
Building real-world apps with performance in mind

📌 Subscribe on YouTube → https://www.youtube.com/@njokusamsonebere2589

📌 Follow me on LinkedIn → https://www.linkedin.com/in/samson-ebere-njoku-profile/

🏷 Hashtags

Bubble #BubbleTutorial #BubbleReusableElements #NoCode #NoCodeTools #WebDevelopment #PassData #ReusableComponents #Bubbleio

🗳️ Build a Poll, Election, or Voting App in Bubble — No Code Needed!

NJOKU SAMSON EBERE — Fri, 18 Jul 2025 07:05:32 +0000

Do you want to build a voting or polling app without writing a single line of code?

Whether you're organizing a:

🏫 School or campus election
🧠 Product feedback survey
🧑‍🤝‍🧑 Community vote
🧪 Quick idea validation

This step-by-step tutorial on Bubble is exactly what you need!

🎥 Watch the Full Tutorial

👉 How to Build a Poll, Election, or Voting App in Bubble

✅ What You'll Learn

This complete no-code tutorial walks you through:

Setting up your Bubble database (Polls, Options, Votes, Users)
Designing a clean UI for creating and voting in polls
Preventing duplicate votes from users
Dynamically displaying poll results
Managing workflows and logic in Bubble
Tips for launching a real-world MVP

All using Bubble’s powerful drag-and-drop visual editor — no technical background required!

🚀 Why This Tutorial?

This is more than just a UI demo — it’s a real-world app you can use for:

Startup experiments
Community voting tools
Classroom activities
HR or team decision-making tools

By the end of this video, you'll have a fully functional app that you can customize, share, or even sell.

🔧 Who Is This For?

💡 Beginners to no-code
🧱 Bubble.io learners
🧪 Startup founders & makers
🎓 Educators and event organizers

🔗 Watch Now

Don’t miss this one!

🎥 Watch the tutorial on YouTube

Got questions or building something similar? Drop a comment or connect with me on LinkedIn!

#nocode #bubble #bubbleio #votingapp #pollapp #tutorial #webdevelopment #startup #buildinpublic

🔐 Mastering Authentication in Bubble: A Complete Guide (with Social Login, Magic Links & More)

NJOKU SAMSON EBERE — Mon, 30 Jun 2025 11:08:36 +0000

Authentication is one of the most important—and sometimes frustrating—parts of any web application. Whether you're building a startup MVP, client portal, or internal tool with Bubble, getting authentication right is critical.

That’s why I created a complete in-depth Bubble authentication tutorial, covering everything from email signups to Gmail login, password recovery, and even how to create user accounts as an admin.

👇 Watch the full tutorial here:

✅ What You’ll Learn

This is more than just a signup/login flow. I take you through real-world authentication use cases—the kind of flows you’ll actually implement when building apps for yourself or clients.

🔸 Regular Authentication

Sign up with email and password
Send a verification email to users
Verify email addresses in Bubble
Send a welcome email and mark user as verified
Log in and log out users
Handle forgot password functionality
Implement a Magic Link login flow

🔸 Social Login (OAuth)

Enable Gmail login
Enable GitHub login

🔸 Admin: Create Account for Another User

Create a new user as an admin (without them signing up)
Set a password for that user
Trigger a custom email to onboard them

🛠️ Why This Matters

Many tutorials skip important details—like sending verification emails or structuring workflows properly. In this video, I not only show you how to do these things, but also explain why they matter.

You'll walk away with:

Clean, scalable authentication flows
Best practices for security & user experience
The confidence to implement auth in any Bubble app

💬 What Others Are Saying

“The Magic Link and social login parts were super clear. Thanks for breaking it all down, Samson!”

“Finally got verification emails working thanks to this!”

“Loved the admin account creation section. So useful for SaaS tools!”

🚀 Start Building

If you're looking to save time and implement Bubble authentication the right way, this guide is for you.

🎥 Watch now:
👉 https://www.youtube.com/watch?v=dhy9a_hS_Is

If you find it helpful, drop a like, leave a comment, and share with other Bubble builders. Let's keep building powerful, secure no-code apps together 💪