Configure the Widget

The first stage in deploying a widget is to design it’s appearance, and to select which Identity Providers are going to be offered.

The Dashboard provides simple and powerful tools for designing the widget. For those who need even more customization, a JavaScript API is provided to augment widgets created in the Dashboard, or to code the widget from scratch.

This document is an overview of how to design the widget with the Dashboard. For integrations where the widget will be built coded by the client, see Coding the Widget Appearance.

Designing the Widget with the Dashboard ¶

To begin the process of creating a Social Sign-in Widget, sign-in to your application. If you haven’t created an application yet, or are unsure how to use it, please see Creating Applications.

Once you’ve signed in to the Dashboard, choose Sign-in for Web from the Quick Links menu. You will be greeted with the Configure the Widget page (see Figure 1). This is where you will design all three aspects of the widget:

• Layout — the design of the widget
• Providers — where Identity Providers are added to the widget
• Style — the appearance of the widget

Figure 1: Configure Widget Page

Use the following settings to customize the widget as needed:

Layout ¶

These are the options for laying out the widget (see Figure 2). A real time preview of your work will appear to the right of the Layout bar. Some of these settings are restricted by service level.

Using the settings available, create a design for how the widget will appear on the page:

Figure 2: Layout Options

Available to:    

Available to:

Providers

Available to:

The Providers page allows you to choose and arrange the widget’s provider buttons. See Figure 3.

• To add a provider button to the first open position, click on a provider in the list. Alternately, you can drag a provider to a button position.
• To rearrange the buttons, drag buttons from their current positions to new ones.
• To delete a provider button, click on the close decoration in the button’s upper right corner.

NOTE: Some providers (indicated by a gear icon) must be configured before you can add their buttons to your widget. You can also initialize or change the configuration by clicking on the gear icon. The gear icon turns green after the provider is successfully configured.

Additional information in provider configuration can be found in the Provider Setup Guide.

Figure 3: Provider Menu

Style ¶

The Style page allows an Administrator to fine tune the appearance of the widget. These final touches are available to Pro and Enterprise users only. As in the Layout section, a real time preview displays any changes.

Available to:

Saving the Configuration ¶

For Service Level:

When you complete your configuration, click the Save button at the bottom. This saves your widget’s configuration on Janrain’s servers. You can make changes by revisiting the Configure Widget screen and re-saving.

For Service Level:

If you paid for Pro or Enterprise support level for your application, an option box appears next to the Generate the Code button. This gives you two options to choose before saving your configuration.

• Save this configuration on the Engage servers. This allows for a single, central configuration located on the Janrain Engage servers. Changes made on the dashboard automatically propagate to deployed widgets on the client websites.
• Embed this configuration on the JavaScript code. The settings for the configuration are included in the generated code as JavaScript, which can be modified independently of the Dashboard. This is useful for maintaining multiple widgets with different configurations.

Next Step: ¶

After you save your configuration, continue on to Get the Code.