Tuesday, 24 February 2015

Mikrotik Usermanager QR Code Vouchers

14:49 Posted by Jurgens Krause , , 43 comments

Add a QR code login to your hotspot vouchers with the following template. Free for commercial use!

Open the "User Manager" interface in your browser.
Navigate to the "Settings" page
Select the "Templates" tab
Select "Vouchers"

Add the following code in the appropriate boxes:

Header
Make sure that you update the path to the jquery libraries, you can use mine at :
jquery.min.js: https://drive.google.com/file/d/0B-Vs3naHEfHGMWZoaENuSWd6cFE
jquery.qrcode.min.js: https://drive.google.com/file/d/0B-Vs3naHEfHGQ2tBQWU5V1ZtSm8
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Vouchers</title>
        <script src="http://path-to-your-host/jquery.min.js" type="text/javascript"></script>
        <script src="http://path-to-your-host/jquery.qrcode.min.js" type="text/javascript"></script>
        <style>
            @page {
                size: A4;
                margin: 0;
            }
            @media print {
                html, body {
                    width: 210mm;
                    height: 297mm;
                    margin-left: auto;
                    margin-right: auto;
                }
            }
            @media screen {
                html, body {
                    width: 800px;
                }
            }
            body
            {
                padding: 5mm;
                margin:0;
                margin-left: auto;
                margin-right: auto;
                font-size: 20px;
                font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
                line-height: 85%;
            }

            #main-wrap {
                background-color: #fff;
                max-height: 317px;
                text-align: center;
                border: solid;
                border-width: 1px;
                display: inline-block;

            }


            #main-wrap > div {
                max-height: 307px;

            }

            #main-wrap {
                overflow: hidden;
                width: 45%;
                padding-top: 20px;
                padding-bottom: 20px;
            }

            #leftside {
                display: inline-block;
                width: 50%;
                font-size: 22px;
                line-height: 22px;
                height: 220px;
            }

            #rightside {
                display: inline-block;
                width: 45%;
                height: 220px;
                font-size: 18px

            }

            img.logo {
                width: 100%;
                margin-left: auto;
                margin-right: auto;
            }

            .qrcode {
                height: 150px;
                width: 150px;
            }



        </style>
    </head>
    <body>

Row
Make sure you update the IP to reflect your Hotspot IP, and point it to a valid logo image.
Logo dimensions in my example are 437px wide by 71px high.
        <div id="main-wrap">
            <img class="logo" src="logo.png">
            <div id="leftside"><br>
                <strong>%u_actualProfileName%</strong><br><br>
                <strong>Username:</strong> <br>%u_username%<br><br>
                <strong>Password:</strong> <br>%u_password%<br><br>

            </div>
            <div id="rightside"><br>SCAN TO LOG IN<br>
                <div class="qrcode" id="%u_username%"></div>
                <script> jQuery(function(){jQuery('#%u_username%').qrcode(
    {
        "render": 'div',
        "size": 150,
        "minVersion": 5,
        "maxVersion": 5,
        "ecLevel": 'L',
        "mode": 0,
        "text": "http://hotspot-ip/login?username=%u_username%&password=%u_password%",
        "quiet": 0,
    }

); }) </script>
                <span style= "font-size: 12px">Or browse to: <br>http://hotspot-dns-name<br></span>
            </div>
            <div class="bottom">
                Ask your host for more information
            </div>  
        </div>

Footer
    </body>
</html>

Break
<p class="noprint" style="font-size: 10px">   ................ page break ................ </p> <p class="pagebreak">&nbsp;</p>

When printing, make sure to select the option to print "background graphics":

Let me know if you have any suggestions in the comments!

