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 pane of a Login project.
  3. 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 Customer Success Manager or email to csm@xsolla.com.

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.

Widget customization using CSS file upload

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

Font customization code example:

Copy
Full screen
Small screen
  • css
@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:

Copy
Full screen
Small screen
  • css
#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);
}

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

  1. Click Save changes.

Widget texts customization

The login widget is localized in 20 languages: English, Arabic, Bulgarian, Chinese, Czech, German, Spanish, French, Hungarian, Italian, Japanese, Korean, Polish, Portuguese, Romanian, Russian, Thai, Turkish, Taiwanese, and Vietnamese. You can customize the texts of the login widget on your own. Below is a list of their default keys and values in English:

Note
To change other texts of the widget, contact your Personal Manager or email at integration@xsolla.com.
Copy
Full screen
Small screen
  • json
{
  "form.auth.title": "",
  "form.auth.subtitle": "",
  "login.link": "Log in",
  "sign-up.link": "Sign up",
  "back-button.text": "Back to login",
  "form.field.email": "Email",
  "form.field.password": "Password",
  "form.field.new-password": "New password",
  "form.field.confirm-password.validation": "Passwords do not match",
  "form.field.confirm-password": "Confirm password",
  "form.field.required.validation": "Required",
  "form.login.login-button": "Log in",
  "form.reset-password.reset-button": "Recover password",
  "form.reset-password.link": "Forgot your password?",
  "form.reset-password.header": "Recover password",
  "form.reset-password.message": "You will receive an email with a link to reset your password.",
  "form.reset-password.success": "It’s okay, we all forget sometimes. Just change your password using the instructions we sent to {email}.",
  "form.reset-password.resend": "Resend message",
  "form.set-password.set-button": "Set new password",
  "form.set-password.success": "Password is successfully recovered.",
  "form.field.sign-up.consent" : "Please choose whether or not to give us your {link} to carry out profiling and use your data for marketing purposes.",
  "form.field.sign-up.username": "Username",
  "form.field.sign-up.email": "Email",
  "form.field.sign-up.password": "Password",
  "form.field.sign-up.bday": "Date of birth",
  "form.field.sign-up.birthday": "Date of birth",
  "form.field.sign-up.nickname": "Nickname",
  "form.field.sign-up.last_name": "Last name",
  "form.field.sign-up.first_name": "First name",
  "form.field.sign-up.family-name": "Last name",
  "form.field.sign-up.given-name": "First name",
  "form.field.sign-up.gender": "Gender",
  "form.field.sign-up.country": "Country",
  "form.field.sign-up.country-name": "Country",
  "form.field.sign-up.platform": "Platform",
  "form.field.sign-up.promo_email_agreement": "Subscribe to our newsletter",
  "form.field.sign-up.password_confirm": "Confirm password",
  "form.field.sign-up.complete-registration.description": "Please confirm your account following the instructions we sent to {email}.",
  "form.field.sign-up.confirm-registration.description": "We sent a confirmation code to {email}.{newLine}{timerMessage}",
  "form.field.sign-up.complete-registration.spam": "If you cannot find the confirmation email, please check the spam folder.",
  "form.field.sign-up.complete-registration.button": "Thanks, dismiss",
  "form.sign-up.sign-up-button": "Create account",
  "form.sign-up.sign-up-button.accept": "Accept and create",
  "form.sign-up.sign-up-button.decline": "Skip and create",
  "form.get-code.confirm-code.we-sent": "We sent a confirmation code to {whereTo}.",
  "form.get-code.confirm-code.can-resend-timer": "You can get a new code in {timer} {timer, plural, one {second} other {seconds}}.",
  "form.get-link.confirm-link.we-sent": "We’ve sent a confirmation email with a link to {whereTo}.",
  "form.get-link.confirm-link.can-resend-timer": "You can get a new confirmation email with a link in {timer} {timer, plural, one {second} other {seconds}}.",
  "form.ask.header": "Provide additional info",
  "form.ask.back-button.text": "Back to {link}",
  "form.ask.button.confirm": "continue",
  "form.ask.back-button.text.link": "login options",
  "form.ask.title.collect.email": "We will send an email with the confirmation code.",
  "form.ask.title.collect.phone": "We will send you a confirmation code.",
  "form.ask.title.collect.both-data.phone": "Confirm your phone and email address.",
  "form.ask.title.collect.both-data.email": "Confirm your email address and phone.",
  "form.ask.title.collect.confirm.phone": "Confirm your phone",
  "form.ask.title.collect.confirm.email": "Confirm your email address",
  "form.ask.title.collect.confirm.both-data": "Confirm your data",
  "form.ask.confirm-code.email": "Enter the code we sent to {whereTo} to confirm your email address.",
  "form.ask.confirm-code.phone": "Enter a confirmation code we sent to {whereTo}.",
  "form.ask.confirm-code.email.link": "Click the link in the email we sent to {whereTo} to confirm your email address.",
  "form.ask.confirm-code.email.link.resend": "Resend confirmation email",
  "back-button.previous-step": "Back to {link}",
  "back-button.previous-step.link": "previous step",
  "form.ask.skip-button": "Skip",
  "form.ask.dismiss-button": "dismiss",
  "form.ask.ask-button": "Submit",
  "form.ask.email.field-title": "Enter your email to secure your account.",
  "form.ask.phone.field-title": "Enter your phone to secure your account.",
  "form.ask.success-message": "Your data was saved.",
  "form.ask.confirm-registration.description": "We sent a confirmation code to {whereTo}.{newLine}{timerMessage}",
  "form.ask.confirm-registration.exist-phone": "This phone is linked to another {merchant} account. Log in with this phone?",
  "form.ask.confirm-registration.exist-email": "This email is linked to another {merchant} account. Log in with this email?",
  "form.ask.confirm-registration.exist-user.btn": "Yes, log in",
  "form.confirm-status.success.title": "Success",
  "form.confirm.main-title": "Are you trying to log in?",
  "form.confirm.decline-btn": "No",
  "form.confirm.accept-btn": "Yes",
  "form.confirm-status.success.subtitle.phone": "Your phone number has been confirmed. You can close this tab.",
  "form.confirm-status.success.subtitle.email": "Your email address has been confirmed. You can close this tab.",
  "form.confirm-status.fail.title.phone": "Phone number not confirmed",
  "form.confirm-status.fail.title.email": "Email address not confirmed",
  "form.confirm-status.fail.subtitle": "Confirmation code has expired. Go back to login and try again.",
  "form.confirm-status.decline.header": "Thank you. This answer helps us improve our services.",
  "form.confirm-code.invalid": "Confirmation code has expired.",
  "form.otp.description": "Enter the 6-digit verification code we sent to {destination}.",
  "form.otp.resend": "Resend code",
  "form.otp.resend-timer": "Resend code in {count} {count, plural, one {second} other {seconds}}",
  "form.otp.send-button": "Confirm",
  "form.field.otp.placeholder": "Verification code",
  "form.field.search.placeholder": "Search...",
  "form.change-auth-method.phone.message": "Enter phone number",
  "form.change-auth-method.email-username.message": "Enter email or username",
  "form.change-auth-method.email.message": "Enter email",
  "form.change-auth-method.username.message": "Enter username",
  "form.enter-your.email-username-phone": "Enter your email, username, or phone",
  "form.enter-your.email-username": "Enter your email or username",
  "form.enter-your.email-phone": "Enter your email or phone",
  "form.enter-your.username-phone": "Enter your username or phone",
  "form.enter-your.phone": "Enter your phone to receive SMS",
  "form.enter-your.email": "Enter your email address to get code",
  "form.enter-your.username": "Enter your username",
  "form.field.phone.code.title": "Enter the confirmation code",
  "form.button.login-now": "Log in",
  "form.button.submit": "Submit",
  "form.email-login.send-code.text": "We will send you a code to the email address you entered. Use this code to log in.",
  "form.phone-login.send-sms.text": "We will send you a code to the phone number you entered. Use this code to log in.",
  "form.button.get-code": "Get code",
  "form.button.get-link": "Get link",
  "form.button.get-link.resend": "Get link",
  "form.enter-phone-code.error.incorrect-code": "Incorrect confirmation code. Check the code that you received and try again.",
  "form.phone-login.get-code.timer-message": "We sent a confirmation code to {whereTo}.{newLine}{timerMessage}",
  "form.phone-login.get-code.resend-message": "We sent you a text with a confirmation code. {link}.",
  "form.phone-login.get-code.resend-code": "Resend the code",
  "success-message.footer": "This window will automatically close in 5 seconds",
}

