Customizing the Appearance of the Social Login UI

After adding the Social Login code you obtained from the Janrain Dashboard, your document will look something like this:


<script>
(function(){
 if(typeofwindow.janrain !== 'object')window.janrain = {};
 if(typeofwindow.janrain.settings !== 'object')window.janrain.settings = {};
 janrain.settings.tokenUrl = 'https://www.example.com/token.php';
 functionisReady(){janrain.ready = true;};
 if(document.addEventListener){
 document.addEventListener("DOMContentLoaded",isReady,false);
 }else{
 window.attachEvent('onload',isReady);
 }
 vare = document.createElement('script');
 e.type = 'text/javascript';
 e.id = 'janrainAuthWidget';
 if(document.location.protocol === 'https:'){
 e.src = 'https://rpxnow.com/js/lib/app-name/engage.js';
 }else{
 e.src = 'http://widget-cdn.rpxnow.com/js/lib/app-name/engage.js';
 }
 vars = document.getElementsByTagName('script')[0];
 s.parentNode.insertBefore(e,s);
})();
</script>

Add the following line to your JavaScript file:


janrain.settings.custom = true;

Now you’ll be able to build your own Social Login experience using our JavaScript API.