43 comments:

  1. Unknown25 July 2015 at 18:19

    How to use this voucher template on 2 hotspot server integrated with radius?
    1 Router have User Manager and the other is doesn't have user manager but they have hotspot server. I want user can use the voucher to login on both hotspot server.

    ReplyDelete
  2. Unknown2 September 2015 at 15:14

    hi how i can use this in my server i try but the qr code does not apper

    ReplyDelete
  3. Unknown2 September 2015 at 15:17

    hi how i can use this in my server i try but the qr code does not apper

    ReplyDelete
    Replies
    1. Jurgens Krause2 September 2015 at 15:23

      can you try to change:
      "render": 'div',

      to

      "render": 'img',

      and let me know how it goes?

      Delete
  4. Unknown2 September 2015 at 19:44

    ok i will try know

    ReplyDelete
  5. Unknown2 September 2015 at 20:15

    same problem

    ReplyDelete
  6. Unknown2 September 2015 at 20:17

    script src="http://https://drive.google.com/open?id=0B_EIqDVjNAlHazFJWmtXTGhWc28/jquery.min.js" type="text/javascript"
    script src="http://https://drive.google.com/open?id=0B_EIqDVjNAlHY2tPNXpoZ19TQlU/jquery.qrcode.min.js" type="text/javascript"

    ReplyDelete
    Replies
    1. miech8030 November 2022 at 17:48

      en que del codigo htlm insertado esa parte de codigo

      Delete
  7. Unknown2 September 2015 at 20:27

    script src="http://https://drive.google.com/open?id=0B_EIqDVjNAlHazFJWmtXTGhWc28/jquery.min.js" type="text/javascript"
    script src="http://https://drive.google.com/open?id=0B_EIqDVjNAlHY2tPNXpoZ19TQlU/jquery.qrcode.min.js" type="text/javascript"

    ReplyDelete
  8. Unknown2 September 2015 at 20:28

    every thing is ok
    but the qr code does not apper

    ReplyDelete
  9. Unknown3 September 2015 at 18:17

    Now every thing is OK

    But the size of card is bigger

    How I can resize

    ReplyDelete
    Replies
    1. Jurgens Krause3 September 2015 at 19:25

      Sizing is a pain, but you can play around with the css values:
      .qrcode {
      height: 150px;
      width: 150px;
      }

      note that when you use the img version, it gets slightly blurry

      Delete
    2. saleh7 November 2015 at 01:19

      how did you fix your problem with appear the qr code?????
      its not appear with me

      Delete
    3. Jurgens Krause7 November 2015 at 07:51

      change
      "render": 'div',
      to
      "render": 'img',

      Delete
    4. adryanatama20 June 2018 at 05:49

      Not work for me, qrcode still not appear

      Delete
  10. Unknown7 September 2015 at 18:52


    thank sir for the idea of ​​linking user manager by qr code I want to ask you a question Can you created the cards operate only whatsapp

    ReplyDelete
    Replies
    1. Jurgens Krause18 September 2015 at 06:56

      I have honestly never tried it. Is your idea to send the qr code to a client using whatsapp?

      Delete
  11. L.I. Juvenal Hernandez18 September 2015 at 04:51

    Hola buenas noches estoy utlizando su codigo todo lo demas me carga en plantilla menos el qr que me hace falta pra lograr visualizar el QR?

    ReplyDelete
    Replies
    1. Jurgens Krause18 September 2015 at 06:56

      Lo sentimos, no hablo español, ¿puedes por favor trate Inglés.

      Delete
  12. L.I. Juvenal Hernandez18 September 2015 at 11:08

    qr code does not apper

    ReplyDelete
  13. L.I. Juvenal Hernandez18 September 2015 at 11:10

    I need to do it then appears the image of the QR ?

    ReplyDelete
  14. Unknown28 September 2015 at 00:38

    No sir u do not understand me??

    I need generate a count. This a count only used for whatsapp...

    ReplyDelete
  15. Unknown28 September 2015 at 00:39

    Only can be used call and send text messages by whatsapp


    And other app. Not run ...

    ReplyDelete
  16. 1521215229 October 2015 at 10:00

    script src="http://https://drive.google.com/open?id=0B_EIqDVjNAlHazFJWmtXTGhWc28/jquery.min.js" type="text/javascript"
    script src="http://https://drive.google.com/open?id=0B_EIqDVjNAlHY2tPNXpoZ19TQlU/jquery.qrcode.min.js"




    ERROR PLISE REPLY خطاء برجاء التصحيح
    Reply

    ReplyDelete
  17. WeRo6 November 2015 at 01:25

    Hello such as changing the logo of the voucher , if I can do as I say ...... thank you very much !

    ReplyDelete
  18. Unknown3 December 2015 at 16:56

    This comment has been removed by the author.

    ReplyDelete
  19. Unknown3 December 2015 at 16:57

    This why yes? still can not arise QR barcode
    "div" I've replace "img"
    http://i.imgur.com/lislLu9.jpg

    ReplyDelete
  20. Ardhy Baskara22 December 2015 at 04:57

    Heloo Abdulah, how you can fix your problem about appear QR Code ? because i can't appear the qr code.
    Whether you use this sources :

    script src="http://https://drive.google.com/open?id=0B_EIqDVjNAlHazFJWmtXTGhWc28/jquery.min.js" type="text/javascript"
    script src="http://https://drive.google.com/open?id=0B_EIqDVjNAlHY2tPNXpoZ19TQlU/jquery.qrcode.min.js" type="text/javascript"

    Or you change the script ?


    Need your help, please.

    ReplyDelete
  21. Ardhy Baskara23 December 2015 at 04:22

    Sorry, I have fixed my problem with QR Code on Mikrotik.
    Solution :
    use this script on Header :
    script src="https://www.kangndo.com/qrcode/jquery.min.js"
    script src="https://www.kangndo.com/qrcode/jquery.qrcode.min.js"

    And in order to you can scan qr code and direct connect to login, on mikrotik you can seting IP --> Hotspot, On Server Profiles Tab, choose and click your server profile that you use, then at the Login Tab, you checklist HTTP PAP option.

    And Clear.

    :-D

    If you confuse, you can email me in : swarabhaskara11@gmail.com

    ReplyDelete
    Replies
    1. Malik2 January 2016 at 18:05

      Hi Ardhy Baskara,
      Yes your solution works in terms of generating the QR code and appearing on the page for printing, but the QR code is not being scanned (read) by any application (Specifically I used "QR & Barcode Scanner" and "Barcode Scanner" from Play Store). But 2 or 3 times after scanning for more than 30 Seconds I got the code recognised, which is really unusual and impractical for general users.

      Jurgens Krause and you have done a great job here. Now if you get the time for checking the last status of these codes outcome, then that would be even great for rest of us.

      Cheers for you.

      Delete
  22. Unknown31 January 2016 at 08:11

    why the QR code cand read it with any QR CODE SCANNER?

    ReplyDelete
  23. Anonymous6 April 2016 at 08:58

    takes longer to read the code qr please any solution to this problem ....

    ReplyDelete
  24. Shinsekidoll4 May 2016 at 10:14

    src="https://drive.google.com/file/d/0B-Vs3naHEfHGMWZoaENuSWd6cFE"
    src="https://drive.google.com/file/d/0B-Vs3naHEfHGQ2tBQWU5V1ZtSm8"

    tried using tha code above still QR and logo doesnt show up btw where do i put the logo in the router or web hosted?

    ReplyDelete
  25. Unknown12 May 2016 at 22:03

    how can i decrease the size of the qr code? Please help me with that

    ReplyDelete
  26. Unknown15 June 2016 at 23:32

    Hey; cool voucher. Just wondering if I could use this code in my own project?(http://unifispot.com)

    Please do let me know if its ok to include a modified version of this code.

    ReplyDelete
  27. صالح الزوي25 October 2016 at 08:09

    This comment has been removed by the author.

    ReplyDelete
  28. Unknown19 March 2017 at 14:22

    where is logo in directory

    ReplyDelete
  29. syrian virus16 May 2017 at 11:08

    not work pro

    ReplyDelete
  30. Anonymous20 July 2017 at 16:53

    This comment has been removed by a blog administrator.

    ReplyDelete
  31. Unknown21 June 2018 at 01:03

    how to center the qr code?

    ReplyDelete
  32. Unknown4 August 2018 at 14:36

    hi i dont understant this part
    << Make sure that you update the path to the jquery libraries, you can use mine at :
    jquery.min.js: https://drive.google.com/file/d/0B-Vs3naHEfHGMWZoaENuSWd6cFE
    jquery.qrcode.min.js: https://drive.google.com/file/d/0B-Vs3naHEfHGQ2tBQWU5V1ZtSm8 >>

    where and how to update please help

    ReplyDelete
  33. Unknown12 November 2018 at 20:47

    Hello,
    First of all thank you, that is very educative!
    But I'm having a issue i get modified my voucher template, perfonalized with image and text and all is working and the QR is recognized but the password is not accepted by the hotspot becuse it is not chap encrypted, could you please help me?

    ReplyDelete
  34. TECH1014 June 2019 at 08:17

    Hello, can you resize the size of the voucher. its definitely big.

    ReplyDelete