A default Mikrotik hotspot page is instantly recognizable to any network engineer — and instantly forgettable to everyone else. But a custom template transforms the router into a brand asset.
Consider three scenarios:
In each case, the same Mikrotik RB951 or CCR1036 powers the backend. But the template redefines the relationship. The deep insight: Infrastructure is invisible. The login page is the only interface most users will ever see. If it fails, the network fails — regardless of uptime. Hotspot Login Page Template Mikrotik
To allow Facebook/Google login, you need an external RADIUS server (e.g., WiFidog, FreeRADIUS) because MikroTik natively does not support OAuth. The template redirects users to the external portal, which then validates and calls the MikroTik API.
Use this as your hotspot/login.html served by the MikroTik Hotspot server. Replace placeholder text and logos as needed. A default Mikrotik hotspot page is instantly recognizable
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Welcome — Free Wi‑Fi</title>
<style>
:root--bg:#f6f7fb;--card:#ffffff;--accent:#0077cc;--muted:#6b7280;--radius:12px
html,bodyheight:100%;margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;color:#111
bodybackground:linear-gradient(180deg,#eef3fb 0%,var(--bg) 100%);display:flex;align-items:center;justify-content:center;padding:24px
.cardwidth:100%;max-width:420px;background:var(--card);border-radius:var(--radius);box-shadow:0 8px 30px rgba(15,23,42,0.08);padding:24px
.logodisplay:flex;gap:12px;align-items:center;margin-bottom:12px
.logo imgheight:44px;width:auto
h1font-size:20px;margin:0 0 6px
p.leadmargin:0 0 16px;color:var(--muted);font-size:14px
formdisplay:grid;gap:12px
.inputdisplay:flex;flex-direction:column
labelfont-size:12px;color:var(--muted);margin-bottom:6px
input[type="text"],input[type="password"]padding:10px 12px;border-radius:10px;border:1px solid #e6e9ef;font-size:15px
.btnbackground:var(--accent);color:#fff;padding:10px 12px;border-radius:10px;border:0;font-weight:600;cursor:pointer
.smallfont-size:12px;color:var(--muted);text-align:center;margin-top:8px
.termsfont-size:12px;color:var(--muted);margin-top:8px;line-height:1.2
footerfont-size:12px;color:var(--muted);text-align:center;margin-top:14px
@media (max-width:420px)bodypadding:12px.cardpadding:18px
</style>
</head>
<body>
<div class="card">
<div class="logo">
<img src="/logo.png" alt="Your Logo" onerror="this.style.display='none'">
<div>
<h1>Free Wi‑Fi</h1>
<p class="lead">Welcome! Connect to our secure Wi‑Fi to get started.</p>
</div>
</div>
<!-- MikroTik Hotspot expects form action and variables: -->
<form action="$LINKLOGIN" method="post" accept-charset="utf-8">
<!-- If using MAC-only or no password, include only what you need -->
<div class="input">
<label for="username">Username</label>
<input id="username" name="username" type="text" value="$USERNAME" placeholder="Enter username" required>
</div>
<div class="input">
<label for="password">Password</label>
<input id="password" name="password" type="password" placeholder="Enter password" value="$PASSWORD" required>
</div>
<!-- Optional hidden fields MikroTik may require -->
<input type="hidden" name="dst" value="$DST">
<input type="hidden" name="popup" value="$POPUP">
<button class="btn" type="submit">Connect</button>
</form>
<div class="small">Need help? Call <strong>+1 (555) 555-5555</strong></div>
<div class="terms">
By connecting you agree to our <a href="/terms.html" style="color:var(--accent);text-decoration:none">Terms of Use</a> and Acceptable Use Policy.
</div>
<footer>Network provided by YourCompany • $UPTIME</footer>
</div>
</body>
</html>
Notes:
After upload, open a browser and try to access any HTTP site. The new template should appear. In each case, the same Mikrotik RB951 or
The template is just the visible tip. Behind it, Mikrotik’s hotspot subsystem handles:
A sophisticated template doesn’t just look good — it communicates these backend states. It shows remaining time, warns when data is low, offers top-up vouchers, and redirects to a logout confirmation. It turns a raw mechanism into a user-aware service.
Deep customization means rewriting the status and logout pages as well, creating a seamless narrative from entry to exit.
Depending on your MikroTik configuration, the template should support: