Custom Login Page

This article outlines how to create a Custom Login Page.

What is it?

A Happeo login page is the first page users see when they login to their Happeo environment. The login page consists of the following:

• Favicon
• Browser tab title
• Cover image
• Quote
• Company logo
• Your Happeo’s name
• Intro text
• Authentication system(s) / login options
  • Google
  • Microsoft
  • Company login
• Help text
• Link color

How to setup a custom login page

To begin customizing your login page, as an Admin you can:

1. Navigate to the Admin Panel (by clicking your avatar and Admin Settings)
2. Click Branding
3. Click Login page

In this section, you will be provided with a preview of your login page (desktop). As you fill in the required fields, the preview will dynamically update to reflect your entered information. This allows you to visualize how the login page will appear with the customized details you provided.

Additionally, when editing a specific field, the preview will highlight that field, making it easier for you to identify the area where you are making edits.

Favicon

A Favicon is a small image that represents a website. It appears in the browser's address bar, next to the page's title in bookmarks or favorites lists, and often in browser tabs. They serve as a visual cue for users, helping them quickly identify and distinguish between websites when multiple tabs or bookmarks are open.

To upload a Favicon, you can drag and drop files, browse from your computer, or upload files via URL.

The maximum size is 64 x 64px.

Supported image formats:

• JPG / JPEG
• PNG
• ICO
• SVG

Tab title

The tab title refers to the text displayed on the tab at the top of a browser window. It represents the name or title of the webpage that is currently loaded in the specific tab. The tab title is typically located next to the Favicon and helps users identify and differentiate between multiple open tabs.

We recommend including the word “Login” in the first 24 characters of the tab title.

Cover image

The cover image is the vertically aligned image visible on the left of your login page.

You can drag and drop files, browse from your computer, or upload files via URL.

The best-fitting size is 460 x 700px. For sharper resolution, you can upload the size 920 x 2048px.

Supported image formats:

• JPG / JPEG
• PNG
• GIF

Quote

The quote is the text that will appear at the bottom of the cover image. 

An example from Happeo’s login page is:

“As a Google Cloud partner, Happeo offers integrations across Google Workspace, including Gmail, Docs, Calendar, and Chat, making it an ideal solution for companies seeking an interconnected digital workplace.”

The quote is recommended to be 200 characters long.

Company logo

The company logo will appear above your Happeo’s name. 

You can drag & drop files and browse from your computer.

The maximum height size is 48px. 

Supported image formats:

• JPG / JPEG
• PNG
• SVG
• GIF

Happeo's name

Here, you can type in your Happeo’s name. Happeo’s name refers to the name of your environment. 

Intro text

The intro text serves as a short introduction for users. 

An example from Happeo’s login page is: “A happier workplace is only one sign-in away.”

Login options

Login options refer to the authentication systems you want to use. These include:

• Google
• Microsoft
• Company login (SAML SSO)
  • Note: You must select at least one

Related article: Single Sign-On using SAML.

Help

This section links your company’s Help Center or other support options. 

You can type text and add links using the link button at the bottom right of the text box. There are two ways to accomplish this: 

1. The first method involves selecting existing text and pressing the link button
2. The second method allows you to use the button to insert new text and simultaneously create a link

Link color

The color selected here will apply to all links on the Custom Login Page.

Reset to default

To reset the login page details to their default settings and start over, click the Reset to default button at the bottom right of the page. This action will revert the login page to its original state.