Login / Customisation du widget
  Retour à la documentation

Login

Customisation du widget

Comment ça marche

Un widget Login est une interface graphique permettant d’enregistrer et d’autoriser des utilisateurs dans votre application. Le widget peut contenir des champs pour la saisie des informations d’identification de l’utilisateur et des boutons pour la connexion via les réseaux sociaux, mais également des textes explicatifs et des boutons supplémentaires, par exemple pour réinitialiser le mot de passe ou demander un code de confirmation.

Xsolla fournit des modèles de widgets standard. Leur apparence et leur contenu sont déterminés par la méthode de connexion choisie pour votre projet. Vous trouverez ci-dessous la vue standard du widget de connexion classique.

Le produit Login vous permet de customiser le widget pour qu’il soit reconnaissable et s’intègre harmonieusement à l’interface de votre application ou de votre site Web. Pour ce faire, vous pouvez :

  • ajouter votre logo ;
  • modifier la palette de couleurs ;
  • télécharger une image et l’utiliser comme arrière-plan pour la zone autour du widget ;
  • modifier la forme du contour des boutons et des champs de saisie ;
  • modifier l’ordre des boutons de réseaux sociaux sur le widget (cet ordre est déterminé par le choix du pays de localisation) ;
  • définir la langue d’affichage du widget.

Vous pouvez personnaliser l’apparence et le contenu du widget :

Customisation du widget dans le Compte éditeur

Nous vous recommandons de modifier le widget dans votre Compte éditeur, car cela vous permet de :

  • voir les changements introduits en temps réel ;
  • tester le fonctionnement des boutons du widget directement dans l’éditeur ou dans la fenêtre de prévisualisation sur la page Widget customization.

Note
Les modifications apportées au widget dans le Compte éditeur sont appliquées partout où il est utilisé.
Avis
La customisation du widget n’est disponible qu’après avoir signé le contrat de licence produit Xsolla. Pour signer le contrat, accédez à la section Agreements de votre Compte éditeur.

Pour customiser le widget :

  1. Ouvrez votre projet dans le Compte éditeur et accédez à la section Login.
  2. Dans le volet du projet de connexion, cliquez sur Configure.
  3. Accédez au bloc Customization et sélectionnez la section Widget customization.

  1. Sélectionnez la langue et le pays pour la localisation du widget (facultatif).
  2. Customisez le style du widget à l'aide de l'éditeur.
  3. Après avoir terminé toutes les configurations, passez au mode HTML à l'aide du bouton situé au-dessus de la zone de prévisualisation du widget.
  1. Cliquez sur Copy code pour copier le code d'initialisation du widget généré. Utilisez ce code pour intégrer le widget dans votre application ou votre site Web.

Comment utiliser l'éditeur de widget

  1. Pour ouvrir l'éditeur de widget, cliquez sur Customize sur la page Widget customization.
  2. Dans la fenêtre de l'éditeur, apportez les modifications nécessaires au style du widget :Toutes les modifications sont affichées en temps réel dans la zone de prévisualisation du widget.
Note
Toutes les modifications de paramètres sont enregistrées automatiquement, ce qui vous permet d’arrêter et de reprendre l’édition du widget à tout moment.
  1. Pour vérifier comment le widget s'affiche dans différentes langues, changez la langue dans la liste déroulante située au-dessus de la zone de prévisualisation du widget.
Note
Le changement de langue dans l’éditeur n’affecte pas la langue dans laquelle le widget est affiché aux utilisateurs.
  1. Après avoir terminé toutes les modifications dans l'éditeur de widget, cliquez sur Publish.
Avis
Une fois publié, le widget sera modifié dans toutes les applications et tous les sites Web auxquels il est connecté.
Note
Après la publication, la page Widget customization peut afficher la version précédente du widget chargée par le navigateur à partir du cache. Dans ce cas, actualiser la page en appuyant sur Control+F5.
  1. Ouvrez l'éditeur de widget.
  2. Dans la barre latérale de l'éditeur, cliquez sur Login widget.
  3. Dans le panneau Login widget editor qui s'ouvre, activez la bascule Logo.

  1. Cliquez sur le bouton de téléchargement situé sous la bascule.
  2. Dans la fenêtre de recherche de fichiers, sélectionnez le fichier image du logo et cliquez sur Open.

    Le panneau Assets s'ouvre dans la barre latérale de l'éditeur. Le logo téléchargé apparaît à la fois dans ce panneau et dans la zone de prévisualisation du widget.

  1. Si vous souhaitez tester une autre version du logo, utilisez le bouton Upload dans le panneau Assets.
  1. Pour afficher une version différente du logo sur le widget, cliquez sur son image dans le panneau Assets.
  2. Lorsque vous avez terminé de customiser votre logo, fermez le panneau Assets. Votre dernier choix sera automatiquement enregistré.

