How To Change Default Mikrotik Hotspot Login Page with your own Design
Recently I have posted tutorial for how to configure Mikrotik Hotspot. When you configure Mikrotik hotspot than you get default Mikrotik login page with Mikrotik logo. In this post you learn how to customize mikrotik hotspot login page for hotel, coffee shop, and restaurant. With help of this tutorial you can easily change mikrotik default logo and website link in hotspot login page. Mikrotik all routerboard support Hotspot captive portal so doent matter you want to customize Mikrotik CCR hotspot login page or Mikrotik RB750 hotspot login page default design.
To create a mikrotik hotspot login page your required some tool and basic steps to design own login page. Get details tools for Mikrotik hotspot page design.
Mikrotik Hotspot Login Page design Tools Required.
Mikrotik Hotspot captive portal one of the best and reliable authentication gateway for home and office. If you are owner of small coffee shop or a large hospitality, Mikrotik for both use. You just need to customize Mikrotik default hotspot page with your hotel logo or design. If you are using Mikrotik router board hotspot you can also design hotspot page directly for Mikrotik routerboard. To Tool list to change Mikrotik hotspot login page.
- FTP clinet ( for Mikrotik hotspot file download & upload)
- HTML Editor ( notepad + , or sublime)
- Mikrotik router you want to customize hotspot page.
Step to Customize Mikrotik Hotspot Captive Portal Login Page
There are some steps to design your Mikortik hotspot login page. Fine the 5 Steps to customise your Mikrotik hotspot page design.
- Login Mikrotik Router and Configure hotspot.
- Download the default Mikrotik hotspot files
- Change logo and company name In Mikrotik Hotspot page.
- Upload the customized Hotspot page file to Mikrotik router
- Test the login page.
1:- Login Mikrotik Router and Hotspot Configuration.
To customize hotspot page we must configure Hotspot first to generate the Hotspot files.
2- Mikrotik Hotspot File Downloads from FTP and Winbox.
Hotspot file can be download through Ftp client or direct from winbox.
To download from Winbox connect router and login Winbox with IP Address.
Go to File see the Hotspot folder. Copy hotspot folder to your Desktop or any drive you want to save it. You can just click Hotspot folder and drag to Desktop and release button to drop it.
Mikrotik Hotspot File download with FTP client.
To download hotspot file use any ftp client-
Download FTP client form here
I am using Filezilla here so I will show you in filezilla FTP client.
Open Filezila ftp client software and connect Mikrotik router flash folder.
- Type mikrotik router IP address in host option
Username- admin , password – default blank (if you set password use the same)
Click Quick connect button
2:- After successful connection your will Mikrotik Flash folder in right side.
Double click flash folder to open
Right click on Hotspot folder and download it your computer
3:- Customize Mikrotik Hotspot page
After download now steps to edit the design and replace your company logo to Mikrotik logo. Ready your company logo, favicon and other image you want to add in Mikrotik hotspot login and logout page.
TO edit Hotspot page open the HTML editor such as sublime or notepad plus. Open the hotspot folder on HTML editor.
Here I am using sublime html editor.
- File-Open Folder
- Browse the hotspot filde your have downloaded from Mikrotik router.
- Select Folder
After select folder your all Login page, logout page, status page and any other file will show in sublime html editor.
Design Hotspot Login Page
Select the login page from left side menu and change the title , logo, company name and other changes.
- Page Title – Change the Login page tile here you want to give to your page. EXP- welcome to Free WiFi
- Change the Background color – use the color picker to get the color code for background.
- Change the company logo here-
To change logo copy your logo to img file and change the image name in the number 3 option. Use the image format also.exp – companylogo.jpg, compnaylogo.png
Change the Mikrotik Hotspot Center Logo.
- Replace the main logo you can move left right as per your choice to change float option.
- Change the center logo in this option. You can also move the left right with style float option.
(if you know basic html or CSS than you can easily understand how to design Mikrotik hotspot page with responsive and professional page.)
Change and add hotel description and other tag line on Mikrotik Hotspot login Page or any other page you want to add.
- Change or add the about your hotel, coffe shop or about WiFi what ever you want to add in this line. It will show above login box.
- This is the change for username and password login box.
You can change color, increase size of username and password box. Change the login button color or design.
Note:- please only do major changes if know how to work on CSS and html otherwise your Mikrotik hotspot login page may give error.
Change Mikrotik website URL and Copy right section in Hotspot Page.
- Replace the company, hotel or any other website URL to this section.
- User Copy Right or Powered by option to this section.
Note:- in this tutorial for Mikrotik hotspot page design I have give only basic changes which can done by everyone. But if you know CSS and HTML than you can do more changes. Motive of doing basic changes on page to provide a medium to customize Mikrotik hotspot page to a person who don’t know work on CSS and html.
4:- Upload customized Hotspot files to Mikrotik Hotspot Router.
This is the final steps to close your Mikrotik hotspot customization and run into live network.
To upload directly from winbox follow same steps.
Login router—go to files folder
Copy hotspot folder and pest in file folder in Mikrotik router.
You will get pop-up for replace the file – click yes and wait for upload finish.
Upload with filezilla follow the above steps to connect filezilla again.
Now browse the hotspot folder right click and press upload option.
Click replace file and folder yes option while asking for over-right.
5-Test the New Designed Hotspot Login page.
Now connect router to internet and check the page. Your page should change the default Mikrotik hotspot login page and other page you have customized.
This is the new customise page for me which I have done during this post tutorials.
In this post I used to customise hotspot login page only. you can also follow to customize logout, status page, or any other pages you want to design in Mikrotik hotspot captive portal.