Skip to content

Hotspot Login Page Template Mikrotik May 2026

Before designing, you must enable the hotspot on the router.

1. Create the Hotspot Server Open WinBox or SSH into your router.

/ip hotspot setup

2. Verify the Default Page Once active, connect a device to that network. You should be automatically redirected to a generic Mikrotik page asking for a Username and Password.

MikroTik RouterOS features a powerful Hotspot Gateway functionality, commonly used in public Wi-Fi zones (cafés, hotels, airports, offices). When a client connects to a MikroTik hotspot, their browser is redirected to a login page (captive portal). The look, feel, and behavior of this page are controlled by a Hotspot Login Page Template. Hotspot Login Page Template Mikrotik

A well-designed template improves user experience, reinforces brand identity, and can streamline authentication (voucher, password, MAC, or RADIUS).

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
    <title>Guest Wi-Fi | Your Brand</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="hotspot-container">
    <div class="login-card">
        <div class="brand">
            <img src="img/logo.png" alt="Company Logo" class="logo">
            <h1>Welcome to <span>YourNetwork</span></h1>
            <p>Free Wi-Fi for guests</p>
        </div>

    <!-- Error Display Block -->
    <div id="error-message" class="error-box" style="display: none;">
        Invalid username or password. Please try again.
    </div>
<form id="hotspot-login" action="$(link-login-only)" method="post">
        <input type="hidden" name="dst" value="$(link-orig)">
        <input type="hidden" name="popup" value="true">
<div class="input-group">
            <label>📧 Username / Voucher</label>
            <input type="text" name="username" id="username" required autofocus>
        </div>
<div class="input-group">
            <label>🔒 Password</label>
            <input type="password" name="password" id="password" required>
        </div>
<div class="terms">
            <input type="checkbox" id="accept-terms" required>
            <label for="accept-terms">I agree to the <a href="#" id="termsLink">Terms of Service</a> and Privacy Policy.</label>
        </div>
<button type="submit" id="loginBtn" disabled>Connect to Wi-Fi</button>
    </form>
<div class="footer-links">
        <a href="#">Need help?</a> | <a href="#">Buy voucher</a>
    </div>
</div>



</div>


<script>
// Handle Terms checkbox enabling login button
const termsCheckbox = document.getElementById('accept-terms');
const loginBtn = document.getElementById('loginBtn');
termsCheckbox.addEventListener('change', function() 
loginBtn.disabled = !this.checked;
); Before designing, you must enable the hotspot on the router


// Show error if present (MikroTik passes error variable)
window.onload = function() 
    let errorVar = '$(error)';
    if (errorVar && errorVar !== '') 
        document.getElementById('error-message').style.display = 'block';



</script>
</body>
</html>

MikroTik does not natively support OAuth. You need a third-party RADIUS like WiFiDog or MikroTik Social Login script using API. Common approach: const loginBtn = document.getElementById('loginBtn')

Use $(lang) variable. Create login_es.html for Spanish, login_fr.html for French. Set Hotspot → Server Profile → Language accordingly.

The default blue-and-white MikroTik interface screams "generic router." Here is why you should invest time in a custom Hotspot Login Page Template MikroTik:

Closing tip: keep the page lightweight and mobile-first — simple UI, clear instructions, and visible contact/terms reduce support and improve guest experience.

Share on Social Media

Sign up for our newsletter

Site Designed and Developed by 5by5 - A Change Agency