Comment modifier la palette de couleurs du widget

La palette de couleurs du widget est définie par trois couleurs de base :
  • Text — utilisé pour les textes explicatifs, le contenu des champs de saisie et les logos des réseaux sociaux sur les boutons au bas du widget.
  • Button — utilisé pour les boutons Login et Accept and create, pour les contours des champs et des boutons mis en évidence, ainsi que pour les liens et le titre de l’onglet actif du widget.
  • Page tint — définit la couleur d’arrière-plan du widget.
La couleur de la page sur laquelle le widget est affiché en mode plein écran est une combinaison des couleurs Button et Page tint. Cette couleur est définie automatiquement.
Note
Les boutons des réseaux sociaux les plus utilisés en haut du widget conservent toujours la même couleur, quelle que soit la palette de couleurs sélectionnée.
Pour modifier les couleurs de base du widget :
  1. Ouvrez l’éditeur de widget.
  2. Dans la barre latérale de l’éditeur, cliquez sur Global theme puis sur le bouton de la couleur de base que vous souhaitez modifier.
  3. Sélectionnez la nouvelle couleur de l’une des manières suivantes :
    • Spécifiez-la dans la palette de couleurs qui s’ouvre. Pour modifier les couleurs de la palette, utilisez le curseur situé en dessous ;
    • Utilisez le bouton situé en dessous du curseur pour changer de mode : HEX, RGB ou HSL, et saisissez le code de la couleur dans le format sélectionné.
    Les modifications apportées à la palette de couleurs sont affichées en temps réel dans la zone de prévisualisation du widget.
  1. Si nécessaire, modifiez les autres couleurs de base de la même manière.

Comment placer une image d'arrière-plan dans la zone autour du widget

  1. Ouvrez l'éditeur de widget.
  2. Dans la barre latérale de l'éditeur, cliquez sur Login widget.
  3. Dans le panneau Login widget editor qui s'ouvre, dans la section Page background, cliquez sur l'icône + puis sur le bouton upload.

  1. Dans la fenêtre de recherche de fichiers, sélectionnez le fichier d'image d'arrière-plan et cliquez sur Open.

    Le panneau Assets s'ouvre dans la barre latérale de l'éditeur. L'image téléchargée apparaît à la fois dans ce panneau et dans la zone entourant le widget.
  1. Si vous souhaitez tester une version différente de l'image d'arrière-plan, utilisez le bouton Upload dans le panneau Assets.
  2. Pour afficher une variante de l'arrière-plan dans la zone de prévisualisation du widget, cliquez sur son image dans le panneau Assets.
  3. Lorsque vous avez terminé de customiser votre image d'arrière-plan, fermez le panneau Assets. Votre dernier choix sera automatiquement enregistré.

Comment remodeler les boutons

Tous les boutons et champs de saisie du widget sont rectangulaires ou carrés avec des coins arrondis. Le degré d’arrondi peut varier de 0 (coins droits) à 100 %.

Pour modifier le degré d’arrondi :

  1. Ouvrez l’éditeur de widget.
  2. Utilisez le curseur Roundness pour sélectionner la forme des boutons du widget.

Comment modifier l'ordre des boutons des réseaux sociaux

Les boutons de réseaux sociaux ne peuvent être affichés sur le widget qu’après leur activation dans les paramètres de votre projet de connexion. L’ordre d’affichage des boutons est basé sur la localisation géographique de l’utilisateur. Le widget présente en premier les boutons des réseaux sociaux les plus populaires dans le pays de l’utilisateur, classés par popularité de gauche à droite dans un ordre décroissant. Dans la rangée supérieure du widget, chaque utilisateur voit le dernier réseau social avec lequel il s’est connecté à l’application.

Le paramètre Country est réglé par défaut sur Autodetected. Pour modifier ce paramètre, utilisez la liste déroulante Country sur la page Widget customization.

Note
Si vous souhaitez spécifier un ordre différent dans lequel les boutons de réseaux sociaux sont affichés sur le widget, contactez votre responsable de la réussite client ou envoyez un e-mail à csm@xsolla.com.

Comment définir la langue d'affichage du widget

Les widgets standard Login de Xsolla sont localisés dans 20 langues différentes. La langue de l’interface du widget est déterminée par les deux premières lettres de la variable preferredLocale que vous passez lors de l’initialisation du widget.

Exemple : pour afficher le widget en anglais, définissez preferredLocale: “en_XX”.

Si la valeur de la variable preferredLocale n’est pas définie, la langue est déterminée automatiquement par l’adresse IP ou la langue du navigateur.

Pour définir la langue dans laquelle le widget sera affiché aux utilisateurs :

  1. Sur la page Widget customization, sélectionnez une langue dans la liste déroulante Available languages.

    Dans le code d'initialisation du widget généré par Xsolla, la variable preferredLocale changera de valeur en fonction de votre choix.

  1. Pour visualiser le code d'initialisation, passez en mode HTML (à l'aide du bouton situé au-dessus de la zone de prévisualisation).
  2. Pour vérifier comment le widget s'affiche dans la langue sélectionnée, passez en mode Preview.
Note
Vous pouvez également personnaliser la langue d’affichage du widget en modifiant la valeur de la variable preferredLocale directement dans le code d’initialisation du widget qui est intégré dans votre application ou site Web.

Customisation du widget à l'aide de fichiers JSON

Si vous avez déjà connecté le Xsolla Login Widget SDK, vous pouvez customiser l’apparence et le contenu du widget sans utiliser le Compte éditeur, en modifiant les fichiers JSON ci-dessous directement dans un éditeur de texte :

  • socialsJSON, pour définir l'ordre dans lequel les boutons de réseaux sociaux sont affichés sur le widget.
  • themeJSON, pour customiser l'apparence du widget :
    • sélectionnez la palette de couleurs du widget et de la zone qui l'entoure ;
    • définissez le degré d'arrondi des coins pour certains types d'éléments : boutons, champs de saisie, widget lui-même ;
    • utilisez des images d'arrière-plan pour différents éléments : le titre du widget, le widget lui-même, la zone qui l'entoure ;
    • si nécessaire, masquez l'onglet d'autorisation ou d'enregistrement du widget, ainsi que les boutons de réseaux sociaux.

Les paramètres du widget pouvant être modifiés sont décrits dans la section Fichiers JSON contenant les paramètres de widget.

Note
La langue d’affichage du widget n’est pas définie dans les fichiers JSON, mais dans le code d’initialisation du widget à l’aide du paramètre preferredLocale.

Customisation de widget par téléchargement de fichier CSS

  1. Créez un fichier CSS et incluez des paramètres de l'apparence du bloc Login.

Exemple de code de customisation des polices :

Copy
Full screen
Small screen
@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;
}

Exemple de code de customisation des styles :

Copy
Full screen
Small screen
#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. Ouvrez votre projet dans le Compte éditeur et accédez à la section Login.
  2. Dans le volet du projet de connexion, cliquez sur Configure.
  3. Accédez au bloc Customization et sélectionnez la section Widget customization.
  4. Téléchargez votre fichier CSS dans le bloc Additional customization.

  1. Cliquez sur Save Changes.

Personnalisation des textes du widget

Le widget Login est localisé en 20 langues : allemand, anglais, arabe, bulgare, chinois, coréen, espagnol, français, hongrois, italien, japonais, polonais, portugais, roumain, russe, tchèque, taïwanais, thaï, turc, vietnamien. Les textes du widget sont personnalisables. Vous trouverez ci-dessous une liste de leurs clés et valeurs par défaut en anglais :

Note
Pour modifier d’autres textes du widget, contactez votre gestionnaire personnel ou envoyez un e-mail à integration@xsolla.com.
Copy
Full screen
Small screen
{
  "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",
}

Pour modifier les textes :

  1. Créez un fichier JSON avec les textes localisés pour le widget. Langues disponibles : en, ar, bg, cn, cs, de, es, fr, he, it, ja, ko, pl, pt, ro, ru, th, tr, tw, vi. Le fichier se présente dans la structure suivante :

