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:
-
Add logos and icons so your hosted pages look just like your app
-
Set a simple background in your hosted pages, or save time and select one of our themes, or choose a blank slate and do your thing
-
Write your own text and button names so you control your tone and how you communicate with your users
-
Get pixel perfect by playing around with UI styles like density, fonts, borders, and colors
-
Provide one-time passwords for your users to help reduce friction and enhance their login experience
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:
- In the Pangea Console , click AuthN and then click Branding.
- Click Custom Domain.
- Type the domain in the Domain field and click Save.
- Within your DNS Provider, create a CNAME record to point your domain to the Pangea-hosted domain.
- DNS changes can take several hours to update. Click Verify to verify the domain after the DNS change completes.
- 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.
- In the Pangea Console , click AuthN and then click Branding. This navigates you to the Customize page.
- 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?