Kiwire™ 2.0

Page Maker

134 views June 1, 2017 May 21, 2019 admin 0

Page Maker

In order to offer a truly personalized platform for user login experience, we created the “Page Maker” module. Page maker module is a powerful platform that let you create pages for sign up, informative pages and login pages which are personalized to your unique organisation. Page maker editor let you drag and drop snippet/box of content and let you customize the login page to your own. This module let you design your page creatively without the requirement of doing html programming. With each update of Kiwire™ platform, new snippet will be introduced which enable future login mechanism and logic to be introduced to your network. To access the page maker module click on Login Engine > Page Maker and the Page Maker module screen will display the existing listing of the added pages in system.

The field and its function description is listed below.

Field Meaning & function
Page ID  The system generated id for the page generated. Page id also contain hyperlink that you can click to preview the page created.
Page Name  The name given to the page created.
Created By  The person who created the page.
Created On  The date of the page was created.
Default  If the page is set as a default page, the default page for NAS that does not define in any zone or journey.
Remark  Any remark/description for the page.
Action  Modules action :

  To edit the page.

  To delete the page.

  To duplicate the page.

* NOTE : You are required to create an initial login page for your platform to work. If not user will be encounter a warning page of “No login page being created!”. Please create an initial login page and set it to be default.


Page Maker Preview

Click on the arrow under Page ID column from page maker listing to load the preview of the page. 

Page Maker Editor

Click on the edit icon to access the page maker editor. The page maker editor consist of three primary pane:

  • Red Pane         – The red pane on the RHS is the primary snippet container which you can drag and drop the snippet box into the main canvas.
  • Orange pane  – The orange pane on the LHS is when you click on a text which load the typography option.
  • Blue pane        – The blue pane let you save the page, upload or remove background for the page.

Create/Edit Page

1. Click on the “Create Page” button to create a new page.

2. The Page Maker Editor will load.

3. To set a background for the page, click on “Upload Background” and a popup window will appear as below:

Click on “Choosing File“to select the background. It supported image format (.jpeg, .png, .gif, .bmp) to their respective categories to proceed. Any background uploaded under “Desktop Size” will only appear for desktop. If there is no image uploaded for “Tablet Size” or “Mobile Size” the default background image for desktop will be used. Click “Upload” to set the background.

* NOTE : All background images will be set to full width and centralized so imagery near the edges will have some clipping, please test and ensure your image size is optimized for use as it will affect loading time.


4. To remove background click on “Remove Background” button.

5. When you click on a text, it shows the typography option on the LHS. The typography option is to edit the text such as font size, font color, bold and many more.

6. Open the snippet selection box by clicking on the snippet box loader on the RHS to shows all the snippet blocks.

7. Drag and drop the required snippet block into the main canvas area from the snippet selection box.

8. Most of the snippet block are editable, just click on the snippet and hover the edit icon will display.

9. The first icon is to move the position of the snippet box.

10. The second icon is the HTML editor. Page maker support the HTML/CSS code. After finish editing on html editor, click on “Save” button to save the code.

11. The third icon is to copy and paste the snippet block.

12. The last icon is the delete icon to delete the block.

13. Most of the snippet box are editable, just click on the snippet and hover the edit icon will display.

14. Once done with the new customized page, click on “Save” button to the page.

15. At the save option, type the page name, enable the default page and type if any remark for the page then click “Save” button.

NOTE : Only 1 default page are allowed.

16. To edit the previous page, click on the edit icon and make the changes. After done with changes, click on “Update” button to save the page.

Video Example – Page Maker

Page Maker Shortcode

Shortcode are tag code design to be embedded into pages for performing additional function beside display typography, media and login box snippet. To use the short code just use edit html code function in page maker and type the link or button action to the shortcode .

The current available shortcode are:

Short code Short code Name Snippet Function
{{next}} link to next  Generate link to the next page in as per login journey, if no page available, it will redirect to default page
{{page=PAGEID}} Go to page Generate the link and when user interact with the button or link it will redirect user to the page id  , replace PAGEID with your desire go to page id . Page id can be found at page maker listing .
{{tnc_full}} Terms & conditions Generate the whole terms & condition text
{{facebook_login_link}} Facebook login  Generate link for Facebook login
{{instagram_login_link}} Instagram Login Generate link for Instagram login
{{vk_login_link}} VK+ login Generate link for VK+ login
{{twitter_login_link}} Twitter login Generate link for Twitter login
{{google_login_link}} Google+ login Generate link for google+ login
{{wechat_login_link}} Wechat Login Generate link for Wechat login
{{this_page_link}} This page link Generate link to current page
{{signup_field}} Sign Up Generate field for sign up data box.
{{welcome_back}} Welcome back, User Generate “Welcome back” for registered user.

