Apply your brand to the Okta user experience

Design and apply a custom look and feel that matches your brand to the Okta-hosted Sign-In Widget.

Introduction

You have a customer-facing app that uses the Okta-hosted Sign-In Widget and messaging services. Design and apply your own look and feel to these elements, which keeps your customers engaged. When you deliver a seamless, branded experience, you build trust with your users.

Learn

There are three key elements to the theming of the Okta default user experience:

The Sign-In Widget is the default Okta UI for registration, enrollment, verification, and account recovery. You can customize it to match your brand.
The Okta Expression Language is used to customize email and SMS messages.
Okta Brands (opens new window) allows you to manage multiple brands in one Okta org.

Note: This document is only for Identity Engine. See Identify your Okta solution (opens new window) to determine your Okta version.

Plan

To get the most from the Okta branding options:

Purchase a custom domain for your org to associate with the brand.
Identify your brand-matching design for the Sign-In Widget.
Identify how messages and error pages from Okta are worded to reflect your brand.
Decide if you want to use one domain for all brands or separate domains.

To make branding changes in the Admin Console, you need a super admin or org admin role, or have a role with customization permissions (opens new window).

Build

To apply your brand to the Okta-hosted Sign-In Widget, consider an upgrade to the third-generation Sign-In Widget, and then register a vanity domain.

Consider using the third generation Sign-In Widget for the best customization options:

Register a vanity domain with your org

All customizations are tied to the custom domain that you must first attach to your org. See Add a custom domain to your org.

Create a stylesheet and any required JavaScript for custom behaviors and attach it to your custom domain in the Admin Console:

Add your style sheets and scripts. You can do this using either the second or third-generation widget.
Use design tokens. You can do this using the third-generation widget.

Apply your brand to Okta default text elements

Customize the text of emails, SMS messages, and error pages delivered by Okta for a custom domain and also localize it to match your messaging:

Test your customizations

The Okta default UI spans user registration, enrollment, verification, and account recovery:

Test that your new branding is consistent for your users across all four actions.
Test that your error pages work as expected.
Test that your text works in different languages as expected.

Congratulations, your app now wraps its Okta components in your brand's look and feel. Your design team and your customers are both happy.

Go deeper into the Okta APIs that allow you to manipulate your customizations in code:

Use the Brands API (opens new window) to manage brands, and their metadata, in your orgs.
Use the Custom Email Templates API (opens new window) to manage email customizations.
Use the SMS Templates API (opens new window) to manage SMS customizations.

This journey is part of the Secure your portal pathway, which also contains:

Edit This Page On GitHub

On this page