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:

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

Note
Changes made to the widget through Publisher Account are applied wherever it is used.
Notice
Widget customization is available only after you sign the Xsolla Product Licensing Agreement. To sign the agreement, go to the Agreements section in your Publisher Account.

To customize the widget:

  1. Open your project in Publisher Account and go to the Login section.
  2. Click Configure in the panel of a Login project.
  3. On the navigation page, go to the Customization block and select the Widget customization section.

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

  1. 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:All changes are displayed in the widget preview area in real time.

Note
All parameter changes are saved automatically, so you can stop and resume editing the widget at any time.

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

Note
Changing the language in the editor does not affect the language in which the widget is displayed to users.

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

Notice
Once published, the widget will change across all applications and websites it is connected to.
Note
After publishing, the Widget customization page may display the previous version of the widget loaded by the browser from the cache. In this case, refresh the page by pressing Control+F5.

  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.

  1. Click the upload button below the toggle.
  2. 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.

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

  1. To display a different version of the logo on the widget, click its image in the Assets panel.
  2. 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.
The color of the page on which the widget is displayed in full screen mode is a combination of the Button and Page tint colors. This color is set automatically.

Note
The buttons of the most used social networks at the top of the widget are always colored the same, regardless of the selected color scheme.

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.

  1. 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.

  1. 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.

  1. If you want to test a different version of the background image, use the Upload button in the Assets panel.
  2. To display a variation of the background in the widget preview area, click its image in the Assets panel.
  3. 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.

Note
If you want to specify a different order in which social network buttons are displayed on the widget, contact your Account Manager.

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.

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

Note
You can also customize the widget’s display language by changing the value of the preferredLocale variable directly in the widget initialization code that is integrated into your application or website.

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.

Note
The widget’s display language is not set in JSON files, but in the widget's initialization code using the preferredLocale parameter.
Was this article helpful?
Thank you!
Is there anything we can improve? Message
We’re sorry to hear that
Please explain why this article wasn’t helpful to you. Message
Thank you for your feedback!
We’ll review your message and use it to help us improve your experience.
Rate this page
Rate this page
Is there anything we can improve?

Don’t want to answer

Thank you for your feedback!
Last updated: April 22, 2022

Found a typo or other text error? Select the text and press Ctrl+Enter.

Report a problem
We always review our content. Your feedback helps us improve it.
Provide an email so we can follow up
Thank you for your feedback!