Portal Templates

Created by chris.joinson@airangel.com, Modified on Wed, 2 Feb, 2022 at 2:35 PM by Mark Jones

TABLE OF CONTENTS


Introduction


The portal templates contain the codebase for the portal they're assigned to. Multiple portals can be assigned to the same template ensuring a consistent look and feel across your venues. By default, there is always a default template available. This default template cannot be edited or deleted, however, it can be cloned allowing you to customise the code to your needs. 


Location


StepsDescription
1Log into the platform
2Enter the settings page by opening the account menu and selecting settings.
3Select Portal Templates.


Cloning Templates


We recommend cloning the default portal template and editing the subsequent clone to your needs. This is due to the amount of important code contained within the templates that ensure your guests can get online.  By cloning the default portal, you're safe in the knowledge that authentication and structure is left intact. You can then make changes to the code styling in the CSS to make the look and feel fit seamlessly with your brand. 


StepsDescription
1Access the Portal templates page using the steps above.
2Select the Default portal template from the portal template table.
3Click Clone at the bottom of the code editor.
4Your newly cloned template will be available in the portal template table, with the suffix Clone.


Deleting Templates


Ensure the template you want to delete isn't associated with any currently live portals before deleting.


StepsDescription
1Access the Portal templates page using the steps above.
2Select the template you want to delete from the portal templates table.
3Click Delete at the bottom of the code editor.


Replacement Values


There are several replacement values used in the code allowing you to configure text colour, borders and images without needing to edit the code directly. The example below shows the CSS for the default portal's header: 

.header{
  width:100%;
  position:relative;
  background-color:${color:header:background};
  color:${color:header:text};
  border${border:header:type}-width:${border:header:width};
  border${border:header:type}-color:${border:header:color};
  border${border:header:type}-radius:${border:header:radius};
  border${border:header:type}-style:${border:header:style};
  ${image:header:css}
}

When referenced in the code, replacement values enable code configuration in the portal editor meaning users without coding knowledge can style the portal. The image below shows the Portal configuration screen with replacement values active. The replacement values allow you to edit the style, type, width, corner radius and colour with needing to view the code.




Some more replacement values include:


Replacement ValueDescriptionExample (If applicable)
${css}Links portal CSS to the HTML. Must be present for template CSS to work correctly.N/A
${javascript}Links portal Javascript to the HTML. Must be present for template JS to work correctly.N/A
${javascript:autodetect}JavaScript needed to support the autodetect login form.N/A
${form:terms}Embeds previously configured Terms and Conditions.N/A
${form:pan}Embed Personal Area Network form and content.N/A
${form:802.1x}Embed 802.1x form and content.N/A
${form:language selection}Enable the language selection menu.N/A
${forms}Enable guest authentication form configuration. N/A
${form:[form name]}
Enable a specific form on the portal page for configuration.${form:[pms]}
${border:[class]:type}Enable border type configuration in the Wizard.

border${border:header:type};

${border:[class]:radius}Enable border radius configuration in the Wizard.

border${border:header:radius};

${border:[class]:width}Enable border width configuration in the Wizard.width:${border:header:width};
${border:[class]:style}Enable border style configuration in the Wizard.

border${border:header:style};

${border:[class]:color}Enable border colour configuration in the Wizard.

border${border:header:color};

${color:[class]:background}Enable background colour configuration in the Wizard.${color:body:background}
${color:[class]:text}Enable text colour configuration in the Wizard.${color:body:text}
${content:[class]}Used for the additional content box. Placing a second in the code will enable a second section of additional content.${content:class}
${get:[class]}Enable Get variables. Mainly used for inputting Errors. ${get:error}
${image:[class]:src}Enable image upload and placement on the wizard.N/A
${image:[class]:background-position}Configure image position configuration on the wizard.
N/A
${image:[class]:background-repeat}Enable repeating background configuration in the wizard.N/A
${image:[class]:slideshow}Enable slideshow functionality in the wizard.N/A
${image:[class]:css}Will create the entire background image CSS for you, this entry should always be the latest entry in a CSS block.
N/A
${label:[class]}Any available label translation (including guest data), for example
 ${label:firstname}
${layout:box opacity}Enable box opacity configuration in the wizard.N/A
${layout:font-family}Enable font configuration in the wizard.N/A

Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select at least one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article