• Home
  • Software
  • Wi-Fi
  • Videos
  • About US
  • Contact Us
  • Downloads

Technology at your finger tips

  • Home
  • Privacy Policy
  • Terms and Conditions
  • Disclaimers
  • Contact Us
> Home » How To Customize MikroTik Hotspot login page with your own Design

How To Customize MikroTik Hotspot login page with your own Design

June 5, 2018 by admin

This tutorial to use 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 the customers faster. As social network one of the best engagement so you can use the Facebook page as 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 have posted the tutorial on 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 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 Hotspot captive portal so it doesn’t matter you want to customize Mikrotik CCR hotspot login page or Mikrotik RB750 hotspot login page default design.

  • The Best Way to Boost Your Wi-Fi Speed Up to 10x  [Tricks]

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 one of the best and reliable authentication gateway for home and office. If you are the owner of the small coffee shop or large hospitality,  Mikrotik for both users. 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 a hotspot page directly for the Mikrotik routerboard. Tool list to change the Mikrotik hotspot login page.

 

  1. FTP client ( for Mikrotik hotspot file download & upload)
  2. HTML Editor ( notepad + , or sublime)
  3. Mikrotik router you want to customize the hotspot page.
  •   How to Add Multiple SSID in Single Access Point [Multiple WiFi Name]

 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.

  1. Login Mikrotik Router and Configure hotspot.
  2. Download the default Mikrotik hotspot files
  3. Change the logo and company name In Mikrotik Hotspot page.
  4. Upload the customized Hotspot page file to Mikrotik router
  5. 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

  •  How to setup QoS to set internet Speed limit for WiFi User

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 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.

  1. Type Mikrotik router IP address in 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 your will Mikrotik Flash folder in the right side.

Hotspot Login Pages Design Template

 

Double click flash folder to open

Right-click on Hotspot folder and download it your computer

 

free wifi hotspot

3:- Customize Mikrotik Hotspot page

After download 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 Hotspot page open the HTML editor such as sublime or notepad plus. Open the hotspot folder on HTML editor.

Here I am using the sublime HTML editor.

  1. File-Open Folder
  2. Browse the hotspot folder you have downloaded from Mikrotik router.
  3. Select Folder

mikrotik hotspot login page download

 

After select 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 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

mikrotik hotspot login page template responsive

Change the Mikrotik Hotspot Center Logo.

  1. Replace the main logo you can move left right as per your choice to change float option.
  2. 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 the responsive and professional page.)

mikrotik hotspot template software

Change and add hotel description and other taglines on Mikrotik Hotspot login Page or any other page you want to add.

  1. 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.
  2. This is the change for username and password login box.

You can change color, increase the size of the 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 the error.

mikrotik hotspot

Change the Mikrotik website URL and Copyright section in Hotspot Page.

  1. Replace the company, hotel or any other website URL in this section.
  2. User Copy Right or Powered by the option to this section.

Download MikroTik Hotspot Login Page Material Design

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

This 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 Mikrotik router.

You will get a pop-up for replacing the file – click yes and wait for upload finish.

Upload with FileZilla follows the above steps to connect Filezilla again.

Now browse the hotspot folder right click and press the upload option.

Click replace file and folder yes option while asking for over-right.

 

captive portal design

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.

how to create hotspot login page with prepaid coupon in mikrotik

In this post, I used to customize the hotspot login page only. you can also follow to 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 with 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 Go to the download page find the X86  — CD Image and press in 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 mobile, tablet and PC. Apart from 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 

Filed Under: Hotspot, MikroTik Tagged With: how to change mikrotik hotspot login page, mikrotik customizing hotspot, mikrotik hotspot login page template responsive, mikrotik hotspot setup radius, mikrotik hotspot splash page, mikrotik landing page, mikrotik login page 2020, mikrotik responsive hotspot page

Recent Posts

  • How to Increase internet speed Up to 10x [Tricks]
  • Factory reset TP-link Archer C20 AC750
  • best free uTorrent alternate downloader for Windows and Mac
  • RecordCast – Capture a Screencast for Free without Installation
  • Best VPN for multiple Devices 2021 [Free & Paid]

Post by Month

  • February 2021
  • January 2021
  • December 2020
  • November 2020
  • September 2020
  • August 2020
  • July 2020
  • June 2020
  • May 2020
  • April 2020
  • March 2020
  • February 2020
  • January 2020
  • December 2019
  • November 2019
  • October 2019
  • September 2019
  • August 2019
  • July 2019
  • June 2019
  • May 2019
  • April 2019
  • March 2019
  • February 2019
  • January 2019
  • December 2018
  • November 2018
  • October 2018
  • September 2018
  • August 2018
  • July 2018
  • June 2018
  • May 2018
  • April 2018
  • March 2018
  • February 2018
  • January 2018
  • December 2017
  • November 2017
  • October 2017
  • September 2017
  • August 2017
  • July 2017
  • June 2017
  • May 2017
  • April 2017
  • March 2017
  • February 2017
  • January 2017
  • December 2016
  • November 2016
  • October 2016
  • September 2016
  • August 2016
  • January 2016
  • August 2015
  • Home
  • Privacy Policy
  • Terms and Conditions
  • Disclaimers
  • Contact Us

Recent Posts

  • How to Increase internet speed Up to 10x [Tricks]
  • Factory reset TP-link Archer C20 AC750
  • best free uTorrent alternate downloader for Windows and Mac
  • RecordCast – Capture a Screencast for Free without Installation
  • Best VPN for multiple Devices 2021 [Free & Paid]

Copyright © 2021 & Powered By Genesis Framework