Note
Si vous ne fournissez pas de valeur pour une langue, les valeurs par défaut s’appliquent.
Copy
Full screen
Small screen
{
  "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. Placez le fichier JSON créé sur votre serveur.
Exemple d'URL du fichier :
https://your-domain.com/assets/loginWidgetLocales.json
  1. Passez l'URL du fichier lors de l'initialisation du widget comme illustré ci-dessous :
Copy
Full screen
Small screen
const xl = new Widget({
  // any other params
  customLabels: https://your-domain.com/assets/loginWidgetLocales.json’
});

Customisation du widget à l'aide de Site Builder

Si vous utilisez Xsolla Site Builder, vous pouvez personnaliser le widget Login dans les paramètres du bloc dans le constructeur.

Pour personnaliser le widget dans Site Builder :

  1. Ouvrez votre projet dans le Compte éditeur.
  2. Cliquez sur Site Builder dans le menu latéral.
  3. Dans la section Sites, sélectionnez votre site et cliquez sur Open Site Builder.
  4. Dans Login settings, accédez à la section Layout.
  5. Téléchargez un logo ou un arrière-plan personnalisé. Pour ce faire :
    1. Activez la bascule Logo ou Custom background ;
    2. Cliquez sur le bouton de téléchargement situé sous la bascule ;
    3. Dans la fenêtre de recherche de fichiers, sélectionnez le fichier image du logo et cliquez sur Open. Le panneau Assets s’ouvre dans la barre latérale de l’éditeur et l’image téléchargée apparaît à la fois dans ce panneau et dans la zone de prévisualisation du widget ;
    4. Choisissez la taille de l’image (facultatif) :
      1. Cliquez sur l’image téléchargée,
      2. Dans la section Image, ouvrez la liste déroulante Size et choisissez soit Ensure fit, Maximize, ou Fit ;
    5. Modifier la teinte de l’image (facultatif) :
      1. Cliquez sur l’image téléchargée,
      2. Dans la section Image > Tint, cliquez sur l’icône et choisissez l’une des options ou n’importe quelle couleur de la palette ;
    6. Pour afficher une version différente du logo ou de l’arrière-plan dans le widget, cliquez sur son image dans le panneau Assets.
  6. Dans la section Xsolla Login, vous pouvez configurer la sélection automatique des couleurs pour le bloc Login. Pour ce faire, activez la bascule Use site style.

Note
Après avoir configuré le widget via le Compte éditeur, attendez 7 à 10 minutes pour que le widget soit mis à jour ou que le cache soit vidé.

Customisation du widget à l'aide de code CSS dans Site Builder

Note
Pour utiliser cette méthode, vous devez disposer d’un hôte où vous pouvez héberger publiquement le fichier CSS en vue d’une utilisation ultérieure.

  1. Créez un fichier CSS et incluez des paramètres de l'apparence du bloc Login.

Exemple :

Copy
Full screen
Small screen
#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. Téléchargez un fichier avec le code CSS sur votre hébergement en accès public et copiez le lien vers ce fichier.
  2. Dans Site Builder, cliquez sur Add block > Custom code.
  3. Insérez le code suivant :
Copy
Full screen
Small screen
<script>
    window.SB.subscribe((api) => {
        api.login.setConfigMiddleware((config) => ({
            ...config,
            customStyle: "https://your-domain.com/assets/loginWidgetStyles.css"
        }));
    });
</script>

https://your-domain.com/assets/loginWidgetStyles.css est le lien vers le fichier CSS contenant vos styles.

Cet article vous a été utile ?
Merci !
Que pouvons-nous améliorer ? Message
Nous sommes désolés de l'apprendre
Dites-nous pourquoi vous n'avez pas trouvé cet article utile. Message
Merci pour votre commentaire !
Nous examinerons votre message et l'utiliserons pour améliorer votre expérience.
Évaluer cette page
Évaluer cette page
Que pouvons-nous améliorer ?

Préfère ne pas répondre

Merci pour votre commentaire !
Dernière mise à jour: 20 Février 2024

Faute de frappe ou autre erreur dans le texte ? Sélectionnez le texte concerné et appuyez sur Ctrl+Entée.

Signaler un problème
Nous améliorons continuellement notre contenu grâce à vos commentaires.
Indiquez votre adresse e-mail pour un suivi
Merci pour votre commentaire !