Widget customization

How it works

A login widget is a graphical interface for registering and authorizing users in your application. The widget may contain fields for entering user credentials and buttons for logging in via social networks. The widget can also include explanatory texts and additional buttons, for example, for resetting the password or requesting a confirmation code.

Xsolla provides standard widget templates. Their appearance and content is determined by the Login method chosen for your project. Below is the standard view of the classic login widget.

The Login product allows you to customize the widget to make it recognizable and consistent with the interface of your application or website. For this purpose, you can:

• add your logo
• change the color scheme
• upload an image and use it as a background for the area around the widget
• change the outline shape of buttons and input fields
• change the order of the social network buttons on the widget (this order is determined by the choice of the country of localization)
• set the widget’s display language

You can customize the appearance and content of the widget:

• using graphic editor in Publisher Account
• changing the settings in the corresponding JSON files of the Xsolla Login Widget SDK library

Widget customization in Publisher Account

We recommend that you edit the widget in your Publisher Account because this allows you to:

• see the introduced changes in real time
• test the operation of the widget buttons directly in the editor or Preview window on the Widget customization page

To customize the widget:

1. Open your project in Publisher Account and go to the Login section.
2. Click Configure in the pane of a Login project.
3. Go to the Customization block and select the Widget customization section.

4. Select the language and country of the widget localization (optional).
5. Customize the widget style using the editor.
6. After completing all settings, switch to HTML mode using the button above the widget preview area.

7. Click Copy code to copy the generated widget initialization code. Use this code to integrate the widget into your application or website.

How to use widget editor

1. To open the widget editor, click Customize on the Widget customization page.
2. In the editor window, make the necessary changes to the widget style:
   • add your logo
   • change the widget color scheme
   • upload an image and use it as a background for the area around the widget
   • set the outline shape of the buttons and input fields
   All changes are displayed in the widget preview area in real time.

3. To check how the widget will be displayed in different languages, change the language in the drop-down list above the widget preview area.

4. After completing all the changes in the widget editor, click Publish.

How to add a logo

1. Open the widget editor.
2. In the editor sidebar, click Login widget.
3. In the Login widget editor panel that opens, select the Logo toggle.

4. Click the upload button below the toggle.
5. In the file search window, select the logo image file and click Open.

The Assets panel will open in the sidebar of the editor. The uploaded logo will appear on both this panel and the widget in the preview area.

6. If you want to test a different version of the logo, use the Upload button in the Assets panel.

7. To display a different version of the logo on the widget, click its image in the Assets panel.
8. After you have finished customizing your logo, close the Assets panel. Your last choice will be saved automatically.

How to change the widget’s color scheme

The color scheme of the widget is defined by three base colors:

• Text — used for explanatory texts, input field content, and social network logos on the buttons at the bottom of the widget.
• Button — used for the Login and Accept and create buttons, for the outlines of highlighted fields and buttons, as well as for links and the title of the active widget tab.
• Page tint — defines the widget’s background color.

To change the base colors of the widget:

1. Open the widget editor.
2. In the editor sidebar, click Global theme and then the button of the base color you want to change.
3. Select the new color in one of the following ways:
   • Specify it in the color palette that opens. To change the colors in the palette, use the slider below it.
   • Use the button below the slider to switch the mode: HEX, RGB or HSL, and enter the code of the color in the selected format.
   Changes to the color scheme are displayed in the widget preview area in real time.

4. If necessary, change other base colors in the same way.

How to put a background image in the area around the widget

1. Open the widget editor.
2. In the editor sidebar, click Login widget.
3. In the Login widget editor panel that opens, in the Page background section, click the + icon and then the upload button.

4. In the file search window, select the background image file and click Open.

The Assets panel will open in the sidebar of the editor. The uploaded image will appear on both this panel and the area around the widget.

5. If you want to test a different version of the background image, use the Upload button in the Assets panel.
6. To display a variation of the background in the widget preview area, click its image in the Assets panel.
7. After you have finished customizing your background image, close the Assets panel. Your last choice will be saved automatically.

How to reshape buttons

All buttons and input fields of the widget are rectangular or square with rounded corners. The degree of rounding can vary from 0 (right corners) to 100%.

To change the degree of rounding:

1. Open the widget editor.
2. Use the Roundness slider to select the shape of the widget buttons.

How to change the order of social network buttons

Social network buttons can only be displayed on the widget once they are connected in your Login project settings. The order of the buttons is determined by the localization country. The widget displays the buttons of the most popular networks in that country, sorted by popularity from left to right in descending order. In the top line of the widget, each user is shown the last social network through which they entered the application.

The Country parameter is set to Autodetected by default. To change this setting, use the Country drop-down list on the Widget customization page.

How to set the display language of the widget

Standard Xsolla’s login widgets are localized in 20 languages. The language of the interface localization is encoded in the first two letters of the preferredLocale variable, which can be passed to the widget when it is initialized.

Example: To display the widget in English, set preferredLocale: "en_XX".

