Introduction
Popups are one of the most commonly used elements across the web.
You can use them for a wide array of options, such as editing something, typing information or collecting email for a newsletter.
In this article, we are going to take a look at a few ways you can use popups in Bubble.io, and how to set them up in your app !
If you want to go further in Bubble, you can also read our article on how to add pagination to a table element in Bubble.
Using a bubble.io popup to capture emails
One of the most basic ways to use a popup is to simply to collect emails.
It's a fairly basic approach, all you need is a popup, and a trigger to open it.
In the example below, you'll see that I took a pre-built one from Nocodable Component's library.
The way it's built is similar to most elements in Bubble. I've set it's layout to Column and put my elements inside it.
I've also added a button to open the popup, using a "Show an element" action
Once your popup is built, you can go ahead and create your logic to collect the email.
To close it, simply add a "Hide an element" action on an icon.
Now, the thing with this approach is that it's a bit too basic. We have to rely on a user's action to show display our modal.
Obviously, this is not the best approach to collect emails on your website.
Open a popup when your user leaves your website
Now, I've got a cool quick tip for you.
A more effective way to collect emails from your website is to detect when your user tries to leave the page.
This approach is used on a lot of websites, and it is a great way to collect emails and re-engage these users in email sequences.
Most of the time, you'll have to give your user a free ressource in exchange of their email, like in the example below :
The tricky thing with this approach is to be able to detect when your users are going to close your website.
Most of the time this needs some custom code, that will detect if the mouse is getting close to the "close" button of their browser.
But there is another approach, that does not require to write code (yep, that's the cool quick tip) !
To do this, you can use this plugin made by Rapid Dev. It enables you to detect when your user's mouse is approaching a closing area and trigger a workflow that will open your popup.
To configure, start by installing the plugin to your bubble app.
Once it's installed, you will se a new element you can add named "detect"
Go ahead and add one to your page :
Now that this elements has been dragged to your page, it will watch user's behavior and can be triggered with some specific conditions.
All we need now is to add some workflows to make this work :
Start by finding the action "A detect User wants to leave page" and click it.
Then add a "Show an Element" action to show your popup, and you're all set !
Now each time a user tries to leave your site, you can try and get their email.
Using a popup in bubble to edit information
One other ways to use popups in bubble is to build your app's interface with it.
It's a great way to enable your users to enter specific information, choose a paid plan or edit and item's information.
Even though the basic creation of the popup stays the same, the tricky thing here is to handle data.
Let's take this example :
As you can see, this table displays a list of peoples, with their First and Last name, their email and their team.
I've also built a basic popup that is being shown when clicking on the "Edit" button.
It's purpose will be to let use modify the information of each users.
By default, if you try to simply use a "Show an element" action to open it, you'll see that the inputs inside it are not filled with user's information.
This is because we didn't pass any data into our element, and therefore it cannot display anything.
To do that, you'll have to do three things :
- Set the content type of your element (the match the content type of your table)
- Send the data to the popup
- Display the relevant data into the inputs
Set your popup's content type
This is a crucial information because without this step, we won't be able to pass our data through the popup.
To do this simply open your popup's property panel, and set the "Type of content" to the same that the one in your table (in my case, it is Users) :
You can let the "Data Source" empty for now, because we'll pass it in the next step.
Send the data to the popup
Now that our Content Type is set, we need to actually send the data from our Table to our Popup.
To do this, we need to modify the workflows that opens our modal and add a "Display Data in a Group/Popup" action.
This action, like its name suggest is used to send data to a popup or a group.
Basically, it fills the "Data Source" field that we left empty in the previous step.
Now in this step you need to make sure of one thing : the Data Type of the data you send in the "Data to Display" field needs to be the same as the popup's "Type of Content".
Otherwise, you'll get an error.
Display the relevant data into the inputs
Now comes a more tedious step.
We need to pass the data stored in our element within all our inputs.
To do this, simply display your data into your inputs like this :
Repeat for each inputs, and you're all set !
Saving our modifications
Now comes the last part : saving the modification.
Obviously, we want this modal to be able to modify the actual thing.
To do this, you can simply use a "Make changes to a thing" action, and use the Popup's data as the actual thing.
In this case, mine displays a User, so I'm going to "Make changes to a User" and use my popup's data, like below :
And there you go !
Also, on't forget to add a "Hide an element" action after saving your modification to close the modal !
Using a multi-step popup to onboard your users
One more way to use popups in Bubble is to create Multi-Step popups.
You can use them to onboard Users and help them learn how to use your product, or let them enter information step by step (which is a good practice for long forms).
We won't come back to how to display data and how to build it because we covered that earlier.
In this part, we'll focus on actually displaying different screens within popups.
To illustrate this, I'll be using a Multi-Step Modal I imported from Nocodable Component's Library.
As you can see, it has a few different screens, within which I can navigate using two buttons.
Something pretty basic.
To make this work you'll need to use :
- A custom states
- A few workflows
- Some conditionals
Setting up our custom state
If you don't already know, custom states are a way to store temporary information on a Bubble element.
You can store pretty much any type of information into them. Custom states are temporary because if the page is reloaded (in case of a refresh for example), the custom states is emptied.
So don't try to store any long-lasting data, because you won't be able to.
However, in our case this is pretty handy because we are going to use it to keep track of what screen our popup should display.
In other words, at which step the user is currently at !
So let's go ahead and create a Custom State on our popup :
As you can see, I've set my custom state to a "Number" type, and set it's default value to 1.
Now, what we need to do is simply update this custom state to reflect the current step.
Setting up our workflows
Alright, let's now work on adding relevant workflows to our button !
Let's start by setting up the "Next" button. Obviously, this button will take the User to the next step.
So basically, we'll add +1 to the current step.
Translated in a workflow, here's how it looks :
And now let's make the opposite for the "Back" button :
And there we go, our workflow is set up !
Now we simply need to display the corresponding screens depending on the step.
Displaying the relevant screens
And to do this, we'll need a few conditionals !
Nothing too fancy, because their only role will be to make an element visible or not.
So the first step is to hide all our screens by default.
To do this, simply uncheck "This element is visible on page load" and make sure to check "Collapse when Hidden".
This way, our screens will be hidden by default, and we simply have to make them appear when needed.
And to make them appear, simply add this conditional to each screens :
Add this conditional to every screens, while making sure to change the step depending on the screen.
Now, the final step you shouldn't forget is to hide the "Back" button when the user is on the first screen, and hide the "Next" button when the user is on the last screen.
And there we go, you now have a fully functional multi step popup !
Amazing, right ?
Conclusion
And there you go !
You know all you need to know to build amazing popups and modals for your app.
Note that you can also add these popups to a reusable element. This is good pratice, especially if you use them across your app !
We've only covered a few use cases, but you can use them for many more purposes, such as building a video player, use them to build a "Share" modal (or simply share you own apps) and select a list of items.
The possibilities are endless.
However, try to avoid building popups that are too intrusive, or it will end up causing a bad user experience on your app !
