Kiwire 2.0 Documentation

  1. Home
  2. Docs
  3. Kiwire 2.0 Documentation
  4. Login Engine
  5. Page Maker

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. 

FieldMeaning & function
Page IDThe system generated id for the page generated. Page id also contain hyperlink that you can click to preview the page created.
Page NameThe name given to the page created.
Created ByThe person who created the page.
Created OnThe date of the page was created.
DefaultIf the page is set as a default page, the default page for NAS that does not define in any zone or journey.
RemarkAny remark/description for the page.
ActionModules 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 codeShort code NameSnippet 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 pageGenerate 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 & conditionsGenerate the whole terms & condition text
{{facebook_login_link}}Facebook login Generate link for Facebook login
{{instagram_login_link}}Instagram LoginGenerate link for Instagram login
{{vk_login_link}}VK+ loginGenerate link for VK+ login
{{twitter_login_link}}Twitter loginGenerate link for Twitter login
{{google_login_link}}Google+ loginGenerate link for google+ login
{{wechat_login_link}}Wechat LoginGenerate link for Wechat login
{{this_page_link}}This page linkGenerate link to current page
{{signup_field}}Sign UpGenerate field for sign up data box.
{{welcome_back}}Welcome back, UserGenerate “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 boxSnippet NameSnippet Function
LogoLogo placement, Option for Left , centre or right placement.
bannerBanner placement, Recommended  size 918 x 180 pixel ( height x width ).
Note : banner placement on page maker are not track by campaign engine.
SliderA 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.
Image(single)Single large image placement
Image(3 picture)Placement of 3 image in a box
VideoYoutube 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 + TextImage with text placement.
Round / Square image with textFancy rounded or square image with text placement
 Footer BoxVarious snippet for use commonly on footer.
Header boxBox for large header text placement
Horizantal line boxA Horizontal line placement
spacer boxSpacer box for space between others snippet box
Text boxBox for text block
 Header and  paragraph textVarious of header and paragraph text box
  Feature text box Box for feature text
Video and text boxA 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 LoginA Social login box , that let user login using their social login credential. please setup integration > social network
Social Login + Simple loginA dual screen login box which  that let user login using either their social login credential or using simple login.
Public Sign upThe 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 LoginGuest 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 LoginRadius Login, login box that authenticate user via remote radius server define in Integrations->Radius modules.
SMS Sign UpSMS 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 LoginVoucher 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 & ConditionBox for Terms & condition box placement
Coupon pagebox for display all the available coupon.
Survey pagebox that load a survey page from survey created.
Forgot PasswordForgot password function, enables user to use this function to trigger forgot password>
Public SignupPublic 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 signupPublic 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 LoginThe 30 min login function will enable user to login to network for 30 minutes only without require any registration or approval.
Mac LoginThe mac login snippet let user login to network using their device mac address.
Terms & Conditons Login as Define UsersThe 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 SnippetThe 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 PostThe 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 PluginThe 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 : synchrowebtechNote: Facebook page must be public.

Sample Login Pages

Was this article helpful to you? Yes No

How can we help?