The Hosted Login Screens Reference

In Hosted Login, screens convey information to, and receive information from, users who visit a site or use an app. For example, before you can finish creating a new account on a Hosted Login site you're likely see something similar to this:

As you might have guessed, that’s a screen; in this case, the socialRegistration screen. On this screen the user, who is creating a new account by first logging on to an account previously created on a social login provider such as Facebook or Twitter, enters their email address and then clicks Create Account. That’s just one example that shows how screens convey information to, and receive information from, users.

The fact that screens are a primary tool used to facilitate interactions between Hosted Login and end users is reason enough to know a little something about the screens employed in Hosted Login. But understanding screens becomes even more important once you realize that you have considerable say in the look and feel of those screens (and, by extension, considerable say in the end user experience). For example, by using CSS (Cascading Style Sheets) you can easily put your own spin on what your screens look like. Do you think your socialRegistration screen would benefit from having the legal notice in large red type? Then put the legal notice in large red type:

Most people know that you can use CSS to modify the look of your text elements. What you might not know, however, is that, in addition to modifying colors, fonts, and other style-related items, you can also change the actual text used on your screens. For example, maybe you're not a fan of the default legal notice. That's fine. If you don't like the default text then change it:

This documentation is designed to help you change the text that appears on your Hosted Login screens . For each of these screens, the documentation includes:

  • A screenshot showing you what the screen looks like (or, at the very least, what the screen looks like before you start applying CSS or changing the text).
  • A brief description of the screen and when it’s likely to appear.
  • Information about the JTL (Janrain Templating Language) tags associated with the screen. These tags (highlighted in red) are interspersed through the HTML markup for your Hosted Login screens:
<h1 class="screen-heading">{* textAuthRuleLegalAcceptanceHeading *}</h1>
<p class="screen-description">{* textAuthRuleLegalAcceptanceValue *}</p>

More importantly, these tags define the text that appears on your Hosted Login screens. Why is that so important? Well, because JTL tags define the text that appears on a screen, it stands to reason that changing the text associated with a JTL tag will also change the text shown on screen. For example, how did we manage to change the legal notice on our sample screen? Believe it or not, that was easy: all we had to do was modify the value of the {* textAuthRuleLegalAcceptanceHeading *} JTL tag. That's how you change the text on your Hosted Login screens.

In this reference we won’t explain the mechanics behind changing JTL tags; that’s what the article How to Modify the Text of Your Hosted Login Screens is for. However, we will show you the JTL tag associated with each piece of text shown on a Hosted Login screen, specifying both the tag name and the tag’s default value. To change the legal notice, you need to change the {* textAuthRuleLegalAcceptanceHeading *} JTL tag. And how are you supposed to know that you need to change the {* textAuthRuleLegalAcceptanceHeading *} tag? That's the kind of thing this documentation tells you.

Following is a list of the screens detailed in this reference: