JavaScript SDK screens overview


The content on this page deals with a legacy feature of the ‚ÄčAkamai‚ÄčIdentity Cloud (in this case, the JavaScript SDK). If you are currently an ‚ÄčAkamai‚Äč customer and are using the JavaScript SDK, that SDK is still supported. However, if you‚Äôre new to the ‚ÄčAkamai‚Äč the JavaScript SDK is no longer available. Instead, you should use Hosted Login for your login and registration needs.

Registration screens exist in two parts:

  1. Server-side configurations
  2. Client-side HTML

In order for a screen to render, both parts must be in place.

Server-side, the screen’s relationships to other screens and how it is displayed by default are defined in a configuration file. This information can be viewed and configured remotely, as documented in the Configuration API operations.

Client-side, screens are rendered via HTML 

 tags that have id attributes corresponding to the screen’s name (as defined in the server-side configuration file). By default, all screens contain a CSS rule set to "display: none", and the Akamai JavaScript modifies this rule to display and hide the appropriate screen based user interaction moving through he registration experience.

Optionally, there may also be JTL (Janrain Templating Language) markup within the screen’s div. The widget uses this markup to render form elements on the screen. An example screen 

 for the forgotPassword screen and JTL tags for the forgotPasswordForm is shown below:

<div style="display:none;"id="forgotPassword">
 <div class="capture_header">
 <h1>Create New Password</h1>
 <h2>We'll send you a link to create a new password.</h2>
 {* #forgotPasswordForm *}
 {* signInEmailAddress *}
 <div class="capture_footer">
 <div class="capture_left">
 {* backButton *}
 <div class="capture_right">
 <input value="Send" type="submit" class="capture_btn capture_primary">
 {* /forgotPasswordForm *}

Screen modality

By default, screens render client-side as a modal (with the exception being the editProfile screen). To change this configuration to all-embedded, you will need to make both client-side and server-side changes:

  • Server-side: Set all screens to¬†modal=false¬†by using the¬†Configuration API.

  • Client-Side: Remove all anchor tags with¬†onclick¬†attributes that call the¬†janrain.capture.ui.modal.close()¬†function, or replace them with your own functions (for example, redirecting a user from the¬†signIn screen to the¬†editProfile screen after successful login).


If you want both a modal and an embedded version of your screens, you can do one of the following:

  • Embed all screens, then create your own modals client-side where desired.
  • Create two backend configuration files.

Talk to your ‚ÄčAkamai‚Äč representative for details.

Information on customizing the appearance/styling of screens can be found in the article Modify form styles and appearance.

Render screens programmatically

Unless noted otherwise (such as for the verifyEmail screen), most screens can be rendered in the browser programmatically, either by calling a JavaScript function or placing a data-capturescreen HTML attribute on an anchor tag.

For example, the forgotPassword screen can be rendered by either of the following methods, assuming the screen markup exists on the user’s current page.

<a href="#"onclick="janrain.capture.ui.renderScreen('forgotPassword')">Forgot your password?</a>
<a href="#"data-capturescreen="forgotPassword">Forgot your password?</a>

Screen entry-points

The registration or login flow begins at one of these screens:

  • signIn
  • returnTraditional
  • returnSocial