Use macros

The following macros contain the configuration parameters for certain page elements. These macros inject specific content or functionality automatically.

{{orgName}}

Inserts the org name title.

Example:

<title>{{orgName}} - {{errorSummary}}</title>

{{errorSummary}}

Inserts the error title text.

Example:

<h2 class="o-form-title">{{errorSummary}}</h2>

{{bgImageUrl}}

Inserts a URL to the background image configured for your application. You can change this image by selecting Customization, and then Appearance from the Developer Console, but this changes the background image in all instances where the macro is used, including your custom sign-in page.

If you want to just change the background image for your custom error pages, include the URL to the image instead of the macro:

Example:

<div class="login-bg-image" style="background-image: url('https://example.com//YourBackgroundImage.png')"></div>

Inserts the logo image that has been configured for your application. You can change this logo using the Organization Logo option accessed by selecting Customization, and then Appearance from the Developer Console, but this changes the org logo in all instances where the macro is used, including your custom sign-in page.

If you want to just change the logo image for your custom error pages, include the URL to the image instead of the macro:

Example:

<img alt="{{orgName}}" src="https://example.com//SomeOtherImage.png" class="org-logo">

{{{errorSummary}}}

{{{errorDescription}}}

Inserts a title and detailed description of the error.

Example:

<h2 class="o-form-title">{{errorSummary}}</h2>
<p class="o-form-explain">What happened? {{{errorDescription}}}</p>

{{back}}

Inserts the text Go to Homepage. The button takes the user back to the sign-in page when clicked.

Example:

 <a href="/" class="button">{{back}}</a>

{{technicalDetails}}

Inserts additional error codes, if there are any. See Okta Error Codes for more information.

Example:

<p class="technical-details">Additional Error Details: {{technicalDetails}}</p>