Everything you need to customise the page guests see when they join a MikroTik hotspot - which files RouterOS serves, the variables it fills in, a working login.html, and how to make it look good on a phone. Want to see finished designs first? Try our nine live captive portal themes.
A RouterOS hotspot serves its pages from the hotspot HTML directory - a folder called hotspot in Files by default (flash/hotspot on devices with flash storage). The folder is set per hotspot profile: /ip hotspot profile set [find] html-directory=hotspot. Edit the files on your computer, then drag them into that folder in WinBox or WebFig. They take effect for the next guest, with no reboot.
The page shown to a device that is not logged in - the one you design.
Shown right after a successful login. Usually redirects to the page the guest first asked for, or to your own landing page.
The session status window (time and data used) and the page shown after logging out.
Error messages, redirects and the page that sends a device to login.html. errors.txt holds the text of each error, so it can be translated.
Used for CHAP login: the page hashes the password in the browser so it never crosses the network in clear text.
Before sending a page, the router replaces $(name) placeholders with live values. The ones a login page needs: $(link-login-only) - the URL the form must post to; $(link-orig) - the page the guest originally requested; $(username) and $(error) - to refill the form and show what went wrong; $(chap-id) and $(chap-challenge) - for CHAP; $(mac) and $(ip) - the device; $(identity) - the router's name; $(link-status) and $(link-logout). Conditionals work too: $(if error) ... $(endif) prints its contents only when there is an error.
Username and password form with CHAP support. Style it with your own style.css in the same folder.
<!doctype html>
<html><head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>$(identity) WiFi</title>
<link rel="stylesheet" href="style.css">
$(if chap-id)<script src="md5.js"></script>$(endif)
</head><body>
<form name="login" action="$(link-login-only)" method="post"
$(if chap-id) onsubmit="return doLogin()" $(endif)>
<input type="hidden" name="dst" value="$(link-orig)">
<input type="hidden" name="popup" value="true">
<input name="username" placeholder="Room or voucher" value="$(username)">
<input name="password" type="password" placeholder="PIN">
<button>Connect</button>
$(if error)<p class="err">$(error)</p>$(endif)
</form>
$(if chap-id)<form name="sendin" action="$(link-login-only)" method="post">
<input type="hidden" name="username"><input type="hidden" name="password">
<input type="hidden" name="dst" value="$(link-orig)">
<input type="hidden" name="popup" value="true">
</form>
<script>
function doLogin() {
document.sendin.username.value = document.login.username.value;
document.sendin.password.value =
hexMD5('$(chap-id)' + document.login.password.value + '$(chap-challenge)');
document.sendin.submit();
return false;
}
</script>$(endif)
</body></html>The form posts username and password to $(link-login-only). When the hotspot profile allows CHAP, RouterOS sets $(chap-id), and the hidden second form sends hexMD5(chap-id + password + chap-challenge) instead of the password itself. dst returns the guest to the page they asked for.
Before login the guest can reach nothing but the router and your walled garden. Google Fonts, a CDN script or an image on your website will not load unless that host is in /ip hotspot walled-garden. Put fonts, CSS and photos in the hotspot folder.
Phones open the login page in a cut-down captive-network browser (Captive Network Assistant on iPhone). Aim for well under 300 KB, compress photos to WebP or small JPEGs, and avoid heavy JavaScript frameworks.
Add the viewport meta tag, use one column, inputs at least 16px (smaller makes iPhones zoom in), and a big Connect button within thumb reach.
"Room number" and "Surname", or "Voucher code", rather than "Username" and "Password". Most failed logins are guests guessing what the boxes mean.
Your logo, one strong photo of the property, your colours and a one-line welcome. Add terms of use - see our guest WiFi terms template.
If the page does not open on its own, see WiFi login page not opening - DNS, HTTPS and the walled garden are the usual causes.
Our captive portal theme gallery has nine live designs - luxury hotel, beach resort, café, heritage, mountain lodge, city business hotel, bar, co-working office and island resort - each with room and surname, room PIN, coupon and mobile OTP login, and the after-login "You're online" page. Open one on your phone and use it exactly as a guest would.
With iberry the portal is built for you: your branding on a page served from the iberry cloud, with logins checked against your PMS, vouchers and PINs or SMS OTP, per-guest speed and data limits, and a record of every session. It works on MikroTik and, through their external portal settings, on TP-Link Omada and Ubiquiti UniFi. See captive portal software.
Into the hotspot HTML directory - the hotspot folder in Files by default (flash/hotspot on devices with flash). Drag the files in with WinBox or WebFig; the folder is chosen with html-directory in /ip hotspot profile.
login.html. alogin.html is shown after login, status.html shows the session, logout.html after logout and error.html for errors.
Before login the device can reach only the router and the walled garden. Keep fonts, CSS and images inside the hotspot folder, or add their host to /ip hotspot walled-garden.
RouterOS ships a plain default set in the hotspot folder, and the minimal login.html above is free to use. For a finished branded design, try our live captive portal themes at iberrywifi.com/portal-themes/.
Not by itself - a static login.html only knows the router's own users. iberry's cloud portal checks room number and surname against your PMS and tells the router to let the guest in.
Omada and UniFi controllers have their own portal pages and support an external portal. iberry's portal runs as that external portal, so the same design works on all three.
Send us your logo and a photo of the property, and say how guests should log in. Try the live themes first. Published plans in India start at ₹30,000 one-time with ₹15,000 yearly maintenance; outside India every project is quoted on its own.
Get a branded portal