If the value of the preferredLocale variable is not set, then the language is determined automatically by the IP address or browser language.

To set the language in which the widget will be displayed to users:

1. On the Widget customization page, select a language from the Available languages drop-down list.

In the widget initialization code generated by Xsolla, the preferredLocale variable will change its value according to your choice.

2. To view the initialization code, switch to HTML mode (using the button above the preview area).
3. To check how the widget is displayed in the selected language, switch to Preview mode.

Widget customization using JSON files

If you already connected the Xsolla Login Widget SDK, you can change the appearance and content of the widget without using your Publisher Account. In a text editor, you can make changes to the following JSON files:

• socialsJSON, to set the order in which social network buttons are displayed on the widget
• themeJSON, to customize the appearance of the widget:
  • select the color scheme of the widget and the area around it
  • set the degree of corner roundness for certain types of elements: buttons, input fields, the widget itself
  • use background images for different elements: the widget title, the widget itself, the area around the widget
  • if necessary, hide the authorization or registration tab of the widget, as well as the social network buttons.

Widget settings available for editing are described in the JSON files with widget settings section.

Widget customization using CSS file upload

1. Create a CSS file and include visual settings for the Login block.

Font customization code example:

@font-face {
    font-family: 'Chakra petch';
    font-stretch: normal;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Chakra-Petch-Regular'),
        url('https://some-url-to-fonts/Chakra-Petch-Regular.woff2 ') format('woff2');
}

@font-face {
    font-family: 'Chakra petch';
    font-stretch: normal;
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: local('Chakra-Petch-Bold'),
        url('https://some-url-to-fonts/Chakra-Petch-Bold.woff2 ') format('woff2');
}

@font-face {
    font-family: 'Chakra petch';
    font-stretch: normal;
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: local('Chakra-Petch-Thin'),
        url('https://some-url-to-fonts/Chakra-Petch-Thin.woff2 ') format('woff2');
}

body, .app-block {
    font-family: 'Chakra petch', sans-serif;
}

Style customization code example:

#mainBody {
  padding: 13px 36px 25px;
  height: 464px;
  border: 1px solid #989898;
  box-shadow: 0 2px 27px rgba(0, 0, 0, 0.5);
}

form {
  position: relative;
}

.universal-input {
  margin-top: 30px;
}

button[data-testid="login-form__button-submit"] {
  background: black;
  padding: 10px 22px 11px;
  height: 40px;
  color: rgba(255, 255, 255, 1);
}

2. Open your project in Publisher Account and go to the Login section.
3. Click Configure in the pane of a Login project.
4. On the navigation page, go to the Customization block and select the Widget customization section.
5. Upload your CSS file in the Additional customization block.

6. Click Save changes.

Widget customization using Site Builder

If you use Xsolla Site Builder, you can customize the Login widget in the block’s settings in builder.

To customize the widget in Site Builder:

1. Open your project in Publisher Account.
2. Click Site Builder in the side menu.
3. In the Sites section, select your site and click Open Site Builder.
4. In Login settings go to the Layout section.
5. Upload a logo or custom background. To do it:
   1. Select the Logo or Custom background toggle.
   2. Click the upload button below the toggle.
   3. In the file search window, select the logo image file and click Open. The Assets panel will open in the sidebar of the editor, and the uploaded image will appear on both this panel and the widget in the preview area.
   4. Choose size of the image (optional):
      1. Click on the uploaded image.
      2. In the Image section, open the Size drop-down list and choose either Ensure fit, Maximize, or Fit.
   5. Change the tint of the image (optional):
      1. Click on the uploaded image.
      2. In the Image > Tint section, click the ⚙ icon and choose one of the options or choose any color in the palette.
   6. To display a different version of the logo or background in the widget, click its image in the Assets panel.
6. In the Xsolla Login section, you can set up automatic selection of colors for the Login block. To do it, select the Use site style toggler.

Widget customization using CSS code in Site Builder

1. Create a CSS file and include visual settings for the Login block.

Example:

#mainBody {
  padding: 13px 36px 25px;
  height: 464px;
  border: 1px solid #989898;
  box-shadow: 0 2px 27px rgba(0, 0, 0, 0.5);
}

form {
  position: relative;
}

.universal-input {
  margin-top: 30px;
}

button[data-testid="login-form__button-submit"] {
  background: black;
  padding: 10px 22px 11px;
  height: 40px;
  color: rgba(255, 255, 255, 1);
}

2. Upload a file with CSS code to your hosting to public access and copy a link to the file.
3. In Site Builder, click Add block > Custom code.
4. Insert the following code:

<script>
    window.SB.subscribe((api) => {
        api.login.setConfigMiddleware((config) => ({
            ...config,
            customStyle: "https://your-domain.com/assets/loginWidgetStyles.css"
        }));
    });
</script>

where https://your-domain.com/assets/loginWidgetStyles.css — is a link to the CSS file with your styles.

Rate this page

Is there anything we can improve? Send

Don’t want to answer

Thank you for your feedback!