Limited Time Offer: Watch All Our Bubble Tutorial Videos for Only $99 per Year!

In this Bubble tutorial, I'm going to show you how to generate a QR code in a Bubble app. I have a little address book here. It could be the start of like a CRM SaaS app that I'm building with Bubble. And I would like to scan the QR code and be taken to the page for each of my contacts.

Database fields

So I need to give each of my contacts a QR code if I go into my database and contacts, I have all of these fields here.

So I need to start by adding a QR image because the plug-in that I'll be using will generate a QR code and I want to save that as an image. There we go. Okay, and then let's grab the plugin. So I'm going to use Barcode & QR Code Generator. This plugin here, there are a number of QR code generators in the Bubble plugin store. I'm just picking this one because it's free and it seems to work well enough.

So how do I generate a QR code to each of my users? Well, I'm going to add a image field first so I can display it.

And this tutorial is just covering the generation side. I'll do a follow up tutorial showing how to scan a QR code within the Bubble app.

Displaying a QR code in the UI Editor

Let's just make this big enough that it's clear. Okay. And then the dynamic image is coming from the parent group's contact. This is a repeating group of my contacts. And then QR code image. Okay.

And then lastly, I'm going to add a button in label this, generate QR code in Bubble. A bit wider.

As such is the case with a lot of Bubble plugins, you have to add an element to the page in order for the right resources to be loaded in. So I'm going to add in the QR code generator. Now there are two here, let's just have a look at the plugin. So I've got QR code generator has finished manual QR code.

I'm just going to go manual because that's the one that I've used before. Maybe if you're a plug in developer you could press comment, just saying what the difference is. So actually I'm not going to add it in my repeating group, I'm just going to add it to my page because it's something that I'm going to put data into and then take data out of. So when I click this button I'm going to go to plugins or elements, generate a QR code. Here we go.

Unique ID or Link

And the data. So one piece of data you could use is the unique ID within Bubble. However, and that would be useful if the Bubble app, the QR code is able to scan through your database, match it to a record and then take the user there. But if you want to link to the record, then I would need to pass some data into that.

And to do that actually, in fact, I do need to have that in my repeating group in order to refer to that data.

Let's just see if this will work for us. Data. Yes. Current groups', contact. And then this is a little kind of sneaky tip, you know, very useful once, you know, but using the link function here.

And then it's saying, send a page. That's because I don't have a page set up to display my contacts. Let me just do that quickly on here. Because the Bubble wants to be able to pair the database information with a page to display that data. So it's going to generate it, and I now need to save it into my contact.

Testing & debugging

I'm going to circle right back to this in 30 seconds because this is unlikely to work. Reliably, and I'll explain why in a moment. QR code.

Sometimes with a plugin, you can refer back to the step. But slightly unusually for this one, perhaps because it takes a little bit of extra time to generate the QR code, I actually have to refer to the element on the page.

Here we go. Okay, let's test it.

So if I click this button and it works, we should see the QR code. Okay. And it's thrown an error.

I don't know why that is. Let's try and debug it. It might be because I've got I think let's just delete those. They're from recording a different video and likely confused things. So Manual QR generator contact. Yep. Okay. Still facing an issue.

Let's just see if it's the date we're passing into it. Change this to change this unique ID.

Okay. Accepts it as a unique ID. Let's go with that for now in order to keep this brief. But you'll see that it hasn't generated the QR code, or at least it's not displaying it. And I deliberately keep this kind of troubleshooting process in these videos because there are all sorts of different ways you can stray off the true path to get your app working.

Adding a Workflow Pause

So I think it's helpful to lead them in. So I clicked on Tony Stark and we're going to Stark? We can see that the QR code is empty still. So what happens here? Well, it's because the plugin takes a little moment of time to actually generate the QR code.

Bubble Workflow optimization

And when you run a workflow in Bubble, Bubble optimises the workflow, and it doesn't wait unnecessarily, and it doesn't always run the workflow in a linear manner. When you refer to an earlier step, like you can with some plugins that would generate content like an API call, it will wait until that step is completed. But because we're referring to an element on the page, it doesn't wait. So one way of fixing this would be to add a pause.

Let's try that.


Okay. And there you see, it generated the QR code successfully and is the less an ideal approach. If we look at the plugin documentation, we can see that the developer has put in an event when plugin when it's finished. So that's another way to manage it, but as like a quick fix to get it working. I went through this with one of our members in a coaching session earlier on in the week, adding in the pause.

It's not something that I like to do. It doesn't feel like a wholesome fix, but like you just seen, it's worked and let's just try another one so that we can see that they are at least different. Yes, those are different QR codes.

So there you have it. That is how to generate QR codes with Bubble and add in QR code generation into your Bubble app.


Latest videos