Our hotspot setup guide got you started. Now let's make it look professional and add real business features – branded login pages, walled garden for free access, voucher codes, and integration with MikroRadius for billing.
Part 1: Custom Login Page Design
Understanding the Hotspot Files
MikroTik hotspot serves HTML files from the router's /hotspot directory. The key files:
| File | Purpose |
|---|---|
| login.html | The login page users see |
| alogin.html | Page shown after successful login |
| status.html | Connection status page |
| logout.html | Logout confirmation page |
| error.html | Error page (wrong password, etc.) |
| redirect.html | Redirect page after login |
| rlogin.html | RADIUS login redirect |
Step 1: Download Default Files
In WinBox: Files → hotspot → download all files. Or via SCP/SFTP. Edit them on your computer, then upload back.
Step 2: Edit login.html
The login form MUST contain these MikroTik variables:
<!-- MikroTik required form -->
<form name="login" action="$(link-login-only)" method="post">
<input type="hidden" name="dst" value="$(link-orig)" />
<input type="hidden" name="popup" value="true" />
<input type="text" name="username" placeholder="Username" />
<input type="password" name="password" placeholder="Password" />
<button type="submit">Connect</button>
</form>
<!-- Error message -->
$(if error)
<div class="error">$(error)</div>
$(endif)Critical: The variable names ($(link-login-only), $(link-orig), $(error)) are MikroTik template tags. They must remain exactly as shown.
Step 3: Style Your Login Page
Add your branding, CSS, images, and JavaScript. Just ensure the form variables remain intact. Example structure:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); font-family: Arial; }
.login-box { background: rgba(255,255,255,0.95); padding: 40px; border-radius: 10px; max-width: 400px; margin: 100px auto; box-shadow: 0 20px 60px rgba(0,0,0,0.3); }
.logo { text-align: center; margin-bottom: 30px; }
input[type=text], input[type=password] { width: 100%; padding: 12px; margin: 8px 0; border: 1px solid #ddd; border-radius: 5px; box-sizing: border-box; }
button { width: 100%; padding: 14px; background: #667eea; color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; }
button:hover { background: #5a6fd6; }
.error { color: #e74c3c; text-align: center; margin-top: 10px; }
</style>
</head>
<body>
<div class="login-box">
<div class="logo">
<img src="logo.png" alt="Your Business" width="200">
<h2>Welcome to Free WiFi</h2>
</div>
<form name="login" action="$(link-login-only)" method="post">
<input type="hidden" name="dst" value="$(link-orig)" />
<input type="hidden" name="popup" value="true" />
<input type="text" name="username" placeholder="Username or voucher code" required>
<input type="password" name="password" placeholder="Password" required>
<button type="submit">Connect to WiFi</button>
</form>
$(if error)<div class="error">$(error)</div>$(endif)
<p style="text-align:center;color:#888;margin-top:20px;font-size:12px">By connecting you agree to our terms of use.</p>
</div>
</body>
</html>Step 4: Upload Files
Upload the modified files to the router's /hotspot directory via WinBox Files or FTP. Include any images (logo.png, background.jpg).
Part 2: Walled Garden (Free Access)
Allow access to specific websites without login:
# HTTP walled garden (by domain)
/ip hotspot walled-garden add dst-host=*.yourdomain.com action=allow comment="Your website free"
/ip hotspot walled-garden add dst-host=*.google.com action=allow comment="Google search"
# IP walled garden (for HTTPS sites)
/ip hotspot walled-garden ip add dst-address=142.250.0.0/16 action=accept comment="Google IPs"
/ip hotspot walled-garden ip add dst-address=0.0.0.0/0 protocol=udp dst-port=53 action=accept comment="DNS"Use the IP walled garden for HTTPS sites – the HTTP walled garden can't match encrypted traffic.
Part 3: Voucher System
Basic Vouchers
# Create a user profile with time/data limits
/ip hotspot user profile add name=voucher-1hr rate-limit=5M/5M shared-users=1 session-timeout=1h
# Add voucher codes
/ip hotspot user add name=CAFE001 password=CAFE001 profile=voucher-1hr comment="1hr voucher"
/ip hotspot user add name=CAFE002 password=CAFE002 profile=voucher-1hr comment="1hr voucher"
/ip hotspot user add name=CAFE003 password=CAFE003 profile=voucher-1hr comment="1hr voucher"For professional voucher management (bulk generation, printing, expiry tracking), use MikroRadius or User Manager.
One-Click Login (No Password)
# Add trial profile for click-to-connect
/ip hotspot user profile add name=free-trial rate-limit=2M/2M session-timeout=30m
# Configure hotspot to allow trial login
/ip hotspot profile set [find] trial-uptime-limit=30m trial-uptime-reset=1dModify login.html to add a "Free 30 Min" button that submits the trial form.
Part 4: MAC-Based Auto-Login
# Auto-login known devices by MAC address
/ip hotspot user add name=AA:BB:CC:DD:EE:FF password="" mac-address=AA:BB:CC:DD:EE:FF profile=default
# Enable MAC cookie
/ip hotspot profile set [find] mac-auth-mode=mac-as-username mac-auth-password=""The device automatically connects without showing the login page. Useful for staff devices.
Part 5: RADIUS Integration for Billing
/radius add address=192.168.88.200 secret=RADIUSSecret service=hotspot
/ip hotspot profile set [find] use-radius=yes radius-accounting=yesMikroRadius adds:
- Self-service portal – Users buy packages online.
- Payment integration – M-Pesa, PayPal, Stripe.
- Bulk vouchers – Generate and print hundreds of voucher codes.
- Usage tracking – Data consumption per user, session history.
- Bandwidth plans – Automatic speed limiting by plan.
- Expiry management – Auto-disconnect when time/data runs out.
Part 6: Redirect After Login
# Redirect users to your website after login
/ip hotspot profile set [find] login-by=http-chap,http-pap html-directory=hotspot redirect-to=https://yourbusiness.com/welcomeTroubleshooting
- Login page not showing: Ensure the hotspot is active (
/ip hotspot print). Check that the client gets a DHCP IP from the hotspot pool. Clear the browser cache – modern browsers cache redirects aggressively. - Custom page looks broken: Check that all file references (images, CSS, JS) use relative paths and are uploaded to the /hotspot directory. The router doesn't serve external CDN resources until after login.
- HTTPS sites don't redirect to login: Modern browsers (HTTPS by default) make captive portal detection harder. Add Apple/Google/Microsoft captive portal detection domains to the walled garden.
- Voucher already used: Set
shared-users=1in the profile. Once the session expires, the voucher is consumed. For reusable vouchers, increase shared-users or session count. - Template variables not rendering: Ensure the file is saved as plain text (not Word/RTF). Variable syntax must be exactly
$(variable-name).
Conclusion
A polished hotspot experience makes the difference between "free WiFi" and "professional WiFi service." Brand your login page, offer free preview access via walled garden, generate voucher codes for paid access, and integrate with MikroRadius for a complete billing solution. The hotspot framework on MikroTik is extremely flexible – limited only by your HTML/CSS skills for the login page.