MikroTik default Hotspot Setup comes with a DHCP Server (which uses same IP Pool of Hotspot Server) to provide IP address and other network information to a connected device. Using this automatic IP address connected device can access Hotspot login page. After successfully login, a one to one NAT IP address is also assigned for the device and this process happens internally in Hotspot Server. User device cannot know this one to one NAT IP assigning. However, Hotspot Server actually occupies two IP address for a successfully logged in user. For this, sometimes Hotspot IP Pool gets congested and new user cannot be able to connect to Hotspot network and hence Hotspot network get hampered. To overcome this situation we can configure DHCP IP Pool and Hotspot IP Pool separately. If we do so, DHCP will provide IP address from its own IP pool and Hotspot will also assign one to NAT IP address from its own IP Pool. For using two different IP Pools, there will be no IP shortage and Hotspot network can run smoothly.  To configure separate IP Pool for DHCP and Hotspot network, we need to apply some tricks and in this article I will discuss how to configure Hotspot and DHCP servers’ IP Pool separately using Winbox.

Configuring Separate IP Pool for Hotspot and DHCP Server  

MikroTik Hotspot Server has some complex configuration and doing any mistake on default configuration can shutdown Hotspot network. So, we have to be careful before doing any new configuration. Following the below three steps we can easily separate Hotspot and DHCP Server IP Pool.

• Assigning a new gateway for Hotspot
• Creating a new IP Pool for Hotspot
• Assigning new IP Pool in Hotspot user profile
• Creating new NAT rule for the New IP Block.

Step 1: Assigning a new gateway on Hotspot Interface

MikroTik Hotspot default setup configures same gateway IP address for both DHCP Server and Hotspot Server. So, at first we have to set different gateway for Hotspot Server. The following steps will show how to assign different gateway IP for Hotspot Server.

• Login MikroTik Router with Winbox software using full permission user.
• Go to IP > Addresses menu item. Address List window will appear.
• Click on PLUS SIGN (+) to add a new gateway IP address. New Address window will appear.
• Put new gateway IP address (example: 192.168.30.1/24) in Address input field.
• Choose interface (example: ether2) on which Hotspot Server was installed from Interface dropdown menu.
• Click Apply and OK button.

Step 2: Creating a New IP Pool for Hotspot

After creating a new gateway, we will now create a new IP Pool for Hotspot. Hotspot one to one NAT IP will be assigned from this IP Pool. The following steps will show how to create a new IP Pool for Hotspot Server.

• Go to IP > Pool menu item. IP Pool window will appear.
• Click on PLUS SIGN (+). New IP Pool window will appear.
• Put a Pool name (example: Hotspot Pool) in Name input field.
• Now put IP range (example: 192.168.30.2-192.168.30.254) in Addresses input field.  
• Click Apply and OK button.

Step 3: Assigning Created IP Pool in Hotspot User Profile

After creating new IP Pool for Hotspot Server, we will now assign this pool in Hotspot user profile so that connected user can get one to one NAT IP from this IP Pool. The following steps will show how to assign IP Pool in Hotspot user profile.

• Go to IP > Hotspot menu item. Hotspot window will appear now.
• Click on User Profiles tab and then click on a created user profile where you want to assign this new IP Pool. Hotspot User Profile edit window will appear.
• Under General tab, choose newly created IP Pool from Address Pool drop down menu.
• Click Apply and OK button.
• Do the above steps to all your remaining user profiles.

Now one to one NAT IP will be assigned from this IP Pool. But at this moment user will not get internet because we have not yet configured NAT for this IP Block. So, in the next section we will do NATing for this IP Block.

Step 4: Creating New NAT Rule for the New IP Block

At last stage we enable NATing for this new IP Block so that these IP addresses can be NATed and user can get internet access. The following steps will show how to create new NAT rule in MikroTik Firewall.

• Go to IP > Firewall menu item. Firewall window will appear.
• Click on NAT tab and then click on PLUS SIGN (+). New NAT Rule window will appear.
• Under General tab, choose srcnat from Chain dropdown menu.
• Put new IP block (example: 192.168.30.0/24) in Src. Address input filed.
• Now click on Action tab and choose masquerade from Action dropdown menu.
• Click Apply and OK button.

Our Hotspot and DHCP Server IP block is now separated and we have plenty of IP addresses to assign new Hotspot user. If we wish we can setup more IP Blocks (following the above steps) for our Hotspot Server also.

How to separate Hotspot and DHCP server IP Block has been discussed in this article. I hope you will now be able to create new IP Block for your Hotspot Server. However, if you face any confusion, feel free to discuss in comment or contact me from Contact page. I will try my best to stay with you. 

MikroTik Hotspot is an awesome service that can be customized widely. When MikroTik Hotspot is enabled on an interface, it adds dynamic destination NAT rules which will redirect all HTTP and HTTPS requests from unauthorized users to the Hotspot authentication proxy. So, no user can get internet access in Hotspot network without authentication. MikroTik Hotspot also uses one to one NAT providing an IP address from selected IP Pool and this IP address handles user’s data and limitation. Sometimes we may feel that this second IP address is completely IP wasting or sometimes we see that our network block has few IP addresses to serve new clients. So, in this article we will see how to solve this MikroTik Hotspot issue in our Hotspot network.     

