This tutorial uses Mikrotik Hotspot Free WiFi to promote your business and hotels. With Customize MikroTik Hotspot login page with your Logo and company website, you can attract customers faster. As social networks one of the best engagement you can use the Facebook page as a Hotspot login page in your Mikrotik Hotspot gateway to promote your business on social networks. as in this part, I will not include hotspot login with Facebook Like page authentication in this post. I will bring a separate post for the Facebook login page for MikroTik hotspot authentication tutorials.
How To Customize MikroTik Hotspot login page with your own Design
Recently I posted a tutorial on how to configure Mikrotik Hotspot. When you configure Mikrotik hotspot you get the default Mikrotik login page with Mikrotik logo. In this post, you learn how to customize the Mikrotik hotspot login page for hotels, coffee shops, and restaurants. With the help of this tutorial, you can easily change the Mikrotik default logo and website link in the hotspot login page. Mikrotik all router board support the Hotspot captive portal so it doesn’t matter if you want to customize Mikrotik CCR hotspot login page or the Mikrotik RB750 hotspot login page default design.
To create a Mikrotik hotspot login page you are required some tool and basic steps to design your own login page. Get detailed tools for Mikrotik hotspot page design.
Popular Post:
- Mikrotik Hotspot Gateway Configuration with Router OS from Winbox
- How to block a Website and Apps on basic WiFi Router
Mikrotik Hotspot Login Page Design Tools Required.
Mikrotik Hotspot captive portal is one of the best and most reliable authentication gateways for home and office. If you are the owner of a small coffee shop or large hospitality, Mikrotik is for both users. You just need to customize the Mikrotik default hotspot page with your hotel logo or design. If you are using Mikrotik router board hotspot you can also design a hotspot page directly for the Mikrotik routerboard. Tool list to change the Mikrotik hotspot login page.
- FTP client ( for Mikrotik hotspot file download & upload)
- HTML Editor ( notepad + , or sublime)
- Mikrotik router you want to customize the hotspot page.
Step to Customize Mikrotik Hotspot Captive Portal Login Page
There are some steps to design your Mikrotik hotspot login page. Fine the 5 Steps to customize your Mikrotik hotspot page design.
- Login Mikrotik Router and Configure hotspot.
- Download the default Mikrotik hotspot files
- Change the logo and company name In the Mikrotik Hotspot page.
- Upload the customized Hotspot page file to Mikrotik router
- Test the login page.
192.168.0.1/192.168.1.1 Tenda Login
1:- Login Mikrotik Router and Hotspot Configuration.
To customize the hotspot page we must configure Hotspot first to generate the Hotspot files.
See here to configure your Mikrotik Route board for Hotspot configuration
2- Mikrotik Hotspot File Downloads from FTP and Winbox.
Hotspot file can be download through Ftp client or directly from Winbox.
To download from Winbox connect to router and login Winbox with IP Address.
Go to File see the Hotspot folder. Copy the hotspot folder to your Desktop or any drive you want to save it. You can just click the Hotspot folder and drag it to the Desktop and release button to drop it.
Before customizing hotspot page Backup Mikrotik Configuration file.
Mikrotik Hotspot File download with FTP client.
To download hotspot file to use any FTP client-
Download FTP client from here
I am using Filezilla here so I will show you in FileZilla FTP client.
Open Filezilla FTP client software and connect the Mikrotik router flash folder.
- Type the Mikrotik router IP address in the host option
Username- admin, password – default blank (if you set a password use the same)
Click the Quick Connect button
2:- After a successful connection you will Mikrotik Flash folder on the right side.
Double click flash folder to open
Right-click on Hotspot folder and download it your computer
3:- Customize Mikrotik Hotspot page
After downloading now steps to edit the design and replace your company logo with the Mikrotik logo. Ready your company logo, favicon and another image you want to add in the Mikrotik hotspot login and logout page.
TO edit the Hotspot page open an HTML editor such as Sublime or notepad plus. Open the hotspot folder on the HTML editor.
Here I am using the sublime HTML editor.
- File-Open Folder
- Browse the hotspot folder you have downloaded from the Mikrotik router.
- Select Folder
After select the folder, your all Login page, log out the page, status page, and any other file will show in the sublime HTML editor.
Read More:
- The 5 Best Open Source Captive Portal for Hotspot Authentication (2018)
- How to design OTP Based Authentication Hotspot Solution for Coffee Shop
Design Hotspot Login Page
Select the login page from the left side menu and change the title, logo, company name, and other changes.
- Page Title – Change the Login page tile here that 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 the background.
- Change the company logo here-
To change logo copy your logo to the image 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 to right as per your choice to change the 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 then you can easily understand how to design Mikrotik hotspot page with a responsive and professional page.)
Change and add hotel description and other taglines on Mikrotik Hotspot login Page or any other page you want to add.
- Change or add the about your hotel, coffee shop or about WiFi whatever you want to add in this line. It will show above the login box.
- This is the change for the username and password login box.
You can change color, and increase the size of the username and password box. Change the login button color or design.
Note:- please only make major changes if know how to work on CSS and HTML otherwise your Mikrotik hotspot login page may give the error.
Change the Mikrotik website URL and Copyright section in Hotspot Page.
- Replace the company, hotel or any other website URL in this section.
- User Copy Right or Powered by the option to this section.
Note:- in this tutorial for Mikrotik hotspot page design I have give only basic changes which can be done by everyone. But if you know CSS and HTML then you can do more changes. The motive of doing basic changes on the page to provide a medium to customize the Mikrotik hotspot page to a person who doesn’t know work on CSS and HTML.
4:- Upload customized Hotspot files to Mikrotik Hotspot Router
These is the final steps to close your Mikrotik hotspot customization and run into the live network.
To upload directly from Winbox follow the same steps.
Login router—go to the files folder
Copy the hotspot folder and pest in the file folder in the Mikrotik router.
You will get a pop-up for replacing the file – click yes and wait for the upload finish.
Upload with FileZilla follows the above steps to connect Filezilla again.
Now browse the hotspot folder click and press the upload option.
Click replace file and folder yes option while asking for over-right.
5: Test the New Designed Hotspot Login page
Now connect the router to the internet and check the page. Your page should change the default Mikrotik hotspot login page and another page you have customized.
This is the new customize page for me which I have done during this post tutorials.
In this post, I used to customize the hotspot login page only. you can also customize log out, status page, or any other pages you want to design in Mikrotik hotspot captive portal.
Tips: You can also use your Desktop PC as Mikrotik Hotspot Gateway by using Hotspot ISO image which is available on the Routerbaod download section.
You can get a Free ISO Image of Mikrotik Hotspot Software for Your PC now. | Download Now
After Going to the download page find the X86 — CD Image and press the floppy icon to download.
Conclusion:
The conclusion of “customize the Mikrotik Hotspot Login Page” is you can design the Mikrotik hotspot page template as per your skills in HTML. if you know bootstrap than you can also create responsive Mikrotik wifi hotspot login which auto take the size accordingly for mobile, tablet and PC. Apart from the hotspot captive page if we talk about the Mikrotik feature than its one of the best cost-effective hotspot solutions for small and bigger ISP. You can also use the load balancing Mikrotik in RB450 and RB750 which is not more than 40$.
Related Post
- Mikrotik DISC Lite5 Setup and Configuration Manuals
- 5 Best Long Range Wireless Point to Point Device for Internet and CCTV
- 5 Best Long Range Wireless Point to Point Device for Internet and CCTV
Video| How to Customize MikroTik Hotspot login page with Own Templates