Skip to main content

Branding & Customization

Check out the customization and branding options for hosted pages

This page describes how to customize various AuthN flows embedded in your hosted pages, like:

Custom domain

Set up your hosted Pangea pages to display a specific domain by adding a domain URL in the Branding page.

To configure a custom domain:

  1. In the Pangea Console , click AuthN and then click Branding.
  2. Click Custom Domain.
  3. Type the domain in the Domain field and click Save.
  4. Within your DNS Provider, create a CNAME record to point your domain to the Pangea-hosted domain.
  5. DNS changes can take several hours to update. Click Verify to verify the domain after the DNS change completes.
  6. Your custom domain will now display for any hosted Pangea pages. The Hosted Login link is also updated to the custom domain.

Branding

Use the Branding page to configure logos, backgrounds, and text in your hosted page.

  1. In the Pangea Console , click AuthN and then click Branding. This navigates you to the Customize page.
  2. Click View project branding. A page displays where you can access branding settings and menus.

The right side of your screen will display any style or text changes you make in real-time.

Switching pages

Use the Form dropdown menu to choose between various pages like login, sign up, and message. You always want to make sure you’re customizing the correct form.

Backgrounds and themes

Preset - Predetermined style forms, created by Pangea, that you can use for your branding. Do as little or as much as you want to them. You can choose from the following presets:

  • Pangea - A theme modeled after the Pangea brand

  • Browserflix - A theme suitable for a very popular streaming service

  • Ravean- A clean and simple theme

  • Custom - If you change an existing preset, or you want to start from scratch, “custom” will be your selected theme.

  • Discord - A visually appealing and unique theme

Example

You can select Browserflix from the dropdown menu. On the right side, you can see what the Browserflix preset theme looks like. The preset resembles the look and feel of a streaming platform.

Add your information

  • Name - The name of your organization or app as it should appear to your users

  • URL - Your app’s URL

  • Support Email - A support email where your users can contact you for help

Logos and icons

  • Logo - Your logo

    • Logo height - Height of the logo when used within the hosted pages. You can adjust it in pixel size
  • Favicon - A small icon used on web browsers to represent your app

Background image

The background image is used within the AuthN hosted pages.

Advanced tab

Specify UI styles

Use the Advanced tab to adjust, save, and view the UI styles.

  • Density

  • Fonts

  • Borders

  • Colors

Settings tab

Use the Settings tab to adjust page settings and customize text on your hosted page.

General

Under General, you can turn on the following:

  • Show name on form - If turned on, this switch will display your organization or app’s name in the branded form.

  • Show social icons - If turned on, this switch will display social authentication provider icons (like Google, GitHub, and so on)

Sign in

This feature is only relevant when you’re working on login related branding. It allows you to customize the text in:

  • Form Heading

  • Submit Button Label

  • Social Options Heading

Sign up

This feature is only relevant when you're working on sign up related branding. It allows you to customize the text in:

  • Form Heading

  • Submit Button Label

  • Social Options Heading

Configure a one-time password

This feature is only relevant when you’re working on OTP forms. It allows you to customize the text in:

  • Button Label

Messaging

This tab provides access to the various automated messages that are sent to users during the registration and authentication processes.

You can use the messaging capability to do the following:

  • Preview the various types of emails that can be sent to your customers.
  • Customize email look and feel through project branding.

The Messaging form provides the following options to communicate with other users:

  • Verification Email: This message is sent to confirm a user's email address and activate them in your system.

  • Invitation Email: This message is sent to potential users to allow them to register in the system.

  • Password Reset Email: This message is sent to a user to initiate the password reset process.

  • MFA Email: This message is sent to a user with a one time code to complete their login.

Was this article helpful?

Contact us