JSON files with widget settings
The widget settings are contained in the following JSON files:
settingsJSON
— main settingssocialsJSON
— social login settingsthemeJSON
— theme settings
You can reuse the settings in the files and display the same widget on different settings. The settings URL is specified in the widget initialization code:
- json
<script>
const xl = new XsollaLogin.Widget({
// Other settings
settingsJSON: "url_string",
socialsJSON: "url_string",
themeJSON: "url_string"
});
</script>
Main settings
The main widget settings are:
- authorization methods (the
authorization_methods
object) - registration fields (the
registration_fields
object) - email address validation (the
email_validation
object) - additional settings
The template of the settingsJSON
file:
- json
{
"authorization_methods": {
// Authorization methods
},
"registration_fields": {
// Registration fields
},
"email_validation": {
// Settings for email validation
}
// Other widget settings
}
Authorization methods
Theauthorization_methods
object contains an array with available authorization methods. The login page is displayed according to the passed settings.Available authorization methods:
email
— authorization by an email address and password. The parameter is passed by default if there is noauthorization_methods
object with a definite list of methods.social
— social login. The parameter is passed by default if there is noauthorization_methods
object with a definite list of methods.username
— authorization by a username and password.phone
— authorization by the phone number and an SMS code.passwordless-email-code
— authorization by an email address and a code sent in an email.
Example:
- json
{
"authorization_methods": {
["email", "phone"]
}
// Other widget settings
}
Registration fields
Theregistration_fields
object contains an array of fields that are displayed on the registration page of the widget.Additionally, you can specify the following parameters to a field:
required
(boolean) — whether the field is required.default_value
(array) — an array of default values (for a list of countries or platforms).validation
(object) — validation parameters:allowed_characters
(string) — allowed characters for the field. Separated by a comma in the list as the regular expression values.max_length
(number) — maximum number of characters.min_length
(number) — minimum number of characters.regexps
(array with strings) — a regular expression for validating the entered value.
Example:
- json
{
// Other widget settings
"registration_fields": [
{
"name": "username",
"required": false,
"type": "str",
"validation": {
"allowed_characters": "A-Z, a-z, 0-9",
"max_length": 16,
"min_length": 5,
"regexps": ["^.{5,16}$"]
}
},
{ "name": "email", "required": true, "type": "email", "validation": {} },
{ "name": "bday", "required": true, "type": "date", "validation": {} },
{
"name": "platform",
"default_value": ["MacOS", "Nintendo Switch", "Steam"],
"required": false,
"type": "multi-select",
"validation": {}
},
{
"name": "country-name",
"default_value": ["US", "GB", "DE"],
"required": false,
"type": "select",
"validation": {}
},
{ "name": "password", "required": true, "type": "pass", "validation": {} },
{
"name": "password_confirm",
"required": false,
"type": "pass",
"validation": {}
},
{
"name": "promo_email_agreement",
"required": false,
"type": "bool",
"validation": {}
}
]
}
Email address validation
Theemail_validation
object contains the se_xsolla_email_validator
parameter that validates data entered in the email
field.- json
{
// Other widget settings
"email_validation": {
"use_xsolla_email_validator": true
}
}
Additional settings
Additional settings are passed in the JSON object root of thesettingsJSON
file.- json
{{
// Other widget settings
"can_register": true,
"can_reset_password": true,
"cookie_policy": "https://someurl.com"
}
Social networks settings
For social login, the following parameters are passed in the socialsJSON
file:
- list of regions
- parameters and types of social networks for every region
The template of the socialsJSON
file:
- json
{
"1": {
"primary": [
// Array of social networks for primary type
],
"secondary": [
// Array of social networks for secondary type
]
},
"2": {
"primary": [
// Array of social networks for primary type
],
"secondary": [
// Array of social networks for secondary type
]
},
"3": {
"primary": [
// Array of social networks for primary type
],
"secondary": [
// Array of social networks for secondary type
]
},
"4": {
"primary": [
// Array of social networks for primary type
],
"secondary": [
// Array of social networks for secondary type
]
},
"5": {
"primary": [
// Array of social networks for primary type
],
"secondary": [
// Array of social networks for secondary type
]
},
"6": {
"primary": [
// Array of social networks for primary type
],
"secondary": [
// Array of social networks for secondary type
]
}
}
Every region has a number:
- 1 — Europe
- 2 — China
- 3 — North and South Korea
- 4 — CIS
- 5 — North and South America
- 6 — the rest of the world
The type of a social network is defined for every region. There are 2 types of social networks: primary (primary
) and secondary (secondary
). The primary social networks are displayed as a big button and are more visible on the widget page. The secondary social networks are displayed as small buttons and are less visible.

Every type of a social network contains an array of objects:
- json
{
"1": {
"primary": [{
"name": "google",
"jwt": "https://login.xsolla.com/api/social/google/login_redirect",
"oauth2": "https://login.xsolla.com/api/oauth2/social/google/login_redirect"
}],
"secondary": [{
"name": "facebook",
"jwt": "https://login.xsolla.com/api/social/facebook/login_redirect",
"oauth2": "https://login.xsolla.com/api/oauth2/social/facebook/login_redirect"
},
{
"name": "twitter",
"jwt": "https://login.xsolla.com/api/social/twitter/login_redirect",
"oauth2": "https://login.xsolla.com/api/oauth2/social/twitter/login_redirect"
}
]
},
"2": {
"primary": [{
"name": "wechat",
"jwt": "https://login.xsolla.com/api/social/wechat/login_redirect",
"oauth2": "https://login.xsolla.com/api/oauth2/social/wechat/login_redirect"
}],
"secondary": [{
"name": "facebook",
"jwt": "https://login.xsolla.com/api/social/facebook/login_redirect",
"oauth2": "https://login.xsolla.com/api/oauth2/social/facebook/login_redirect"
},
{
"name": "twitter",
"jwt": "https://login.xsolla.com/api/social/twitter/login_redirect",
"oauth2": "https://login.xsolla.com/api/oauth2/social/twitter/login_redirect"
},
{
"name": "steam",
"jwt": "https://login.xsolla.com/api/social/steam/login_redirect",
"oauth2": "https://login.xsolla.com/api/oauth2/social/steam/login_redirect"
}
]
}
// More regions
}
Theme settings
The widget theme settings include:
- widget color and size settings
- rounding settings (the
rounding
object) - widget background settings (the
background
object) - header settings (the
header
object) - widget tabs settings (the
tabs
object) - social networks display settings (the
primary_socials
andsecondary_socials
objects) - scene settings (the
scene
object)
The template of the themeJSON
file:
- json
{
// Color and size settings
"header": {
// Header settings
},
"background": {
// Widget background settings
},
"rounding": {
// Rounding settings
},
"tabs": {
// Tab settings
},
"primary_socials": {
// Display settings for the primary social networks
},
"secondary_socials": {
// Display settings for the secondary social networks
},
"scene": {
// Scene settings
}
}
Widget color and size
The color and size of the widget are passed in the JSON object root of thethemeJSON
file.Example:
- json
{
// Other theme settings
"primary_color": "#708090",
"secondary_color": "#4682B4"
}
Rounding
The rounding
object contains parameters of rounding for different widget elements. The property applies to all four corners simultaneously.
- json
{
// Other theme settings
"rounding": {
"inputs": "8px",
"widget": "8px"
}
}
Background
Thebackground
object contains the widget background parameters.- json
{
// Other theme settings
"background": {
"color": "#708090",
"image": {
"url": "https://someurl.com",
"opacity": "3"
}
}
}
Header
Theheader
object contains the parameters of the widget header — an area above all widget fields.- json
{
// Other theme settings
"header": {
"image": {
"url": "https://someurl.com",
"opacity": "3",
"size": "cover"
}
}
}
Tabs
Thetabs
object contains a hide
parameter. This parameter manages the display of registration or authorization tabs on the widget.- json
{
// Other theme settings
"tabs": {
"hide": true
}
}
Social networks display
Theprimary_socials
and secondary_socials
objects contain the hide
parameter that manages the display of primary and secondary social networks on a widget.Example:- json
{
// Other theme settings
"primary_socials": {
"hide": true
},
"secondary_socials": {
"hide": false
}
}
Scene
Thescene
object contains parameters for a scene — an area around the widget.- json
{
// Other theme settings
"scene": {
"color": "#708090",
"image": {
"url": "https://someurl.com",
"size": "cover"
}
}
}
Found a typo or other text error? Select the text and press Ctrl+Enter.