- Social Sign-in Widget
- Implementation Guide
- User’s Guide
- Social Sign-in Widget API
- User Registration Widget
- Widget Basics
- Implementation Guide
- User Guide
- Default Email Templates
- Default UI Flow
- Mobile Support
- Using jQuery
- Saving Traditional Sign-in User Data
- User Registration Widget JS API
- Technical Overview
- Social Sharing Widget
- Provider Setup Guide
- One-Click Sharing Widget
- Legacy Sign-in Widget
- Legacy Sharing Widget
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.
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
Use the following settings to customize the widget as needed:
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:
|Type||Specifies whether the widget is embedded in the web page or is modal (appearing in a pop-up window overlaying the website when the user clicks on a link). Default: embedded|
|Format||Embedded widget only. Specifies the arrangement of the provider buttons on an embedded widget: two columns, one column, or a compact one row. Default: two columns|
|Providers Per Page||Specifies the number of provider buttons to display at once. Default: 6|
|Width||Embedded widget only. Total width of the widget in pixels. Default: 392 for a two-column widget.|
|Action Text||Text that appears above provider buttons. Default: Sign in using your account with|
|Show Attribution Text||If checked, a “Powered by Janrain” message appears at the bottom of the widget. Default: checked|
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.
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.
|Background Color||The widget background color. Enter a hexadecimal value or click on the text box to launch the color picker. Default: #ffffff|
|Border Color||The widget border color. Enter a hexadecimal value or click on the text box to launch the color picker. Default: #000000|
|Border Radius||The radius sets the angle of rounding for the border. Default: 5|
|Border Width||For Modal widgets only. The border width in pixels. Default: 5|
|Font||The font for the action text. Can be Helvetica or Times New Roman. Default: Helvetica|
|Font Color||The action text font color. Enter a hexadecimal value or click on the text box to launch the color picker. Default: #666666|
|Button Background||Background effect for provider buttons. Can be gradient, solid gray, solid white. Default: gradient|
|Button Radius||The radius sets the angle of rounding for button corners. Default: 5|
|Button Border Color||The border color for provider buttons. Enter a hexadecimal value or click on the text box to launch the color picker. Default: #CCCCCC|
Saving the Configuration ¶
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.
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.
Next Step: ¶
After you save your configuration, continue on to Get the Code.