QR code Generator

Hi all,

So a few weeks ago I asked for your help to create a QR code scanner. With all your help I have one and its working well within the web apps I’m making.

However, I need to be able to generate QR codes now. Can anyone please help me implement qrcodeJS into a hype document? I just need a basic input field for the QRcode value and a button to create the QRcode after the value has been inputted.

Can someone help me with this?

Thanks,

Chris

I’ve seen folks use the Google Charts API for this, which might be easier to get going. The format is:

<img src='/uploads/db2156/original/2X/7/7cec6b395d90fd00a7fe1c610968de76bc623c9a.png'>

Which creates:

So you could run:

document.getElementById("qrcode").src="https://chart.googleapis.com/chart?cht=qr&chl=Hello+Chris&choe=UTF-8&chs=100x100";

A bit more documentation here: https://developers.google.com/chart/infographics/docs/qr_codes

1 Like

Hi @Daniel, Thanks for this and it works well however its not quite what I’m looking for. What I need is my customers to be able to create a unique QRcode without the need to go to another site to create this. The QR code will then act as their unique log in in the QR code scanner side to the site.

So you have a backend service that is generating a QR code so they can login? Whichever service is creating your unique login code, you can use this to display it to the user.

Hi @Daniel.
Could you, please, provide an example of this function inside a Tumult file?
Thank you.
Ionut

Hi @Chriswhardy.
Did you find a solution for qrcodeJS integration?
Can you, please, provide a sample?
Thank you.
Ionut

Project used and Documentation:
https://davidshimjs.github.io/qrcodejs/

Simple Example:
RenderQR.hype.zip (20,7 KB)

2 Likes

Thank you!