Tuesday, 24 February 2015

Mikrotik Usermanager QR Code Vouchers

14:49 Posted by Jurgens Krause , , 34 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!

34 comments:

  1. 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. hi how i can use this in my server i try but the qr code does not apper

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

    ReplyDelete
    Replies
    1. can you try to change:
      "render": 'div',

      to

      "render": 'img',

      and let me know how it goes?

      Delete
  4. 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
  5. 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
  6. every thing is ok
    but the qr code does not apper

    ReplyDelete
  7. Now every thing is OK

    But the size of card is bigger

    How I can resize

    ReplyDelete
    Replies
    1. 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. how did you fix your problem with appear the qr code?????
      its not appear with me

      Delete
    3. change
      "render": 'div',
      to
      "render": 'img',

      Delete

  8. 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. I have honestly never tried it. Is your idea to send the qr code to a client using whatsapp?

      Delete
  9. 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. Lo sentimos, no hablo español, ¿puedes por favor trate Inglés.

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

    ReplyDelete
  11. No sir u do not understand me??

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

    ReplyDelete
  12. Only can be used call and send text messages by whatsapp


    And other app. Not run ...

    ReplyDelete
  13. 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
  14. Hello such as changing the logo of the voucher , if I can do as I say ...... thank you very much !

    ReplyDelete
  15. This comment has been removed by the author.

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

    ReplyDelete
  17. 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
  18. 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. 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
  19. why the QR code cand read it with any QR CODE SCANNER?

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

    ReplyDelete
  21. 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
  22. how can i decrease the size of the qr code? Please help me with that

    ReplyDelete
  23. 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
  24. This comment has been removed by the author.

    ReplyDelete