Snippet Box

Snippet are design block that let you create your own personalise and functional page. While some snippet box are for loading of media , text there are some snippet that have functionality built in. The table  bellow are the snippet box and its function usage.

Snippet box Snippet Name Snippet Function
  Logo Logo placement, Option for Left , centre or right placement.
  banner Banner placement, Recommended  size 918 x 180 pixel ( height x width ).
Note : banner placement on page maker are not track by campaign engine.
  Slider A simple 4 image slider, please upload the media for slider into Login engine-> Media module beforehand as the slider will ask for slider media image source.
( single )
Single large image placement
( 3 picture )
Placement of 3 image in a box
  Video Youtube video placement, click on edit link and put in the YouTube url for the video , use share option at the youtube video page to get the url.
NOTE : please remember wall garden/white list YouTube url for this video to load
  Image + Text Image with text placement.
  Round / Square image with text Fancy rounded or square image with text placement
  Footer Box Various snippet for use commonly on footer.
  Header box Box for large header text placement
  Horizantal line box A Horizontal line placement
  spacer box Spacer box for space between others snippet box
  Text box Box for text block
  Header and  paragraph text Various of header and paragraph text box
  Feature text box  Box for feature text
  Video and text box A video with text box
  Simple Login  A simple login box that prompt for username and password to login.  Simple login support login for voucher user ( using voucher username + password ) and users.
  Social Login A Social login box , that let user login using their social login credential. please setup integration > social network
  Social Login + Simple login A dual screen login box which  that let user login using either their social login credential or using simple login.
  Public Sign up The Public sign up page , for public user to self sign up and login, additional field of information can be obtain by creating data field in login engine -> sign up.
Guest sponsored Login Guest sponsored login, for guest that required sponsored approval to login to network, additional field of information can be obtain by creating data field in Login Engine -> sign up.
Radius Login Radius Login, login box that authenticate user via remote radius server define in Integrations->Radius modules.
  SMS Sign Up SMS Sign up, user will register their account with their preferred username & password . An OTP code will be send to their mobile devices, user will require to key in their OTP code from sms message to complete the sign up process. This will validate the phone no and accounts.
  Email Signup  Email Signup , user will required to fill in their valid email address, when user complete the signup process, they are granted 5 min temporary internet access, which they are required to login to their email account and click on a validation link via email from Kiwire™ platform to complete their registrations.
  Voucher Login Voucher login box, this login box will not require user to key in the voucher password , just the voucher id will be suffice. For security please configure Prepaid to use random as prefix
  Term & Condition Box for Terms & condition box placement
  Coupon page box for display all the available coupon.
  Survey page box that load a survey page from survey created.
Forgot Password Forgot password function, enables user to use this function to trigger forgot password>
Public Signup Public sign up option, this will utilize the public sign up setting. Use the public sign up snippet for public Wi-Fi sign up access
Sponsored signup Public sign up option, this will utilize the public sign up setting. Use the public sign up snippet for public Wi-Fi sign up access
30 Min Login The 30 min login function will enable user to login to network for 30 minutes only without require any registration or approval.
Mac Login The mac login snippet let user login to network using their device mac address.
Terms & Conditons Login as Define Users The Terms and condition login as define user let user to agree to the terms and condition to login to network using a shared user account.
When you first drag and drop the snippet and option as shown bellow will prompt , type in the username of the account which you want user to be associated when login.

Note: Please set the profile associated for the selected user account to have high number of simultaneous access . you may also use the number of allowed simultaneous access as a way to limit the users.


Custom Script Snippet The custom script snippet let you insert your own custom javascript or web script into the page , this is useful if you wish to include google or facebook analytics script into the page.
Facebook Latest Post The Facebook latest post let you link your page with a post from your Facebook page. Paste the URL of your Facebook post in the field below.
Facebook Page Plugin The Facebook Page Plugin allows you to insert your Facebook page plugin on your customized page. User can scroll your Facebook page from your customized page in Kiwire. Insert your page ID in below field.

Eg: Insert ID only : synchrowebtech

Note: Facebook page must be public.

Sample Login Pages

Was this helpful?