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:
Copy
- html
1<script>
2const xl = new XsollaLogin.Widget({
3 // Other settings
4 settingsJSON: "url_string",
5 socialsJSON: "url_string",
6 themeJSON: "url_string"
7});
8</script>
Main settings
The main widget settings are:
- authorization methods (the
authorization_methodsobject) - registration fields (the
registration_fieldsobject) - email address validation (the
email_validationobject) - additional settings
The template of the settingsJSON file:
Copy
- json
1{
2 "authorization_methods": {
3 // Authorization methods
4 },
5 "registration_fields": {
6 // Registration fields
7 },
8 "email_validation": {
9 // Settings for email validation
10 }
11
12 // Other widget settings
13}
Authorization methods
The authorization_methods object contains an array with available authorization methods. The login page is displayed according to the passed settings.
Note
At least one method should be passed to the array. Every method cannot be represented in an array more than once.
Available authorization methods:
email— authorization by an email address and password. The parameter is passed by default if there is noauthorization_methodsobject with a definite list of methods.social— social login. The parameter is passed by default if there is noauthorization_methodsobject 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:
Copy
- json
1{
2 "authorization_methods": ["email", "phone"]
3}
Registration fields
The registration_fields object contains an array of fields that are displayed on the registration page of the widget.
| Parameter | Type | Description |
|---|---|---|
| User email address. | ||
username | string | User account. |
password | pass | Password. |
password_confirm | pass | Password confirmation. |
given-name | string | User name. |
family-name | string | User family name. |
nickname | string | User nickname. |
bday | date | Birthdate. |
gender | string | Gender. |
country-name | select | Country. |
platform | multi-select | Platform. |
promo_email_agreement | boolean | Consent to receive promo materials. |
Note
The array must contain at least one field. The fields are displayed according to the order in which they are passed to the array.
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:
Copy
- json
1{
2 "registration_fields": [
3 {
4 "name": "username",
5 "required": false,
6 "type": "str",
7 "validation": {
8 "allowed_characters": "A-Z, a-z, 0-9",
9 "max_length": 16,
10 "min_length": 5,
11 "regexps": ["^.{5,16}$"]
12 }
13 },
14 { "name": "email", "required": true, "type": "email", "validation": {} },
15 { "name": "bday", "required": true, "type": "date", "validation": {} },
16 {
17 "name": "platform",
18 "default_value": ["MacOS", "Nintendo Switch", "Steam"],
19 "required": false,
20 "type": "multi-select",
21 "validation": {}
22 },
23 {
24 "name": "country-name",
25 "default_value": ["US", "GB", "DE"],
26 "required": false,
27 "type": "select",
28 "validation": {}
29 },
30 { "name": "password", "required": true, "type": "pass", "validation": {} },
31 {
32 "name": "password_confirm",
33 "required": false,
34 "type": "pass",
35 "validation": {}
36 },
37 {
38 "name": "promo_email_agreement",
39 "required": false,
40 "type": "bool",
41 "validation": {}
42 }
43 ]
44}
Email address validation
The email_validation object contains the se_xsolla_email_validator parameter that validates data entered in the email field.
| Parameter | Type | Description |
|---|---|---|
use_xsolla_email_validator | boolean | Whether to use the additional validation of data entered in the email field. If true, an email address is validated on the front-end and back-end sides with features like SMTP, RFC, and Greylist. If false, the email address is validated on the front-end side only. false by default. |
Copy
- json
1{
2 "email_validation": {
3 "use_xsolla_email_validator": true
4 }
5}
Additional settings
Additional settings are passed in the JSON object root of the settingsJSON file.
| Parameter | Type | Description |
|---|---|---|
can_register | boolean | Whether to enable registration for users. true by default. |
can_reset_password | boolean | Whether to enable password reset for users. true by default. |
consent_url | string | Link to the user policy consent. |
cookie_policy | string | Link to the cookie policy. |
privacy_policy | string | Link to the privacy policy. |
tos_url | string | Link to the terms of use. |
game_name | string | Name of a project or game. Displayed in some authorization methods. |
Copy
- json
1{
2 "can_register": true,
3 "can_reset_password": true,
4 "cookie_policy": "https://someurl.com"
5}
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:
Copy
- json
1{
2 "1": {
3 "primary": [
4 // Array of social networks for primary type
5 ],
6 "secondary": [
7 // Array of social networks for secondary type
8 ]
9 },
10 "2": {
11 "primary": [
12 // Array of social networks for primary type
13 ],
14 "secondary": [
15 // Array of social networks for secondary type
16 ]
17 },
18 "3": {
19 "primary": [
20 // Array of social networks for primary type
21 ],
22 "secondary": [
23 // Array of social networks for secondary type
24 ]
25 },
26 "4": {
27 "primary": [
28 // Array of social networks for primary type
29 ],
30 "secondary": [
31 // Array of social networks for secondary type
32 ]
33 },
34 "5": {
35 "primary": [
36 // Array of social networks for primary type
37 ],
38 "secondary": [
39 // Array of social networks for secondary type
40 ]
41 },
42 "6": {
43 "primary": [
44 // Array of social networks for primary type
45 ],
46 "secondary": [
47 // Array of social networks for secondary type
48 ]
49 }
50}
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:
| Parameter | Type | Description |
|---|---|---|
name | string | Name of a social network. Available options: amazon, apple, baidu, battlenet, china_telecom, discord, email, epicgames, facebook, github, google, google-plus, instagram, kakao, linkedin, mailru, microsoft, msn, naver, ok, paradox, paypal, pinterest, qq, reddit, steam, slack, twitch, twitter, vimeo, vk, wechat, weibo, xbox, yahoo, yandex, youtube. |
jwt | string | Link for opening a social network if the JWT authorization is used. |
oauth2 | string | Link for opening a social network if the OAuth 2.0 protocol-based authorization is used. |
Note
Every social network should be represented in an array at least once. The array can be empty.
Copy
- json
1{
2 "1": {
3 "primary": [{
4 "name": "google",
5 "jwt": "https://login.xsolla.com/api/social/google/login_redirect",
6 "oauth2": "https://login.xsolla.com/api/oauth2/social/google/login_redirect"
7 }],
8 "secondary": [{
9 "name": "facebook",
10 "jwt": "https://login.xsolla.com/api/social/facebook/login_redirect",
11 "oauth2": "https://login.xsolla.com/api/oauth2/social/facebook/login_redirect"
12 },
13 {
14 "name": "twitter",
15 "jwt": "https://login.xsolla.com/api/social/twitter/login_redirect",
16 "oauth2": "https://login.xsolla.com/api/oauth2/social/twitter/login_redirect"
17 }
18 ]
19 },
20 "2": {
21 "primary": [{
22 "name": "wechat",
23 "jwt": "https://login.xsolla.com/api/social/wechat/login_redirect",
24 "oauth2": "https://login.xsolla.com/api/oauth2/social/wechat/login_redirect"
25 }],
26 "secondary": [{
27 "name": "facebook",
28 "jwt": "https://login.xsolla.com/api/social/facebook/login_redirect",
29 "oauth2": "https://login.xsolla.com/api/oauth2/social/facebook/login_redirect"
30 },
31 {
32 "name": "twitter",
33 "jwt": "https://login.xsolla.com/api/social/twitter/login_redirect",
34 "oauth2": "https://login.xsolla.com/api/oauth2/social/twitter/login_redirect"
35 },
36 {
37 "name": "steam",
38 "jwt": "https://login.xsolla.com/api/social/steam/login_redirect",
39 "oauth2": "https://login.xsolla.com/api/oauth2/social/steam/login_redirect"
40 }
41 ]
42 }
43}
Theme settings
The widget theme settings include:
- widget color and size settings
- rounding settings (the
roundingobject) - widget background settings (the
backgroundobject) - header settings (the
headerobject) - widget tabs settings (the
tabsobject) - social networks display settings (the
primary_socialsandsecondary_socialsobjects) - scene settings (the
sceneobject)
The template of the themeJSON file:
Copy
- json
1{
2 // Color and size settings
3
4 "header": {
5 // Header settings
6 },
7 "background": {
8 // Widget background settings
9 },
10 "rounding": {
11 // Rounding settings
12 },
13 "tabs": {
14 // Tab settings
15 },
16 "primary_socials": {
17 // Display settings for the primary social networks
18 },
19 "secondary_socials": {
20 // Display settings for the secondary social networks
21 },
22 "scene": {
23 // Scene settings
24 }
25}
Widget color and size
The color and size of the widget are passed in the JSON object root of the themeJSON file.
| Parameter | Type | Description |
|---|---|---|
primary_color | string | Primary widget color (color of buttons and active input fields borders) in the RGB or HEX format. Default value is #0073F7. |
secondary_color | string | Secondary widget color (color of inactive input fields) in the RGB or HEX format. Default value is #DADADA. |
error_color | string | Error texts color in the RGB or HEX format. Default value is #EB002F. |
text_color | string | Main text color in the RGB or HEX format. Default value is #000000. |
Example:
Copy
- json
1{
2 "primary_color": "#708090",
3 "secondary_color": "#4682B4"
4}
Rounding
The rounding object contains parameters of rounding for different widget elements. The property applies to all four corners simultaneously.
| Parameter | Type | Description |
|---|---|---|
inputs | string | Rounding in pixels for active fields. Default value is 6px. |
buttons | string | Rounding in pixels for buttons. Default value is 100px. |
widget | string | Rounding in pixels for the widget. Default value is 6px. |
Copy
- json
1{
2 "rounding": {
3 "inputs": "8px",
4 "widget": "8px"
5
6 }
7}
Background
The background object contains the widget background parameters.
| Parameter | Type | Description |
|---|---|---|
color | string | Background color in the RGB or HEX format. Default value is #FFFFFF. |
image | object | Background image. The object contains a link to the image and opacity settings. The default opacity value is 1. |
Copy
- json
1{
2 "background": {
3 "color": "#708090",
4 "image": {
5 "url": "https://someurl.com",
6 "opacity": "3"
7 }
8 }
9}
Header
The header object contains the parameters of the widget header — an area above all widget fields.
| Parameter | Type | Description |
|---|---|---|
image | object | Header background image. The object contains a link to the image, opacity settings, and the background image size. The default opacity value is 1.Available values of the background image size correspond with the values of the background-size CSS property (cover by default). |
Copy
- json
1{
2 "header": {
3 "image": {
4 "url": "https://someurl.com",
5 "opacity": "3",
6 "size": "cover"
7 }
8 }
9}
Tabs
The tabs object contains a hide parameter. This parameter manages the display of registration or authorization tabs on the widget.
| Parameter | Type | Description |
|---|---|---|
hide | boolean | Whether to hide the authorization or registration tabs on a widget. Use the true value to, for example, temporarily hide the registration tab or display registration and authorization pages separately. Default value is false. |
Copy
- json
1{
2 "tabs": {
3 "hide": true
4 }
5}
Social networks display
The primary_socials and secondary_socials objects contain the hide parameter that manages the display of primary and secondary social networks on a widget.
| Parameter | Type | Description |
|---|---|---|
hide | boolean | Whether to hide social networks. Default value is false. |
Copy
- json
1{
2 "primary_socials": {
3 "hide": true
4 },
5 "secondary_socials": {
6 "hide": false
7 }
8}
Scene
The scene object contains parameters for a scene — an area around the widget.
| Parameter | Type | Description |
|---|---|---|
color | string | Background color in the RGB or HEX format. Default value is #FFFFFF. |
image | object | Background image. The object contains a link to the image, opacity settings, and the background image size. Available values of the background image size correspond with the values of the background-size CSS property (cover by default). |
Copy
- json
1{
2 "scene": {
3 "color": "#708090",
4 "image": {
5 "url": "https://someurl.com",
6 "size": "cover"
7 }
8 }
9}
Was this article helpful?
Thank you for your feedback!
We’ll review your message and use it to help us improve your experience.Found a typo or other text error? Select the text and press Ctrl+Enter.
