Login page editor

The new login page shipped with version 21 enables you to quickly edit, create, adjust and publish new login pages for your locations and customers. A brandnew in-page editor allows you to drag and drop elements to your liking, to adjust colors, to translate texts, and to easily remove unwanted parts or to add new ones.

This document will explain how to get started and showcase some of the possibilities.

Update Information

Hint

  • This part is only important if you upgrade from version 19.

The new login page shipped with version 21 fully replaces previous login pages (classic, classic-flat, metro, login page v19) - with exception of the LoginAPI.

Attention

  • If you performed changes in old themes (classic, classic-flat, metro, login page v19), then the Online Update for version 21 will not automatically start and can only be triggered manually after confirming a prompt.

  • After the update to version 21, all changes to previous login pages will be lost and have to be re-done manually on the new login page.

  • This does not affect any LoginAPI configurations.

Getting started

To get started, navigate to Login Page / Login Page Editor.

../_images/loginpage_editor_1.png

After installation/update, the default design will be active. You can either edit the default design or copy a new one. The new login page comes with a selection of designs, optimized for the most common use cases in hospitality and other services.

To add a new login page, simply select one of the available options from the according dropdown-menu and then click on Add new:

../_images/loginpage_editor_2.png

The copied login page will now appear in the selection. To activate it, you have to do so explicitly with the dropdown-selection on top of this page. Here, select your new copy and then proceed with Save:

../_images/loginpage_editor_3.png

In this example, Default login page yellow has been added and activated as default login page. To inspect and edit this login page, open the Editor by clicking on the green Show / Edit button.

Add login methods

Hint

  • Please note that even if you configure new login methods such as Local Users, a PMS authentication, Social Logins (etc.), then those will not automatically be enabled on the Login Page - you have to enable those modules manually on any copied login page. To do so in the editor, click on Login box 1 in the left bottom corner (1). This will open a selection for all available options on the right upper part of the page in which you can hide/show any available login method (2).

  • If a login method is shown, but not configured, then it will be hidden and a warning icon will be displayed next to it.

../_images/loginpage_editor_4.png

Change Background Image

To change the background image, select the Page tab on the right upper side in the editor and then expand the Background option. Here you can select one of many predefined background images or upload your own via the Select Image to Upload button.

Hint

  • Please note that after selecting a new image, you have to click on Save to activate the changes.

../_images/loginpage_editor_5.png

Adding Elements

You can add new elements by drag & dropping one of the available options from the selection on the upper left side of the page. For example: If you want to add another custom text, just drag a text element to wherever you want it to appear.

../_images/loginpage_editor_7.png

Now click on this element so that the available options will be loaded in the right upper part again. Here you can assign a text-style, change the text itself, and add a translation for other languages.

../_images/loginpage_editor_8.png

Hint

  • Note that all elements can also be removed by clicking on them and then selecting Delete on the right side.