To change the texts:

  1. Create a JSON file with localized texts for the widget. Available locales: en, ar, bg, cn, cs, de, es, fr, he, it, ja, ko, pl, pt, ro, ru, th, tr, tw, vi. The file should have the following structure:

Note
If you do not provide a value for any language, default values will be used.
Copy
Full screen
Small screen
  • json
{
  "en": {
    "form.auth.title": "Sign Up",
    "form.auth.subtitle": "To continue authorization please enter your email"
  },
  "ar": {
    "form.auth.title": "الاشتراك",
    "form.auth.subtitle": "يُرجى إدخال بريدك الإلكتروني للمصادقة"
  },
  "bg": {
    "form.auth.title": "Sign Up",
    "form.auth.subtitle": "To continue authorization please enter your email<span>{timer}</span>"
  },
  "cn": {
    "form.auth.title": "Sign Up",
    "form.auth.subtitle": "To continue authorization please enter your email"
  },
  "cs": {
    "form.auth.title": "Sign Up",
    "form.auth.subtitle": "To continue authorization please enter your email"
  },
  "de": {
    "form.auth.title": "Registrieren",
    "form.auth.subtitle": "Bitte gib deine E-Mail-Adresse zur Authentifizierung ein"
  },
  "es": {
    "form.auth.title": "Registrarse",
    "form.auth.subtitle": "Introduce tu correo para la autentificación."
  },
  "fr": {
    "form.auth.title": "S'abonner",
    "form.auth.subtitle": "Veuillez saisir votre adresse e-mail pour vous authentifier"
  },
  "he": {
    "form.auth.title": "Sign Up",
    "form.auth.subtitle": "To continue authorization please enter your email"
  },
  "it": {
    "form.auth.title": "Iscriviti",
    "form.auth.subtitle": "Inserisci il tuo indirizzo e-mail per l'autenticazione"
  },
  "ja": {
    "form.auth.title": "サインアップ",
    "form.auth.subtitle": "認証のためにメールアドレスを入力してください"
  },
  "ko": {
    "form.auth.title": "가입",
    "form.auth.subtitle": "인증을 위해 이메일을 입력하세요"
  },
  "pl": {
    "form.auth.title": "Zarejestruj się",
    "form.auth.subtitle": "Podaj swój adres e-mail w celu uwierzytelnienia"
  },
  "pt": {
    "form.auth.title": "Registrar-se",
    "form.auth.subtitle": "Insira seu e-mail para autenticação"
  },
  "ro": {
    "form.auth.title": "Sign Up",
    "form.auth.subtitle": "To continue authorization please enter your email"
  },
  "ru": {
    "form.auth.title": "Подписаться",
    "form.auth.subtitle": "Введите адрес электронной почты для аутентификации"
  },
  "th": {
    "form.auth.title": "สมัคร",
    "form.auth.subtitle": "โปรดกรอกอีเมลของคุณเพื่อการตรวจสอบสิทธิ์"
  },
  "tr": {
    "form.auth.title": "Kaydol",
    "form.auth.subtitle": "Kimlik doğrulama için lütfen e-postanı gir"
  },
  "tw": {
    "form.auth.title": "Sign Up",
    "form.auth.subtitle": "To continue authorization please enter your email"
  },
  "vi": {
    "form.auth.title": "Đăng Ký",
    "form.auth.subtitle": "Vui lòng nhập email của bạn để xác thực"
  }
}
  1. Place the created JSON file on your server.
File URL example:
https://your-domain.com/assets/loginWidgetLocales.json
  1. Pass the file URL during widget initialization as shown below:
Copy
Full screen
Small screen
  • js
const xl = new Widget({
  // any other params
  customLabels: ‘https://your-domain.com/assets/loginWidgetLocales.json’
});

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.

Note
After configuring the widget through Publisher Account, wait 7-10 minutes for the widget to update or flush the cache.

Widget customization using CSS code in Site Builder

Note
To use this method, you must have a host where you can publicly host the CSS file for future use.

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

Example:

Copy
Full screen
Small screen
  • css
#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);
}
  1. Upload a file with CSS code to your hosting to public access and copy a link to the file.
  2. In Site Builder, click Add block > Custom code.
  3. Insert the following code:
Copy
Full screen
Small screen
  • css
<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.

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: February 20, 2024

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!