What is HotSpot One to One NAT? 

In a Hotspot network, a client has to get an IP address to get Hotspot Login page because without authentication client will not be able to get internet access. The IP address may be set on the client statically or may be leased from a DHCP server. The DHCP server may provide ways of binding lent IP addresses to clients MAC addresses, if required. The HotSpot system does not care how client get an address before he/she gets to the HotSpot login page.

HotSpot server automatically and transparently assigns a new IP address for an authenticated client from unused address of IP pool selected in Hotspot user profile. The users will not notice the translation because there will not be any changes in the users’ network configuration but the router itself will see completely different source IP addresses on packets sent from the clients even the firewall mangle table will see the translated address. This technique is called Hotspot one-to-one NAT or Universal Hotspot NAT. It was also known as Universal Client in earlier RouterOS version. This one to one NAT technique is completely maintained by Hotspot Server.

How to Keep Same Host and Hotspot NAT IP Address  

We usually configure Hotspot Server with Hotspot Setup wizard which will configure DHCP Server and Hotspot Server on same IP Pool and same network. So, when a client gets authenticated, he/she usually uses two IP addresses, one for Host IP address and another for Hotspot NAT IP address (Hotspot NAT IP address is denoted as to-address in MikroTik Hotspot). If we feel this is a waste of IP address, MikroTik Hotspot provides opportunity to set same Host and Hotspot NAT IP address.

The following steps will show how to setup same Host IP address and to-address in MikroTik Hotspot.

• Login to MikroTik Router using Winbox software with full permission user.
• Go to IP > Hotspot menu item. Hotspot window will appear.
• Click on User Profiles tab and then double click on any created user profile.
• Under General tab, choose none from Address Pool drop down menu.
• Click Apply and OK button.
• Do this for all your created user profiles including default profile.

As we have set no IP Pool for Hotspot user, Hotspot Server will assign same Hotspot NAT IP address (to address) that was assigned for the Host. 

It is also possible to define separate IP network for both DHCP Server and Hotspot Server. In the next article we will see how to configure Hotspot Server with separate IP Network.

If you curious to know more about MikroTik Hotspot, search MikroTik Hotspot Server in System Zone search box and get your desired topics instantly. 

What is Hotspot one to one NAT and how to keep same Host and to-address have been discussed in this article. I hope you are now able to customize Hotspot server yourself. However, if you face any confusion about MikroTik Hotspot one to one NAT, feel free to discuss in comment or contact me from Contact page. I will try my best to stay with you.

MikroTik Hotspot is an awesome service that can be customized according to any organization need. MikroTik Hotspot is able to authenticate and authorize network users so easily. Besides premium Hotspot service, it can also be used as a public Hotspot network. Although public network is a free network service, it can be a better source of income by serving ads. As no user can get internet access without visiting Hotspot login page, the login page is main space for serving ads. MikroTik Hotspot is nothing but a HTML page. So, knowing simple HTML, CSS and JavaScript, we can easily customize Hotspot login page according to our demand and can also put partner’s ads in login page to increase earning.  

In my previous article, I discussed how to configure MikroTik Hotspot using Winbox. Default Hotspot configuration provides a login page that we may find boring and not so perfect for our organization. So, in this article I will discuss how to customize Hotspot Login page according to our demand so easily.

3 Easy Steps to Customize MikroTik Hotspot Login Page

Customizing MikroTik Hotspot login page is not so difficult task. Knowing some basic HTML, CSS and JavaScript, we can easily customize login page according to our demand. So, if we wish to customize login page, we need to do the following three steps.

• Downloading HTML login page from MikroTik Router
• Editing login page with own HTML, CSS and JavaScript code
• Uploading edited login page to MikroTik Router

Steps 1: Downloading HTML login page from MikroTik Router

When we setup Hotspot Server, it automatically creates necessary and basic files required to authenticate and authorize Hotspot users. These files including login page are kept in Files directory in MikroTik Router. So, at first we have to download the HTML login page from Files directory because there is no way to edit files keeping in MikroTik Router. The following steps will show how to download Hotspot login page from Files directory.

• Login to MikroTik Router using Winbox software using full permission user credentials.
• Click on Files menu. File List window will appear where you will find a lot of files created by Hotspot Server.
• Search and find hotspot/login.html file and then drag and drop this file in your Desktop or in a directory where you prefer.

Step 2: Editing Login Page with own HTML, CSS and JavaScript Code

After downloading HTML login page, we will now edit the login file. So, open this file with any HTML editor. I personally use Notepad++ because it is free and easy to use. But if you have better editor, you can also use that.

Opening the login file, you will find basic HTML tags like html, head, title, body etc. are present there. You will also find CSS code in style tag and JavaScript code in script tag. Besides these, some logical codes written in MikroTik own language is present there.

