QR Code Generator in a Bubble

Generating QR Codes in Bubble

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 a CRM SaaS app that I'm building with Bubble, and I would like to be able to scan the QR code and be taken to the page for each of my contacts. So I need to give each of my contacts a QR code.

Setting Up the Database

If I go into my database and then to contacts, I have all of these fields here. So I need to start by adding a QR image because the plugin that I'll be using will generate a QR code and I want to save that as an image.

Adding the QR Code Generator Plugin

Let's grab the plugin. I'm going to use a QR code generator - barcode and QR code generator. This plugin here is free and seems to work well enough. There are a number of QR code generators in the Bubble plug-in store.

Creating the User Interface

How do I generate a QR code for each of my users? Well, I'm going to add an image field first so I can display it. 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. Let's just make this big enough that it is clear.

The dynamic image is coming from the parent group's contact. This is a repeating group of my contacts, and then QR code image. Lastly, I'm going to add a button and label this "Generate QR Code in Bubble". Let's make that a bit wider.

Setting Up the QR Code Generator

As 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. I'm going to add in the QR code generator now. There are two here. Let's just have a look at the plugin. I've got QR code generator has finished manual QR code. I'm just going to go manual because that's the one I've used before.

Configuring the QR Code Data

When I click this button, I'm going to go to plugins or elements generate a QR code. The data - one piece of data you could use is the unique ID within Bubble. However, that's not very useful if you want a link to the records. To do that, I actually need to have that in my repeating group in order to refer to that data.

Linking to Contact Pages

Let's see if this will work for us. Data: yes, current group's contact. This is a little kind of sneaky tip - very useful once you know. Using the link function here, it's saying "center page" because I don't have a page set up to display my contacts. Let me just do that quickly because Bubble wants to be able to pair the database information with a page to show the contact.

Saving the Generated QR Code

That should fix it. Now it accepts it because the link is accompanied by a page to display that data. It's going to generate it, and I now need to save it into my contact. I'm going to circle right back to this in 30 seconds because this is unlikely to work, and I'll explain why in a moment.

Troubleshooting the QR Code Generation

Let's test it. If I click this button and it works, we should see the QR code. It's thrown an error. Don't know why that is. Let's try and debug it. It might be because I've got some leftover elements from recording a different video and have likely confused things.

Still facing an issue. Let's just see if it's the data we're passing into it. Let's change this to unique ID. It 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.

Adding a Pause to Fix the Issue

The plugin takes a little moment of time to actually generate the QR code. When you run a workflow in Bubble, Bubble optimizes the workflow and doesn't wait unnecessarily. It doesn't always run the workflow in a linear manner.

One way of fixing this would be to add a pause. Let's try that. And there you see it has generated the QR code successfully. It's a less than ideal approach. If we look at the plugin documentation, we can see that the developer has put in an event "when plugin has finished". That's another way to manage it.

Conclusion

As a quick fix to get it working, adding in the pause works. It's not something that I like to do - it doesn't feel like a wholesome fix, but as you've just seen, it's worked. Let's just try another one so that we can see that they are at least different. Yes, those are different QR codes.

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