Getting Started

Customize Tesseral

Adapt the look and feel of Tesseral to blend with your product

Viewing your Vault UI (login page)

Once you have Tesseral integrated with both your clientside code and your serverside code, you will have a functiona; login page. In Tesseral, this page is called a Vault UI.

You can view the current state of your Vault UI in your web browser by visiting your Vault Domain. You will find your current Vault Domain within your Project Settings page in Tesseral’s console. Look for the field labeled Current Vault Domain.

Note that your Vault UI belongs to a Project in Tesseral. Confirm that you are using the intended Project (e.g., Development vs. Production) when adjusting your Vault UI.

By default, the Vault UI will look something like this:

The default appearance of the Vault UI

Changing the appearance of your Vault UI (login page)

You can customize the appearance of your Vault UI.

First navigate to the Tesseral console. Visit your Project’s settings and select the Vault UI Settings tab. You can also navigate directly to the Vault UI Settings using this link.

Here you will find a dynamic preview of your Vault UI. It will re-render each time you adjust the Vault UI settings, which include options for:

Layout

Tesseral currently supports two layouts: a center card layout and a side by side layout. You can toggle between them as shown here:

The default appearance of the Vault UI

Dark mode

Tesseral can support dark mode for your users. If you wish to enable dark mode, ensure that auto-detect dark mode is switched on.

If you have dark mode enabled, you will be able to see a preview of your dark mode Vault UI. The toggle for seeing a dark mode preview lies to the top right of the Preview card.

Enabling dark mode and toggling the dark mode preview

Note that dark mode uses a different logo and primary color.

Logo(s)

By default, the Vault UI displays a Tesseral logo to your users. You may change this to show your own logo. Simply upload a new file.

Uploading a new Vault UI logo
For best results, please use a tightly cropped, high resolution file with a transparent background

If you have dark mode enabled, you will need to upload a separate file under Dark mode logo.

Primary color(s)

You may change adjust the colors used on the Vault UI if you wish. Use the color selectors in the control panel like this:

Adjusting the colors of the Vault UI

If you have dark mode enabled, you will need to select a suitable color for dark mode as well.

Changing login methods

You may also change how your users log in. For example, you may choose to turn off Login with Microsoft. Your users’ Vault UI will update to reflect any such changes.

You may read more about customizing login methods here.