Janrain widget does not show expected providers

Question

I have a basic Janrain account where I have configured about 8 providers successfully. From the Widgets & SDKs section, I have also selected six providers to be shown on the widget. I have enabled Janrain integration on on Social Engine 4.8.12. However, the Janrain widget only shows only 3 default providers on my SocialEngine website's log-in page. Does anyone know how to fix this?
This is what I have designed and expect to see:

This is what I see on the login page:

Answer 1

The Janrain Social Login(Engage) widget has two main ways to configure the display of social providers. These are shown in the following screen shot:

The first option "Save and Publish" will save the settings to the Janrain CDN. The warning at the bottom states "Changes may take up to one hour to appear in deployed widgets" - however it typically (but not always) does not take more than 5 minutes. It is important that you actually click the "Publish" button in order to save these settings.

The second option is "Save and Embed" it will generate the necessary Javascript code that you can embed on a web page to use the widget. Similar to the following:

    <script type="text/javascript">
(function() {
    if (typeof window.janrain !== 'object') window.janrain = {};
    if (typeof window.janrain.settings !== 'object') window.janrain.settings = {};

    /* _______________ can edit below this line _______________ */

    janrain.settings.tokenUrl = '__REPLACE_WITH_YOUR_TOKEN_URL__';
    janrain.settings.type = 'embed';
    janrain.settings.appId = 'REPLACE_WITH_YOUR_APP_ID';
    janrain.settings.appUrl = 'https://APPNAME.rpxnow.com';
    janrain.settings.providers = [
    'facebook',
    'linkedin',
    'googleplus',
    'twitter',
    'instagram',
    'paypal_openidconnect',
    'yahoo',
    'microsoftaccount'];
    janrain.settings.providersPerPage = '8';
    janrain.settings.format = 'two column';
    janrain.settings.actionText = 'Sign in using your account with';
    janrain.settings.showAttribution = true;
    janrain.settings.fontColor = '#333333';
    janrain.settings.fontFamily = 'arial';
    janrain.settings.backgroundColor = '#FFFFFF';
    janrain.settings.width = '380';
    janrain.settings.borderColor = '#CCCCCC';
    janrain.settings.borderRadius = '10';    janrain.settings.buttonBorderColor = '#CCCCCC';
    janrain.settings.buttonBorderRadius = '5';
    janrain.settings.buttonBackgroundStyle = 'gradient';
    janrain.settings.language = '';
    janrain.settings.linkClass = 'janrainEngage';

    /* _______________ can edit above this line _______________ */

    function isReady() { janrain.ready = true; };
    if (document.addEventListener) {
      document.addEventListener("DOMContentLoaded", isReady, false);
    } else {
      window.attachEvent('onload', isReady);
    }

    var e = document.createElement('script');
    e.type = 'text/javascript';
    e.id = 'janrainAuthWidget';

    if (document.location.protocol === 'https:') {
      e.src = 'https://rpxnow.com/js/lib/APPNAME/engage.js';
    } else {
      e.src = 'http://widget-cdn.rpxnow.com/js/lib/APPNAME/engage.js';
    }

    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(e, s);
})();
</script>

You can see in the above code how the providers are listed as a Javascript array.

If neither of these options work then there may be something wrong with your apps configuration and you should contact Janrain's support for assistance at http://support.janrain.com