Skip to content
Switch branches/tags

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

Xsolla Login Javascript SDK

Currently SDK supports following types of authorization:

  • via login/password
  • via social networks

On this page you can see:

See documentation to find more.

Integrating Widget

This library allows you to quickly integrate Xsolla Login Widget with your website in following steps:

Step 1: Connecting SDK

Connect Xsolla Login Javascript SDK using one of the following methods:

  • If the project uses Bower, launch the console and run
bower install xsolla-login-js-sdk
  • If the package is not connected, add the following code to the <head> tag of the HTML-page where the widget will be placed:
<script src=""></script>

Step 2: Initializing Widget

Add the widget initialization code to the <body> tag.

<script type="text/javascript">
  projectId: '[Login ID]',
  callbackUrl: '[callbackUrl]',
  locale: 'en_US'

Login ID from Publisher Account. Required.

URL to redirect the user to after registration/authentication/password reset. Must be identical to one of the Callback URL specified in Publisher Account in Login settings. Required if there are several Callback URLs.

You can pass several URL of the local server to make the widget available to the local build. For example https://localhost:9000.

Language of the widget interface and region in the <language code>_<country code> format where:

The following locales can be specified: Arabic (ar_AE), Bulgarian (bg_BG), Czech (cz_CZ), German (de_DE), Spanish (es_ES), French (fr_FR), Hebrew (he_IL), Italian (it_IT), Japanese (ja_JP), Korean (ko_KR), Polish (pl_PL), Portuguese (pt_BR), Romanian (ro_RO), Russian (ru_RU), Thai (th_TH), Turkish (tr_TR), Vientamese (vi_VN), Chinese Simplified (zh_CN), Chinese Traditional (zh_TW).

Also used for sorting social networks by the frequency of use in the chosen region.

     array of strings
List of parameters required for successful user registration/authentication. Example: 'email, promo_email_agreement'. The user will be asked to specify these parameters in the corresponding form.

URL with the widget styles file. If the value is empty, styles uploaded to Publisher Account are used.

Widget background color in the fullscreen mode. The value can be in any of the CSS color formats. Default is RGBA(50, 150, 150, 0.1).

The stack order of the widget in the fullscreen mode. Default is 1000000.

Step 3: Choosing Widget Placing

Choose the widget placing on the website start page:

Fullscreen Mode

Add the button with the on-click event and the function to the site.

<button onclick="">Fullscreen widget</button>

The fullscreen mode is closed by clicking outside the widget area.

Block on the Page

Add the block with the widget to the <body> tag and set the block ID.

<div id="xl_auth"></div>

Add the code and pass the parameter values as described below.

<script type="text/javascript">
var element_id = 'xl_auth';
var options = {
  width: 400,
  height: 550,
XL.AuthWidget(element_id, options);

ID of the block containing the Login Widget. Required.

Login Widget block settings. The object consists of the parameters listed below.

Block width in pixels. Default is 400.

Block height in pixels. Default is 550.

Widget start page. Can be:

  • XL.ROUTES.LOGIN — a login page via username/password. Used by default.
  • XL.ROUTES.REGISTRATION — a registration page.
  • XL.ROUTES.RECOVER_PASSWORD — a password reset page.
  • XL.ROUTES.ALL_SOCIALS — a page with a list of social networks available for user authentication.


If you have already integrated Login, you can also try additional features of Xsolla Login Widget:

Connecting OAuth 2.0 Protocol

Xsolla Login Widget supports the OAuth 2.0 protocol-based user authentication. Follow the recipe to set it up.

Customizing Widget Style

By default, the widget looks like this:

You can customize the widget style by changing the following characteristics of its elements:

  • Location on the screen
  • Theme
  • Size
  • Background

Customization is based on CSS.

To customize:

  1. Go to Publisher Account > your Login project > Customization > Widget style, download the archive with styles and unpack it.
  2. Download and install Node.js. The version of Node.js must not be later than 10.x.x.
  3. Run npm i from the unpacked styles folder.
  4. Edit app/styles/themes/_default.scss.
  5. Run npm run styles from the unpacked styles folder.
  6. Upload the file with a name resembling app.default.css from the dist folder to your Publisher Account.

For further widget UI customization, repeat steps 4–6.


After publication, the widget will be changed for all the projects it was connected to.

Tracking Widget Events

You can collect widget statistics on the following events:

To start tracking the event, initialize and process the action as described below.

Loading Widget

XL.on(XL.eventTypes.LOAD, function () {
    console.log('the widget has been loaded');

Closing Widget

XL.on(XL.eventTypes.CLOSE, function () {
    console.log('user has closed the widget');

Sending the Registration Confirmation Email

XL.on(XL.eventTypes.REGISTRATION_REQUEST, function () {
    console.log('registration form has been sent');