Template Voucher Hotspot Dengan Barcode

Daftar isi

1 Template Voucher Hotspot Dengan Barcode
2 Dashboard Usermanager Mikrotik
3 Template HTML Voucher Hotspot
4 artikel lainnya :

Template Voucher Hotspot Dengan Barcode

Pada artikel ini mimin akan share template userman mikrotik atau yang biasa kita sebut template voucher hotspot dengan barcode yang memudahkan user login tanpa harus mengisi data username dan password di gadget mereka atau bahasa keren nya otomatis login.

Untuk melakukan perubahan template vouher hotspot dengan barcode cara nya cukup mudah, tinggal kita sesuaikan pada settingan html usermanager di mikrotik hotspot anda. Langsung saja simak tutorial voucher hotspot barcode dibawah ini :

Dashboard Usermanager Mikrotik

Langkah pertama login terlebih dahulu ke dashboard mikrotik userman anda, lalu pilih menu “Settings“, kemudian pilih tab "Template“, lalu "Vouchers“.

Template HTML Voucher Hotspot

Copy Paste Kode HTML template voucher hotspot dibawah ini ya, lalu masukan pada kolom “Header” HTML editor usermanagernya

Kolom Header

<!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="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" type="text/javascript"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.qrcode/1.0/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>

Kolom ROW

Pastikan anda merubah IP di dalam kode html dibawah ini, sesuiakan dengan IP Hotspot atau bisa juga gunakan nama DNS Local Hotspot anda. Contoh : “http://mikrotips.xyz/login?username=%u_username%&password=%u_password%“

 <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://mikrotips.xyz/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>

Kolom Footer

    </body>
</html>

Kolom Break

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

Selesai, lalu save perubahan yang telah anda buat.

Coba generate beberapa voucher untuk mencoba settingan HTML template voucher hotspot dengan barcode yang telah anda buat, pastikan anda mencentang “Background Graphic” ketika print voucher

Demikianlah cara custom template voucher hotspot dengan barcode yang dapat mimin bagikan, untuk menambah cantik tampilan hotspot mikrotik anda silahkan download free template userman 10 TEMPLATE LOGIN HOTSPOT MIKROTIK KEREN GRATIS