Custom Captive Portal Start Page

Owned by Deprecated (JIRA SOCIFI) (Unlicensed)
Last updated: Jul 13, 2017
5 min read

In case you need to add a custom Captive Portal Start Page (A Landing Page after Public WiFi connection is triggered), you need to follow steps bellow.

Prerequisites

  • Active SOCIFI Dashboard account
  • Mikrotik hotspot (solution was tested on Mikrotik but should work on different vendors also)
  • Self-hosted HTML page as a start page for the Captive Portal

How it work?

After the visitor tries to connect to Public WiFi, the hotspot will redirect the visitor directly to the hotspot's owner Start Page instead of SOCIFI Captive Portal. The request contains hotspot attributes in _GET parameters that are important to authenticate and authorise the visitor.

Those attributes have to be forwarded to SOCIFI Captive Portal as the next step to a successful connection.

Step-By-Step Guide

  1. Register hotspot under your SOCIFI Dashboard account
  2. Modify hotspot settings to redirect the visitor to the desired Custom Start Page. (e.g. change connect.socifi.com to www.site.url/my_page)
  3. Do not forget to add the new Captive Portal domain into to the Walled Garden settings.
  4. Create a custom HTML page. The HTML page have to be reachable directly without any other redirection.

  5. Within the customised HTML page, read requested _GET parameters and create a new link that points to SOCIFI Captive Portal.

    Example:
    Your requested page: http://www.site.url/my_page?rad=yes&serial=XXYYXXYYXYY&client_mac=AABBAABBAA&client_ip=10.5.50.226&userurl=http://somepage.cz/&login_url=http://10.5.50.1/login
    will change again into this: http://connect.socifi.com/?rad=yes&serial=XXYYXXYYXYY&client_mac=AABBAABBAA&client_ip=10.5.50.226&userurl=http://somepage.cz/&login_url=http://10.5.50.1/login

    In case you have a White Label, change connect.socifi.com to your own White Labeled domain

  6. Use the new link in the Call To Action Button on your custom page.

After finishing all six steps above, you should be able to see your Custom Start Page that will forward the visitors to the SOCIFI Captive after the click event.

Advanced Settings:

Dedicated Free and Dedicated Premium Buttons

In case you would like to have a dedicated CTA Button for Free WiFi and another CTA Button for Premium (Paid WiFi) you should follow this guide: 

  1. Follow steps 1-4 of the Step-By-Step Guide
  2. Create two Brands in your SOCIFI Dashboard
    1. The first brand will be used for Free connections
      1. Set the brand to accept free connections only
      2. Register new virtual Mikrotik hotspot with serial name in format "mkt{BrandId}free" (e.g. mkt1252free)
    2. The second one will be used only for Premium (Paid) connections
      1. Set the brand to accept premium (PayThru) connections only
      2. Register new virtual Mikrotik hotspot with serial name in format "mkt{BrandId}premium" (e.g. mkt1253premium)
  3. Modify requested parameters to be able to forward the visitor to the free or premium version of the Captive Portal

    Follow step 5. from Step-By-Step Guide and change domain and serial either:

    Example: 
    your requested page: http://my.site.url/my_page?rad=yes&serial=XXYYXXYYXYY&client_mac=AABBAABBAA&client_ip=10.5.50.226&userurl=http://somepage.cz/&login_url=http://10.5.50.1/login
    will change into this for free connection: http://connect.socifi.com/?rad=yes&serial=mkt1252free&client_mac=AABBAABBAA&client_ip=10.5.50.226&userurl=http://somepage.cz/&login_url=http://10.5.50.1/login
    or for premium: http://connect.socifi.com/?rad=yes&serial=mkt1253premium&client_mac=AABBAABBAA&client_ip=10.5.50.226&userurl=http://somepage.cz/&login_url=http://10.5.50.1/login

  4. Use the new links in the Call To Action Button on your custom page.


After finishing all steps above, you should be able to see your Custom Start Page that will forward the visitors to the Free and/or Premium version SOCIFI Captive Portal after the click event.

Optional: Authentication of the user without SOCIFI Interaction and without getting Analytical Data

This is not a recommended way as we can not gather any analytics data about your visitors. SOCIFI Dashboard will not show any analytics data.

Visitors are being connected immediately without passing through the SOCIFI Captive Portal.

Prerequisites

  • Valid key for the feature

Steps:

  1. Follow all steps from "Advanced Settings: Dedicated Free and Dedicated Premium Buttons"
  2. Modify target link for the free connection from Step 3. of "Advanced Settings: Dedicated Free and Dedicated Premium Buttons", change destination to /connect.php and add new parameter key

    Example:
    your requested page: http://my.site.url/my_page?rad=yes&serial=XXYYXXYYXYY&client_mac=AABBAABBAA&client_ip=10.5.50.226&userurl=http://somepage.cz/&login_url=http://10.5.50.1/login
    will change into this for free connection: http://connect.socifi.com/connect.php?key=ZYZYZYZYZY&rad=yes&serial=mkt1252free&client_mac=AABBAABBAA&client_ip=10.5.50.226&userurl=http://somepage.cz/&login_url=http://10.5.50.1/login
    the link for premium connection stays untouched

After finishing all steps above, you should be able to see your Custom Start Page that will forward the visitors to the Free and/or Premium version SOCIFI Captive after the click event. Free connection will authorise the visitor immediately. 


An example of the Custom Start Page that supports direct connection for free visitors. Download https://code.jquery.com/jquery-2.2.4.min.js and keep jQuery locally otherwise you could have issues with Walled Garden settings.

All used resources on custom start page have to be allowed in Walled Garden!

custom.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Custom start page for SOCIFI Captive</title>
    <script
            src="./jquery-2.2.4.min.js"
            integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
            crossorigin="anonymous"></script>
    <script type="application/javascript">
        $(function() {
			// Modify values as described in https://socifi-doc.atlassian.net/wiki/x/AgDBBg
            so_free = 'mkt1234free';
            so_premium = 'mkt1234premium';
			so_key = 'ABCDABCDABCD';
            so_custom_domain = 'http://my_site.url';
			so_success = 'http://connect.socifi.com/success';

            function so_getLoginURL(serial) {
                var _get = decodeURIComponent(window.location.search.substring(1));
                regex = new RegExp(/serial=([^&]+)/g);
                return _get.replace(regex, 'serial=' + serial) + '&dst=' + so_success;
            };

			// Handler for free connection - skip visitor interaction
            $('#so_freen_no').on('click', function(){
                window.location.href = so_custom_domain + '/connect.php?' + so_getLoginURL(so_free) + '&key=' + so_key;
                return false;
            });

			// Handler for free connection - with interaction on SOCIFI Captive portal and analytics
            $('#so_free_in').on('click', function(){
                window.location.href = so_custom_domain + '?' + so_getLoginURL(so_free);
                return false;
            });

			// Handler for premium connection
            $('#so_premium').on('click', function(){
                window.location.href = so_custom_domain + '?' + so_getLoginURL(so_premium);
                return false;
            });
        });
    </script>

    <style type="text/css">
        a {display: block;padding: 10px;margin: 10px;width: 200px;color: white;cursor: pointer; background-color: #0F6AB4;}
    </style>
 </head>
<body>
	<a id="so_free_no">Free access - no interacion</a>
	<a id="so_free_in">Free access - analytics and interaction</a>
	<a id="so_premium">Premium access</a>
</body>
</html>