QR Code Scanning

Hello Bubble Community,

I’ve just dived int buddle and for the most part, it’s going well but I’m a little stuck.

A critical part of my app is the need to scan QR codes. I’ve read through the forum and found a few other asking the same. The last discussion is about 8 months ago. From what I found, I have not had success.

I’ve tried using the plugin Generate/Scan QR Code. Anyone else have it working? Maybe with an example. Also, http://www.bubblecloudlab.com/ is not working, maybe @cho can help?

Is this possible?

Thanks so much in advance.

1 Like

I came across this github link for a QR code scanner

You might want to check it out.
Its a Javascript client side solution so you could use it with your Bubble app

Thanks, I’ll look at that. I quickly tried on my phone and it doesn’t recognize the camera, maybe can fix that. Worked on desktop with webcam.

I struggled with QR read and just got it working this past week. The one thing I learned which greatly simplified things is iOS 11 has QR code reader built in (needs to be iOS 11 - older versions don’t support). So if you have QR created correctly, when you open your iphone / ipad camera and point to the QR code, iOS will automatically popup website (in my case). I had it testd on Droid device too - but needed to download an QR reader for Droid.

BTW - there were issues with older version of iOS in that the picture storage size was too big. With iOS 11, that’s not a problem. Works real slick…

I should note in my application that originally I had the QR code seed be the user’s email. Because my app evolved and each user has a unique webpage, the QR code seed value is that user’s unique webpage.

1 Like

I made it work, you can find the info here:

I hope this helps.

Thanks @caeroa, I’ll try this when I get back into bubble. Would you happen to have an example of this working?

1 Like

Hi again @caeroa. I’m still trying to get this right. Reading what you wrote in the post you linked, am I understanding that the user needs to snap an image of the QR code and then use that? I’m so confused… if that is the case, that is really not what I’m looking for. Ideally, what I’m trying to achieve is a user scans a qr code from their mobile device, it take them to may app and the code is searched for in my database. The user then can ‘collect’ codes, which are added to their account. Thanks

To create a code, you’d have something like this following. My “seed” value for creating the QR code image is “User Landing Page URL” . I (bubble) create a unique seed values for each of my customers (autogenerated based on my bubble domain name and each user’s unique id and done in my create new user workflow). This is done with the QR Code - Generate you see in the image. You’d do something similar but perhaps instead of user unique user id you’d use whatever unique value for each QR code image created.

For the QR code read, I simply point my iphone (ios11) camera to the QR code image and a browser window opens on my phone. I don’t use the QR-Code Scan functionality at all. The seed value used in the QR-code image generation brings my customers to the the right place with their info.

1 Like

Thanks for everyone that has replied. I’m still stuck… maybe what I’m trying to do is not possible without going to a native app.

I’ve taken what I’ve found on the forum and still can’t quite figure out what I need. I’m good with generating codes, and if the code is scanned, it takes me to correct URL with parameters. Maybe I should better explain what I mean and tell me if you think this is possible.

What I’m trying to do is a create an “Add By Scan” to add an item to the user’s list of items. Right now I have it so they need to enter an 8character alpha-numeric code. So when they click on “Add By Scan”, opens the device’s camera, reads QR code, returns to the page and populates the field with data from scanned code, the user then presses “Add”. Does this make sense? Is this possible?

Thanks in advance.

1 Like

I’m looking for the same basic functionality; Click button, device camera opens and scans QR code, and whatever info is contained in the QR code is stored into a field on the page.

Ideally, I’d like the ability to scan code into repeating group and repeat every time a code is scanned until a stop scan button has been clicked. I’m not looking for the user to be taken to URLs, I need the data captured and stored in the database.

I’m using ios 11, currently but will also need for android later. Like @philip_ferreira asks, is this possible? Can someone show is how to set this up?


I’m bumping this up again. Any thoughts?

Thanks in advance.

1 Like

I am looking for this function too.
Scan a QR code to add that record to the selected list

1 Like