Socialid.login.renderLoginWidget
(Difference between revisions)
Dirceu.tiegs (Talk | contribs) m |
Renato.neves (Talk | contribs) |
||
Line 1: | Line 1: | ||
== Description == | == Description == | ||
− | + | Renders the Social Login widget within a DOM element. | |
− | + | This widget can trigger the following events: | |
* [[socialid.events.onLoginStart]] | * [[socialid.events.onLoginStart]] | ||
* [[socialid.events.onLoginSuccess]] | * [[socialid.events.onLoginSuccess]] | ||
Line 18: | Line 18: | ||
! align="left" width="200px" | containerId | ! align="left" width="200px" | containerId | ||
| width="200px" | obrigatório | | width="200px" | obrigatório | ||
− | | | + | | Id of the DOM element where the widget will be inserted. |
|+ | |+ | ||
! align="left" width="200px" | options | ! align="left" width="200px" | options | ||
| width="200px" | opcional | | width="200px" | opcional | ||
− | | | + | | A Javascript object containing additional parameters. |
|+ | |+ | ||
! align="left" width="200px" style="padding-left: 20px" | theme | ! align="left" width="200px" style="padding-left: 20px" | theme | ||
| width="200px" | opcional | | width="200px" | opcional | ||
− | | | + | | Determines which theme will be used to build the widget. It could be "icons", "bricks" ou "labeled_icons". Default: "icons". |
|+ | |+ | ||
! align="left" width="200px" style="padding-left: 20px" | providers | ! align="left" width="200px" style="padding-left: 20px" | providers | ||
| width="200px" | opcional | | width="200px" | opcional | ||
− | | Array | + | | Array containing one or more providers enabled to the user log in. The following providers are currently supported: "facebook", "twitter", "linkedin" e "gplus". Default: [] (no providers enabled). |
|+ | |+ | ||
! align="left" width="200px" style="padding-left: 20px" | language | ! align="left" width="200px" style="padding-left: 20px" | language | ||
| width="200px" | opcional | | width="200px" | opcional | ||
− | | | + | | Defines which translation will be used in the widgets. It could be "pt_br" (Brazilian Portuguese) ou "en" (English). Default: "en". |
|+ | |+ | ||
! align="left" width="200px" style="padding-left: 20px" | showSocialIdLink | ! align="left" width="200px" style="padding-left: 20px" | showSocialIdLink | ||
| width="200px" | opcional | | width="200px" | opcional | ||
− | | | + | | Determines if the "Powered by Social-ID NOW" link will be displayed in the widget or not. It could be true or false (boolean). Default: true. |
|+ | |+ | ||
! align="left" width="200px" style="padding-left: 20px" | loadCss | ! align="left" width="200px" style="padding-left: 20px" | loadCss | ||
| width="200px" | opcional | | width="200px" | opcional | ||
− | | | + | | Determines if the CSS theme file will be automatically added in the web page as a <link> tag. It could be true or false (boolean). Default: true. |
|+ | |+ | ||
! align="left" width="200px" style="padding-left: 20px" | cssUrl | ! align="left" width="200px" style="padding-left: 20px" | cssUrl | ||
| width="200px" | opcional | | width="200px" | opcional | ||
− | | | + | | Determines the CSS theme file url that will be automatically added in the web page as a <link> tag (only if loadCss is true). Default: "https://app.socialidnow.com/assets/api/themes.css". |
|} | |} | ||
== Example == | == Example == | ||
− | + | It renders the Social Login Widget within the "socialid_login_container" DOM element in Brazilian Portuguese ("pt_br"), with Facebook, Twitter, LinkedIn and Google+ available to login: | |
socialid.login.init(1, {loginType: "event"}); | socialid.login.init(1, {loginType: "event"}); | ||
Line 62: | Line 62: | ||
}); | }); | ||
− | + | ou can test this parameters in our playground: https://sid-examples.herokuapp.com/social_logins/playground |
Revision as of 17:06, 3 November 2014
Contents |
Description
Renders the Social Login widget within a DOM element.
This widget can trigger the following events:
- socialid.events.onLoginStart
- socialid.events.onLoginSuccess
- socialid.events.onLoginCancel
- socialid.events.onLoginError
Usage
socialid.login.renderLoginWidget(containerId, options)
Parameters
containerId | obrigatório | Id of the DOM element where the widget will be inserted. | options | opcional | A Javascript object containing additional parameters. | theme | opcional | Determines which theme will be used to build the widget. It could be "icons", "bricks" ou "labeled_icons". Default: "icons". | providers | opcional | Array containing one or more providers enabled to the user log in. The following providers are currently supported: "facebook", "twitter", "linkedin" e "gplus". Default: [] (no providers enabled). | language | opcional | Defines which translation will be used in the widgets. It could be "pt_br" (Brazilian Portuguese) ou "en" (English). Default: "en". | showSocialIdLink | opcional | Determines if the "Powered by Social-ID NOW" link will be displayed in the widget or not. It could be true or false (boolean). Default: true. | loadCss | opcional | Determines if the CSS theme file will be automatically added in the web page as a <link> tag. It could be true or false (boolean). Default: true. | cssUrl | opcional | Determines the CSS theme file url that will be automatically added in the web page as a <link> tag (only if loadCss is true). Default: "https://app.socialidnow.com/assets/api/themes.css". |
---|
Example
It renders the Social Login Widget within the "socialid_login_container" DOM element in Brazilian Portuguese ("pt_br"), with Facebook, Twitter, LinkedIn and Google+ available to login:
socialid.login.init(1, {loginType: "event"}); socialid.login.renderLoginWidget("socialid_login_container", { theme: "bricks", providers: ["facebook", "gplus", "twitter", "linkedin"], language: "pt_br", showSocialIdLink: true, loadCss: true, });
ou can test this parameters in our playground: https://sid-examples.herokuapp.com/social_logins/playground