Opening a popup on page load in Bubble
Workflows UI

Opening a popup on page load in Bubble

Himanshu Sharma
Himanshu Sharma

Table of Contents

URL parameters are a great way to open different popups after the page has loaded.

This could be to show an image, display a message, video or popup etc. You can use URL parameters to do A/B testing and schedule email broadcasts.

If you're interested in using URL parameters, then keep reading this short tutorial.

Say a visitor lands on a specific page and you want to show a popup with a payment alert or a message from the admin. In this Bubble tutorial, I will go over how you can create a workflow which will show a popup on landing on a specific page.

URL parameter and key

We need to decide a URL parameter that we'll be passing. Bubble will check the URL for this parameter, and if found, will trigger a workflow. I've named my parameter as open and the key will be yes.

You can keep anything as the parameter name and the key. It's upto you. Here's a guide that'll get you up to speed on URL parameters.

How to use URL parameters in Bubble.io
You can use URL parameters to pass information between pages and trigger workflows in Bubble.io.

Triggering the workflow

To trigger the workflow everytime a user lands on the page, we'll be using the "Page is loaded" event.

This workflow will be triggered everywhere the page is loaded or refreshed.

Next, we need to put a condition on this workflow as we want it to be triggered only when the URL contains our selected parameter.

Now unless the URL has this parameter, this workflow will not run. We could've defined this condition at the Step level as well rather than the workflow level, but it is always better to have different workflow for different scenarios.

What if we remove this parameter from the URL?

If you remove this parameter from the URL, either manually or using some workflow, the popup will not open. As the Only when condition that we've defined at the workflow level will not get fulfilled, all the steps in that workflow will be disregarded.

How to remove the URL parameter using workflows?

Let's say that you ask the user to fill in some information in the popup and press a button to save it to the database.

You can add another step in the workflow where you're saving the data to your database. That step will be to simply take the user to the same page where they are currently, but without sending this parameter.

How to use URL parameters in Bubble.io
You can use URL parameters to pass information between pages and trigger workflows in Bubble.io.

Editor - https://bubble.io/page?type=page&name=url_param_popup&id=nocodeassistant-tutorials&tab=tabs-1

Preview - https://nocodeassistant-tutorials.bubbleapps.io/version-test/url_param_popup?open=yes


If you need some help with your Bubble app or if you need a team of Bubble developers to build a Bubble app for you, reach out to me at [email protected]. You can also follow me on Twitter.



Join the conversation.