Who has created a QR Reader in Bootstrap Studio

Bootstrap Studio Help
1

Hello how are you, I hope very well, I am a novice user who is creating my platform, it allows you to obtain a QR code. I would like to have a QR reader on my own website. I have seen several projects, I don’t know how to implement it, if anyone help me it would be great. The version I’m using right now is 5.1, if someone does me that favor and sends me the BSS, that would be great.

2

You will need something like this:

simply add an empty div with id=“reader”

Link external javascript to “https://unpkg.com/html5-qrcode”

then create a simple js file to get it going:

function onScanSuccess(decodedText, decodedResult) {
    // Handle on success condition with the decoded text or result.
    alert(`Scan result: ${decodedText}`, decodedResult);
}

var html5QrcodeScanner = new Html5QrcodeScanner(
	"reader", { fps: 20, qrbox: 360 });
html5QrcodeScanner.render(onScanSuccess);

the var html5QrcodeScanner starts the qr scan, then your onScanSuccess will return the data from the qr code in “decodedResult”

Note, you will need to run on a secure site for it to work (publishing to bss will be fine for this)

3

Thank you very much for your contribution, but I tried to follow your instructions and it didn’t work for me, I don’t know what I’m doing wrong, if it’s not too much trouble, could you help me with a bss file that already has that implemented to see how I should do it?

4

Perfect, I already made it work, but I only get an alert, I would like that alert to come out and allow me to go to the scanned url. I only get accept and that’s it, but it doesn’t let me go to the URL.

5

Is there a way to change this code, so that instead of sending me an alert, it goes directly to the scanned URL?

alert(Scan result: ${decodedText}, decodedResult);

6

change the alert to:

 if (window.confirm('Click "OK" to load url')) 
{
window.location.href= decodedText ;
};
7

I hope you don’t hate me, but I did that, and when I open the page I get another alert that says Click Ok to Load URL, could you send me the complete code that I have to put in the js please. Trust me, I’m new to all of this. and thank you very much indeed.

8

You are a genius, I already managed to do it, thanks to your help. I really hope one day to pay you for this help you gave me, more for a personal project.

1 Like
9

I have made a few updates to the javascript:
It now checks to make sure the qr contains a valid url, and displays the url in the dialog window

function onScanSuccess(decodedText, decodedResult) {
  if (isValidHttpUrl(decodedText) == true) {
    window.confirm(
      "URL: " + decodedText + '\n \n Click "OK" to load url or cancel to exit'
    );
    window.location.href = decodedText;
  } else {
    window.confirm("QR Code does not contain a URL");
  }
}

function isValidHttpUrl(string) {
  let url;

  try {
    url = new URL(string);
  } catch (_) {
    return false;
  }

  return url.protocol === "http:" || url.protocol === "https:";
}

var html5QrcodeScanner = new Html5QrcodeScanner("reader", {
  fps: 20,
  qrbox: 360,
});
html5QrcodeScanner.render(onScanSuccess);
10

AMAZING, one question, is there any way to put my page’s logo in the alert?

Next to where it says my page says:

11

There is a small problem in the code, when I get the alert, and I press cancel, it goes to the url in the same way.

12

How about this?

https://mydev.bss.design/

13

If so, excellent, you even personalized the box where it goes. Spectacular.

14

I have put the bsdesign file here for you to download

https://champagnecharlie.shop/qr.bsdesign

You will just need to change the logo in the modal

15

YOU ARE THE BEST, it worked perfectly for me, the implementation of the modal instead of an alert allows me to make several modifications. THANK YOU VERY MUCH, at any time I hope to help you monetarily. Thanks for taking the time to help me. Your name will be in the app credits. There are still some things missing, but this was ESSENTIAL.

1 Like
16

Thank you for your kind words. It was a pleasure to help.

A few things to note. The QR Reader script/elements are clashing with the way the modal closes. You will notice that there is some css to hide the modal close X and also clicking on the close/cancel actually reloads the page to get round this. If I get time I will see if I can find a better solution.

17

If I was seeing that, but I didn’t want to tell myself or ask you more why I’m sorry, but I’ll be willing in any update that you make my friend.

I would like to ask you several questions.

  1. Is there a way that doesn’t show the URL, but the page title?

  2. Is there a way to display the logo of the page I scan?

“Or does that have something to do with the information that is entered in the QR”?

Thank you very much for your help and patience.

18

Friend Richard, when you can, you can edit the code.

When you press to go to the URL I scan it opens it in a new window, I would like it not to open it in a new window.

Because in the PWA platform it is noticeable when it is a new window, but if you edit the code so that it opens in the same window it would look much better.

19

In BSS open the modal and click on the Visit Link button, then remove target _blank

image

20

You are a genious. Friend