Support dan Konsultasi : [email protected]

Template Voucher Hotspot Dengan Barcode

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 voucher hotspot barcode

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

Template voucher hotspot

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

artikel lainnya :

Cara Install dan Download Winbox Mac

Cara Install dan Download Winbox Mac

miminJune 28, 20212 min read

Cara Install Winbox Mac Sebagai operator jaringan yang sudah terbiasa menggunakan mikrotik, winbox sangatlah penting dalam hal konfigurasi dan monitoring.…