Sign-in page

This page shows how to change how the sign-in page looks. What you set applies to every app on the platform at the same time. The page looks the same for every app. The name and logo of the app a person is signing in to appear above the form (Logo).

Your role needs Can edit configuration.

Customise the sign-in pageCopy Anchor Link

1. Open Sign-in page in the Settings group of the menu on the left. The page shows the heading Customise the sign-in page.
2. Edit the values in each group, as the sections below describe. On the right, Preview changes as you type.
3. Click Save in the bar at the bottom.
4. Click Open the real sign-in page at the top right to see the real page in a new tab.

The real page shows only what you have saved. To throw away edits you have not saved, click Discard changes. If you leave this page with unsaved edits, it asks "Leave without saving?".

The preview has the buttons Thai and English to choose the language of the page, and Computer and Phone to choose the screen size. The phone preview does not show the background image and welcome text, because on a phone the real page does not show the brand panel.

BrandCopy Anchor Link

• Platform name Enter the name in Thai and in English, up to 80 characters. If you leave it empty, "aWhere" is shown.
• Short name Below the platform name. Enter a short name of up to 20 characters. It cannot contain :. It is shown as the Issuer in authenticator apps such as Google Authenticator or Microsoft Authenticator, where a long name is cut off and makes the QR code dense. Keep it in English, for example ABC GIS. If you leave it empty, the English platform name is used, and if there is none, "aWhere".
• Logo Click Choose logo and choose a PNG, JPEG, SVG or WebP file of up to 256 KB. The logo always sits on a white tile, so a logo drawn for a white page works as it is. If you add none, the aWhere mark is shown. Use Replace logo or Remove logo to change or remove it.

An SVG file that contains script cannot be used.

ColoursCopy Anchor Link

1. Under Primary colour, click the colour box, or type a colour code into Hex code, for example #1a73e8. This colour is used for the main button, links and the brand panel. If you leave it empty, the aWhere vermilion is used. To go back to it, click Use the default colour.
2. Choose Appearance: Light, Dark or Match each visitor device. It is Light by default. With Match each visitor device, the page turns dark on devices set to dark mode. The preview always shows light.

Under the colour box you see the contrast between white text and the button. If the colour is too light for white text, a warning says the sign-in button will use dark text instead. The button still works. If you want white text, choose a darker colour.

Brand panelCopy Anchor Link

The brand panel is the left half of the sign-in page. It shows only on wide screens. On a phone or a narrow screen a small header bar is shown instead.

• Background image Click Choose image and choose a PNG, JPEG, SVG or WebP file of up to 2 MB. A dark layer is put over the image so the text stays readable. If you add no image, the page draws contour lines in your primary colour. Use Replace image or Remove image to change or remove it.
• Welcome title Enter it in Thai and in English, up to 120 characters.
• Welcome text Enter it in Thai and in English, up to 600 characters.

If you leave the title and text empty, the aWhere default text is shown. If you enter only one language, people who choose the other language see the one you entered.

Recommended image sizesCopy Anchor Link

• The logo is shown 36 px tall on a computer and 28 px tall on a phone, at most 200 px wide. A size of 108 px or more is three times what is shown, so it stays sharp on high-resolution screens.
• The background image is scaled to fill the brand panel, which is as tall as the screen. What does not fit is cropped, so keep the important part of the image in the centre, and not in the bottom left corner, where the title and welcome text sit on top of it.
• An SVG file does not need a size check. This page does not warn about SVG files.
• When you choose a file whose size is not suitable, this page shows the real size of the image under the field. A warning does not stop you from saving. You can keep using the image if you are happy with what you see in the preview.

FooterCopy Anchor Link

• Footer text Enter it in Thai and in English, up to 300 characters. If you leave it empty, the year and the platform name are shown.
• Links Click Add a link, then fill in Label (Thai or English, up to 60 characters) and Address, which must start with http or https. You can add up to 6 links, for example a privacy policy or a help page. Click the trash icon on a link to remove it.

If a field is not valid, a message appears under it and Save stays off until you fix it.

Reset to defaultCopy Anchor Link

Click Reset to default in the bar at the bottom, then click Reset to default in the confirmation box. Every value on this page, including the logo and the background image, is cleared, and the sign-in page of every app goes back to the aWhere default. The button is off if you have never set anything.