We must always remember not to touch MikroTik Router’s logical code as well as JavaScript code written by MikroTik Router. But we are free to extend JavaScript according to our demand.

Hotspot login area is a HTML form which is aligned with static table element. If we wish we can remove the table element replacing with any suitable HTML tag for designing purpose but we must keep the form element and its action untouched as well as the input elements and its attributes. CSS selector like class and id can be applied to any HTML element for designing purpose.

Keeping the above restrictions in mind we are now free to customize the login page as our wish. I have rearranged the login page and applied some designs on it in my LAB Hotspot Server. The entire HTML, CSS and JavaScript code is given below for your reference.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="expires" content="-1" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"/>
<title>System Zone Hotspot</title>
<style type="text/css">
body {
 color: #737373; 
 font-size: 14px; 
 font-family: verdana;
}
.container{
   width:300px;
   height:auto;
   margin:0 auto;
   margin-top:10vh;
   -webkit-box-shadow: 3px 3px 5px 6px #ccc;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
   -moz-box-shadow:    3px 3px 5px 6px #ccc;  /* Firefox 3.5 - 3.6 */
    box-shadow:         3px 3px 5px 6px #ccc; 
   padding:15px 20px 25px 20px;
}
.banner{
  width:100%;
  text-align:center;
}
.banner img{
   max-width:100%; 
   height:auto;   
}
.banner label{
   font-size:20px;
   font-weight:bold;
}
.error-panel{
  width:100%;
  height:auto;
  margin-top:20px;
  color:red;
}
.login-panel{
  width:290px;
  margin-top:30px;
}
.login-input{
   width:100%;
   height:40px;
   margin-top:20px;
   margin-bottom:20px;
}
.login-input input{
  width:100%;
  height:35px;
}
#login-button{
  width:102%;
  text-align:right;
}
#login-button input{
  width:100px;
  height:38px;
  background-color:#b97d00;
  border-color:#b97d00;
  color:#fff;
}
#login-button input:hover{
  background-color:#000;
  border:1px solid #000;
}
.free-trial{
  width:100%;
  margin-top:20px;
  margin-bottom:10px;
  text-align:center;
}
.free-trial a{
  text-decoration:none;
  color:#b97d00;
}
.free-trial a:hover{
  text-decoration:underline;
}
.datetime{
   width:100%;
   margin-top:15px;
   text-align:center;
   font-size:20px;
}
</style>
</head>

<body onload="startTime()">
$(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)
            
			<div class="container">
			        <div class="banner">
					  <img src="/img/logo.png" />
					  <label>Hotspot Login</label>
					</div>
					<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" />	
                            $(if error)
							 <div class="error-panel">
							   $(error)
							 </div>
							$(endif)						
							<div class="login-panel">							
							 <div class="login-input">
							  <input  name="username" type="text" value="$(username)" placeholder="Login username"/>
							 </div>								
							 <div class="login-input">
							  <input name="password" type="password" placeholder="Login password"/>
							 </div>											
							  <div id="login-button"><input type="submit" value="Login" /></div>
                              <div class="free-trial">
                                $(if trial == 'yes')
								    Free trial available, <a href="$(link-login-only)?dst=$(link-orig-esc)&amp;username=T-$(mac-esc)">click here</a>.
								  $(endif)
                              </div>
                              <div class="datetime">
							    <span id="date"></span> - <span id="time"></span>
							  </div>							  
							</div>
					</form>
		    </div>	
<script type="text/javascript">
<!--
  document.login.username.focus();
//-->
 var dt = new Date();
 document.getElementById("date").innerHTML = dt.toLocaleDateString();
 function startTime() {
  var today = new Date();
  document.getElementById("time").innerHTML = today.toLocaleTimeString()
  var t = setTimeout(startTime, 500);
}
</script>
</body>
</html>

The above code is written for a simple login page but it includes all required HTML, CSS and JavaScript code as example. So, if you have HTML, CSS and JavaScript experience, you can easily extend your login page functionality. 

Note: if you have any image in login page, the image must upload in hotspot/img directory and add the image source as /img/logo.png where logo.png is an image file that representing company logo.

Step 3: Uploading Edited Login Page to MikroTik Router

After editing login page, we will now upload the edited file to MikroTik Router. The following steps will show how to upload the edited file in MikroTik Router.

• Login to MikroTik Router again with Winbox software.
• Click on Files menu item to open File List window.
• Remove the old login page under hotspot directory.
• Now drag and drop your edited file under hotspot directory.

Now refresh your login page and you will find the new login page designed by yourself. If you use my above code, the login page looks the following image.

How to customize MikroTik Hotspot login page with HTML, CSS and JavaScript has been discussed in this article. I hope you will now be able to customize MikroTik Hotspot login page so easily. However, if you face any confusion to customize Hotspot login page with HTML, CSS and JavaScript code, feel free to discuss in comment or contact me from Contact page. I will try my best to stay with you.