Opening a popup on page load

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. A great way to do this is by using URL parameters. In this post, 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.

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 at the 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.

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 himanshu@nocodeassistant.com. You can also follow me on Twitter.

--

--

--

I help people bring their ideas to life with Bubble. http://nocodeassistant.com/

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

How big MNC’s like Google, Facebook, Instagram etc stores, manages and manipulate Thousands of…

Sentinel Validator Delegation Criteria

BlogPost_Week6

Back2Basics: Scala Extractors in Detail

knoldus-advt-sticker

Comparing Linux Mint and Fedora: Which One Should You Use?

fedora 34 about

How To Set An Element Horizontal & Vertical Align Center-CSS Layout ?

A Article’s cover photo which is showed align center

Top 10 Programming Languages to learn in 2022

Builder Pattern 🧑‍💻

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Himanshu Sharma

Himanshu Sharma

I help people bring their ideas to life with Bubble. http://nocodeassistant.com/

More from Medium

Admin privileges and access

A Sneak Peek at Joget DX 8: Focus on User Experience and Governance

How to create an app without writing a single line of code

A headless open-source ecommerce platform to maximize page speed and SEO performance

Medusa Commerce