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

  • {{pageTitle}} - This macro inserts the page title. For example:

  • {{{SignInWidgetResources}}} - This macro inserts the JavaScript and CSS files required to use the Okta Sign-In Widget.

  • {{bgImageUrl}} - This macro inserts a URL to the background image configured in your Okta organization. This setting can be changed by selecting Customization, and then Appearance.


    <div class="login-bg-image" style="background-image: {{bgImageUrl}}"></div>
  • {{{OktaUtil}}} - This macro defines a global OktaUtil JavaScript object that contains methods used to complete the Okta sign-in flow. When an application uses the Okta-hosted sign-in page to sign a user in, information (called request context) is available about the target application and the request.

Request Context

By calling the OktaUtil.getRequestContext() method, JavaScript code on your sign-in page can inspect the current request and make decisions based on the target application or other details.

Here's what is returned from getRequestContext():

    "label":"Demo App",
      "name":"Demo App",

For an OpenID Connect application, the application's client ID is stored in the request context's target for that object:


There is also additional information available in the target, such as label.

Note: The getRequestContext() method only returns a value when the Okta-hosted sign-in page is loaded in the context of an application (such as SP-initiated flows in SAML or the /authorize route for OpenID Connect). Otherwise, it returns undefined.

See Per-Application Customization for an example of what you can do with request context.


Featured Guides