How to create a QR Code Scanner

Need help Database
1

Hello!

So recently i’ve built a “Registration Card” for my upcoming tournament. And i was wondering if there is a plugin or some sort of way to let me scan the QR Code on the Card and it’ll automatically bring up the Registered individual information up for me.

If anyone knows a way or has a way, please let me know ASAP!

Thank You.

2

Have you searched the forum? Plenty of discussions on this topic.

1 Like
3

Hey @mrpsgamer8 :wave:

I find that the easiest way to do that is to make the code a URL. Then when scanned, it will take them to the page you want to go to. Have you used QRs before? Would you know how to do that?

4

i know what you mean. so for what im making is when i scan the QR Code, it’ll show the “Registration Code” of that particular Card. I want to make it somehow when i scan a player’s QR Code, it’ll show me their card.

I can show you examples from screenshots.

5

So, instead of your QR code being just the registration code like 827e938.

You can make the QR code as https://www.yourdomain.com/player/827e938

Does that make sense?

6

fwiw - look thru a prototype mobile first QR code app for restaurant menu ( see pages = “index”, “mobileidx” )

7

i get what you mean but im on the free plan of Bubble so technically i cant change the domain.
but i get what you mean.

1 Like
8

i don’t understand what or how it works…

9

I pretty much built something just like this. I used the QRCodeScanner plug-in.

It’s actually amazingly easy to do.

  1. Place the QRCodescanner object on your page.
  2. Add a button labeled “start” and add an event behind it that when it’s clicked, start the QRCodeScanner. You need to start the scanner object.
  3. When it’s started, you can hold your phone over the QR code and the QRCodeScanner object will read it immediately.

When it gets input, you can set a page state to the value it read. The value is what you’ll need to look up what you want.

Obviously, it’s a bit more complex than this, but it’s pretty easy to implement.

10

can you send me the plugin and some screenshots of how you did it in your editor. cuz i take a while to figure these out.

11

Here is the plug-in:

Screenshot 2022-11-23 at 5.29.43 PM
Screenshot 2022-11-23 at 5.29.43 PM1950×1156 238 KB

12

This is what the page looks like when the user opens it:

Screenshot 2022-11-23 at 5.30.55 PM
Screenshot 2022-11-23 at 5.30.55 PM648×590 24.3 KB

The “code” behind the start button:

Screenshot 2022-11-23 at 5.32.54 PM
Screenshot 2022-11-23 at 5.32.54 PM850×854 47.7 KB

Screenshot 2022-11-23 at 5.33.06 PM
Screenshot 2022-11-23 at 5.33.06 PM850×854 35.5 KB

When the QRScanner successfully reads something, this will trigger:

Screenshot 2022-11-23 at 5.34.34 PM
Screenshot 2022-11-23 at 5.34.34 PM1008×1226 68.2 KB

I can then use the value scanned_sku to retrieve whatever info I need to show the user.

13

i am confused on how to exactly do this…

can i share my app with you so you do it for me?
ill explain to you what the whole app is about, its a simple app.

14

are you here?

15

Do you have an existing app or demo on how you have this designed and working?
I like how simple you have it formatted above but would like to make it look something that accesses the camera feature when you scroll to the scan QR page.