Guides

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 in your Okta organization. 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, for example, your custom sign-in page. If you want to just change the background image for your custom error pages, put the URL to the image in place of the macro:

Example:

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

Inserts the org logo image that appears. 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, for example, your custom sign-in page. If you want to just change the logo for your custom error pages, put the URL to the image in place of the macro:

Example:

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

{{{errorDescription}}}

Inserts a description of the error.

Example:

<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>
Next:

Featured Guides