📘
The content on this page deals with a legacy feature of the AkamaiIdentity 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:

Server-side configurations
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>
 </div>
 <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>
 <div class="capture_right">
 <input value="Send" type="submit" class="capture_btn capture_primary">
 </div>
 </div>
 {* /forgotPasswordForm *}
</div>

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