If you would like to design and host your own splash page, you need to set up Walled Garden.
To set up the Walled Garden, you need to perform the following steps:
- In the Control Center go to Manage > Locations > Click on name > Modify Hotspot Data > SET CUSTOM SPLASH PAGE (WALLED GARDEN):Enter the full URL that you would like to use, for example: http://www.yourdomain.com/splash.htmlIn case of Hotspot PRO / FREE Vouchers / SMS, you need to redirect users back to our page so they can get access or log in. You can find the backlink in the same section of the Control Center.
- You need to setup your router the following way:Go to Services > Hotspot, then:Special Settings > ENABLECustom Splash Page (Walled Garden) > CHECKIn the UAM allowed field, enter: www.yoursite.com (your domain where your special page is hosted, ONLY THE DOMAIN NAME!)Go to Services > Hotspot, then:Special Settings > ENABLEDisplay Login on Splash Page (Combined) > UNCHECKCustom Splash Page (Walled Garden) > CHECKIn the UAM allowed field, enter: www.yoursite.com (your domain where your special page is hosted, ONLY THE DOMAIN NAME!)You need to run the setup command again.
Change the Splash Page URL in the UAM Settings.
The router will use a stripped down version of its internal login page and will call your webpage in this window. Users will have to login here.
A. Add your walled garden’s domain (for example: *.yourwebsite.com) to the allowed domains list. Click IP > HotSpot > Walled Garden, and click the + sign.
B. Edit the highlighted part of the following html file so that your website’s full url is called in an IFRAME and save the file as login.html.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>mikrotik hotspot > login</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="pragma" content="no-cache" /> <meta http-equiv="expires" content="-1" /> <style type="text/css"> body {color: #737373; font-size: 10px; font-family: verdana;} textarea,input,select { background-color: #FDFBFB; border: 1px solid #BBBBBB; padding: 2px; margin: 1px; font-size: 14px; color: #808080; } a, a:link, a:visited, a:active { color: #AAAAAA; text-decoration: none; font-size: 10px; } a:hover { border-bottom: 1px dotted #c1c1c1; color: #AAAAAA; } img {border: none;} td { font-size: 14px; color: #7A7A7A; } </style> </head> <body> $(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 type="text/javascript" src="/md5.js"></script> <script type="text/javascript"> <!-- 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) <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" /> <table width="100" style="background-color: #ffffff"> <tr><td align="right">login</td> <td><input style="width: 80px" name="username" type="text" value="$(username)"/></td> </tr> <tr><td align="right">password</td> <td><input style="width: 80px" name="password" type="password"/></td> </tr> <tr><td> </td> <td><input type="submit" value="OK" /></td> </tr> </table> </form> <script type="text/javascript"> <!-- document.login.username.focus(); //--> </script> <IFRAME SRC='http://WWW.YOURWEBSITE.COM/URL.HTML' width="100%" height="3000" frameborder='0' SCROLLING='no' ></IFRAME> </body> </html>C. Save it as login.html on your computer then copy it to your router. Click File on Mikrotik and a new window will come up. Simply drag and drop the file from your window’s file manager into the hotspot directory.
D. For Hotspot PRO locations you should provide a link back to the splash page so that clients can buy access. In order for this to work your splash page setting should be non combined. Click manage-locations-name of location – Modify Hotspot Data & Settings – and uncheck Display Login Box on Main Splash Page. The URL is: https://customer.hotspotsystem.com/customer/index.php?operator=YOUROPERATORUSERNAME&location=YOURLOCATIONNUMBER
- Whitelist the domain where you are redirecting, see: http://help.hotspotsystem.com/knowledgebase/allow-free-browsing-of-certain-websites
- HOTSPOT FREE BASIC PLUS ONLY: The setup is a bit tricky as you need to call our page in an iframe so users will be able to log in directly from your page. Create a HTML on your web server similar to this:
The HOTSPOT FREE BASIC PLUS solution with WALLED GARDEN does not work with MIKROTIK routers
-
<!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> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>External Page Sample with Hotspot FREE BASIC / SOCIAL</title> </head> THIS IS YOUR MAIN HTML CODE. YOU CAN PUT YOUR GRAPHICS, TEXT, ETC HERE. </center> <iframe src ="https://customer.hotspotsystem.com/customer/prelogin.php?operator=YOUROPERATNORUSERNAME&location=LOCATIONID" width="100%" height="150" scrolling="no" frameborder="0"> <p>Your browser does not support iframes.</p> </iframe> </body> </html>
In this code you need to replace OPERATORUSERNAME to your operator username, LOCATIONID to location ID (1 for location #1, 2 for location #2, etc). This URL will call the router’s built-in login URL. You can find this in the Control Center > Manage > Locations > click on name > Modify Hotspot Data > Splash Page Settings > Internal Login URL. If you are using Mikrotik/Open-Mesh or custom, you need to modify this.
You may want to change the layout of the LOGIN frame.
We created a minimized version of SPLASH page which contains only two lines (you can customize this further in the Skin Management) so you can easily embed that into the iframe on your page. The skin is called “SPLASH External”.
You can change the location’s skin in Manage > Locations > Click on name > Modify Hotspot Settings > Splash Page Settings > Skin (Style/Theme of Splash Page), change it to SPLASH External.
You can also create a new skin from this skin for customization to match with your layout, and you can also assign the skin from there.