Login / Widget-Anpassung
  Alle Dokumentation

Login

Widget-Anpassung

So funktioniert's

Ein Login-Widget ist eine grafische Benutzeroberfläche für die Registrierung und Autorisierung von Benutzern in Ihrer Anwendung. Das Widget kann Felder für die Eingabe von Anmeldedaten, Schaltflächen für die Anmeldung über soziale Netzwerke und erklärende Texte sowie weitere Schaltflächen (z. B. zum Zurücksetzen des Passworts oder zum Anfordern eines Bestätigungscodes) umfassen.

Xsolla bietet Widget-Vorlagen. Deren Erscheinungsbild und Inhalt wird durch die für Ihr Projekt gewählte Anmeldemethode bestimmt. Im Folgenden ist die Standardansicht des Widgets bei der klassischen Anmeldung abgebildet.

Das Login-Produkt ermöglicht es Ihnen, das Widget so anzupassen, dass es einen Wiedererkennungswert hat und zur Benutzeroberfläche Ihrer Anwendung oder Website passt. Zu diesem Zweck können Sie:

  • Ihr Logo hinzufügen
  • das Farbschema ändern
  • ein Bild hochladen und es als Hintergrund für den Bereich rund um das Widget verwenden
  • den Umriss von Schaltflächen und Eingabefeldern ändern
  • die Reihenfolge der Social-Media-Schaltflächen im Widget ändern (die Reihenfolge ist durch das gewählte Land der Lokalisierung bestimmt)
  • die Anzeigesprache des Widgets festlegen

Das Erscheinungsbild und der Inhalt des Widgets lassen sich wie folgt anpassen:

Widget-Anpassung im Kundenportal

Wir empfehlen Ihnen, das Widget im Kundenportal zu bearbeiten, denn so können Sie:

  • die vorgenommenen Änderungen in Echtzeit sehen
  • die Funktionsweise der Widget-Schaltflächen direkt im Editor oder im Vorschaufenster auf der Seite Widget-Anpassung testen

Hinweis
Die über das Kundenportal vorgenommenen Änderungen am Widget werden überall übernommen, wo es zum Einsatz kommt.
Achtung
Das Widget lässt sich erst anpassen, wenn Sie die Xsolla-Produktlizenzvereinbarung unterschrieben haben. Wechseln Sie dafür im Kundenportal zum Abschnitt Vereinbarungen.

So passen Sie das Widget an:

  1. Öffnen Sie Ihr Projekt im Kundenportal, und wechseln Sie zum Abschnitt Login.
  2. Klicken Sie beim gewünschten Login-Projekt auf Konfigurieren.
  3. Scrollen Sie zum Block Anpassung, und klicken Sie auf Widget-Anpassung.

  1. Wählen Sie die Sprache und das Land für die Lokalisierung des Widgets (optional).
  2. Passen Sie den Widget-Stil im Editor an.
  3. Nachdem Sie alle Einstellungen vorgenommen haben, wechseln Sie durch Klick auf Schaltfläche über dem Vorschaubereich des Widgets in den HTML-Modus.
  1. Klicken Sie auf Code kopieren, um den generierten Widget-Initialisierungscode zu kopieren. Mit dem Code können Sie das Widget in Ihre Anwendung oder Website integrieren.

So verwenden Sie den Widget-Editor

  1. Um den Widget-Editor zu öffnen, klicken Sie auf der Seite Widget-Anpassung auf Anpassen.
  2. Nehmen Sie im Editorfenster die erforderlichen Änderungen am Widget-Stil vor:Alle Änderungen werden im Vorschaubereich des Widgets in Echtzeit angezeigt.
Hinweis
Alle Parameteränderungen werden automatisch gespeichert, sodass Sie die Bearbeitung des Widgets jederzeit pausieren und fortsetzen können.
  1. Ändern Sie die Sprache in der Drop-down-Liste über dem Vorschaubereich des Widgets, um zu prüfen, wie das Widget in verschiedenen Sprachen angezeigt wird.
Hinweis
Die Änderung der Sprache im Editor hat keinen Einfluss auf die Sprache, in der das Widget den Benutzern angezeigt wird.
  1. Klicken Sie auf Veröffentlichen, nachdem Sie alle Änderungen im Widget-Editor vorgenommen haben.
Achtung
Sobald das Widget veröffentlicht ist, ändert es sich in allen Anwendungen und auf allen Websites, mit denen es verknüpft ist.
Hinweis
Nach der Veröffentlichung wird auf der Seite Widget-Anpassung mitunter noch die vorherige Version des Widgets angezeigt, die der Browser aus dem Cache geladen hat. In diesem Fall sollten Sie die Seite über die Tastenkombination Control+F5 neu laden.
  1. Öffnen Sie den Widget-Editor.
  2. Klicken Sie in der Seitenleiste des Editors auf Login-Widget.
  3. Aktivieren Sie in dem sich öffnenden Login-Widget-Editor den Umschalter Logo.

  1. Klicken Sie auf die Hochladen-Schaltfläche unterhalb des Umschalters.
  2. Wählen Sie im Dateibrowser die Logo-Bilddatei aus, und klicken Sie auf Öffnen.

    Daraufhin öffnet sich in der Seitenleiste des Editors der Anzeigebereich Medieninhalte. Das hochgeladene Logo wird sowohl in diesem Anzeigebereich als auch im Widget-Vorschaubereich angezeigt.

  1. Wenn Sie ein anderes Logo testen möchten, klicken Sie im Anzeigebereich Medieninhalte auf Hochladen.
  1. Klicken Sie im Anzeigebereich Medieninhalte auf das entsprechende Bild, um ein anderes Logo im Widget anzuzeigen.
  2. Wenn Sie sich für ein Logo entschieden haben, schließen Sie den Anzeigebereich Medieninhalte. Ihre letzte Auswahl wird automatisch gespeichert.

So ändern Sie das Farbschema des Widgets

Das Farbschema des Widgets ist durch drei Grundfarben definiert:
  • Text – für erklärende Texte, den Inhalt der Eingabefelder und die Logos sozialer Netzwerke auf den Schaltflächen unten im Widget.
  • Schaltfläche – für die Schaltflächen Anmelden, Akzeptieren und erstellen, für die Umrisse der hervorgehobenen Felder und Schaltflächen sowie für Links und den Titel der im Widget aktiven Registerkarte.
  • Seitenfarbton – definiert die Hintergrundfarbe des Widgets.
Die Farbe der Seite, auf der das Widget im Vollbildmodus angezeigt wird, ist eine Kombination aus den unter Schaltfläche und Seitenfarbton festgelegten Farben. Diese Farbe wird automatisch eingestellt.
Hinweis
Die Schaltflächen der am häufigsten genutzten sozialen Netzwerke am oberen Rand des Widgets haben immer dieselbe Farbe, unabhängig vom gewählten Farbschema.
So ändern Sie die Grundfarben des Widgets:
  1. Öffnen Sie den Widget-Editor.
  2. Klicken Sie in der Seitenleiste des Editors auf Globales Theme und dann auf die zu ändernde Grundfarbe.
  3. Die neue Farbe lässt sich auf eine der folgenden Arten auswählen:
    • Über die sich öffnende Farbpalette, mit dem Schieberegler unter der Palette lässt sich die Farben ändern.
    • Über die Schaltflächen unter dem Schieberegler lässt sich der Modus (HEX, RGB oder HSL) wechseln und die gewünschte Farbe im gewählten Format eingeben.
    Änderungen am Farbschema werden im Vorschaubereich des Widgets in Echtzeit angezeigt.
  1. Bei Bedarf können Sie andere Grundfarben auf dieselbe Weise ändern.

So platzieren Sie ein Hintergrundbild im Bereich rund um das Widget

  1. Öffnen Sie den Widget-Editor.
  2. Klicken Sie in der Seitenleiste des Editors auf Login-Widget.
  3. Klicken Sie in dem sich öffnenden Login-Widget-Editor im Abschnitt Seitenhintergrund auf das +-Symbol und dann auf die Hochladen-Schaltfläche.

  1. Wählen Sie im Dateibrowser die Hintergrundbilddatei aus, und klicken Sie auf Öffnen.

    Daraufhin öffnet sich in der Seitenleiste des Editors der Anzeigebereich Medieninhalte. Das hochgeladene Bild wird sowohl in diesem Anzeigebereich als auch im Bereich rund um das Widget angezeigt.
  1. Wenn Sie ein anderes Hintergrundbild testen möchten, klicken Sie im Anzeigebereich Medieninhalte auf Hochladen.
  2. Klicken Sie auf das Bild im Anzeigebereich Medieninhalte, um den anderen Hintergrund im Vorschaubereich des Widgets anzuzeigen.
  3. Wenn Sie sich für ein Hintergrundbild entschieden haben, schließen Sie den Anzeigebereich Medieninhalte. Ihre letzte Auswahl wird automatisch gespeichert.

So ändern Sie die Schaltflächenform

Alle Schaltflächen und Eingabefelder des Widgets sind rechteckig oder quadratisch und weisen abgerundete Ecken auf. Der Rundungsgrad variiert von 0 % (rechteckig) bis 100 %.

So ändern Sie den Rundungsgrad:

  1. Öffnen Sie den Widget-Editor.
  2. Mit dem Schieberegler Rundung lässt sich die Form der Widget-Schaltflächen anpassen.

So ändern Sie die Reihenfolge der Social-Media-Schaltflächen

Die Social-Media-Schaltflächen werden erst im Widget angezeigt, wenn die jeweiligen sozialen Netzwerke in den Einstellungen Ihres Login-Projekts verknüpft sind. Die Reihenfolge der Schaltflächen wird durch das Land der Lokalisierung bestimmt. Das Widget zeigt die Schaltflächen der beliebtesten Netzwerke in diesem Land an, sortiert nach Nutzungshäufigkeit von links nach rechts in absteigender Reihenfolge. In der obersten Zeile des Widgets wird jedem Benutzer das letzte soziale Netzwerk angezeigt, über das er sich bei der Anwendung angemeldet hat.

Der Parameter Land ist standardmäßig auf Automatisch erkannt eingestellt. Diese Einstellung lässt sich über die Drop-down-Liste Land auf der Seite Widget-Anpassung ändern.

Hinweis
Wenden Sie sich an Ihren Customer Success Manager oder senden Sie eine E-Mail an csm@xsolla.com, wenn Sie die Reihenfolge, in der die Social-Media-Schaltflächen im Widget angezeigt werden, ändern möchten.

So stellen Sie die Anzeigesprache des Widgets ein

Die Standard-Login-Widgets von Xsolla sind in 20 Sprachen verfügbar. Die Sprache der Benutzeroberfläche ist in den ersten beiden Buchstaben der preferredLocale-Variable kodiert, die dem Widget bei der Initialisierung übermittelt werden kann.

Beispiel: Ist preferredLocale: “en_XX” festgelegt, wird das Widget in englischer Sprache angezeigt.

Ist der Wert der preferredLocale-Variable nicht festgelegt, wird die Sprache automatisch anhand der IP-Adresse oder der Browsersprache festgelegt.

So legen Sie die Sprache fest, in der das Widget den Benutzern angezeigt wird:

  1. Wählen Sie auf der Seite Widget-Anpassung eine Sprache aus der Drop-down-Liste Verfügbare Sprachen aus.

    Im von Xsolla generierten Widget-Initialisierungscode ändert die Variable preferredLocale ihren Wert entsprechend Ihrer Auswahl.

  1. Wechseln Sie in den Modus HTML (mithilfe der Schaltfläche oberhalb des Vorschaubereichs), um den Initialisierungscode anzuzeigen.
  2. Wechseln Sie in den Modus Vorschau, um zu prüfen, wie das Widget in der gewählten Sprache aussieht.
Hinweis
Ebenso können Sie die Anzeigesprache des Widgets anpassen, indem Sie den Wert der Variable preferredLocale direkt im Widget-Initialisierungscode ändern, der in Ihre Anwendung oder Website integriert ist.

Widget-Anpassung mit JSON-Dateien

Wenn Sie das Xsolla Login Widget SDK bereits verknüpft haben, können Sie das Erscheinungsbild und den Inhalt des Widgets ohne Umweg über das Kundenportal ändern. Über einen Texteditor lassen sich Änderungen an den folgenden JSON-Dateien vornehmen:

  • socialsJSON: bestimmt die Reihenfolge der Social-Media-Schaltflächen im Widget;
  • themeJSON: bestimmt das Erscheinungsbild des Widgets:
    • Farbschema des Widgets und des Bereichs rund um das Widget;
    • Rundungsgrad von Ecken bestimmter Elemente: Schaltflächen, Eingabefelder, das Widget selbst;
    • Hintergrundbilder für verschiedene Elemente: Widget-Titel, das Widget selbst, Bereich rund um das Widget;
    • bei Bedarf lassen sich die Autorisierungs- oder Registrierungsregisterkarte des Widgets sowie die Social-Media-Schaltflächen ausblenden.

Die anpassbaren Widget-Einstellungen sind im Abschnitt JSON-Dateien mit Widget-Einstellungen beschrieben.

Hinweis
Die Anzeigesprache des Widgets wird nicht in den JSON-Dateien festgelegt, sondern im Widget-Initialisierungscode mithilfe des Parameters preferredLocale.

Widget durch Upload einer CSS-Datei anpassen

  1. Erstellen Sie eine CSS-Datei, und fügen Sie visuelle Einstellungen für den Login-Block ein.

Codebeispiel für die Schriftartanpassung:

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;
}

Codebeispiel für die Stilanpassung:

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. Öffnen Sie Ihr Projekt im Kundenportal, und wechseln Sie zum Abschnitt Login.
  2. Klicken Sie beim gewünschten Login-Projekt auf Konfigurieren.
  3. Scrollen Sie auf der Navigationsseite zum Block Anpassung, und klicken Sie auf Widget-Anpassung.
  4. Laden Sie die CSS-Datei im Block Weitere Anpassung hoch.

  1. Klicken Sie auf Speichern.

Anpassung des Widget-Texts

Das Login-Widget ist in 20 Sprachen verfügbar: Englisch, Arabisch, Bulgarisch, Chinesisch, Tschechisch, Deutsch, Spanisch, Französisch, Ungarisch, Italienisch, Japanisch, Koreanisch, Polnisch, Portugiesisch, Rumänisch, Russisch, Thai, Türkisch, Taiwanesisch und Vietnamesisch. Sie können die Texte des Login-Widgets selbst anpassen. Nachstehend finden Sie eine Liste der Standardtasten und ‑werte auf Englisch:

Hinweis
Wenden Sie sich an Ihren Kundenbetreuer oder senden Sie eine E-Mail an integration@xsolla.com, wenn Sie sonstige Widget-Texte ändern möchten.
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",
}

So ändern Sie die Texte:

  1. Erstellen Sie eine JSON-Datei mit lokalisierten Texten für das Widget. Verfügbare Gebietsschema: en, ar, bg, cn, cs, de, es, fr, he, it, ja, ko, pl, pt, ro, ru, th, tr, tw, vi. Die Datei sollte die folgende Struktur haben:

Hinweis
Wenn Sie keinen Gebietsschemawert angeben, werden die Standardwerte verwendet.
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. Legen Sie die erstellte JSON-Datei auf Ihrem Server ab.
File-URL-Beispiel:
https://your-domain.com/assets/loginWidgetLocales.json
  1. Übermitteln Sie die File-URL während der Initialisierung des Widgets wie unten gezeigt:
Copy
Full screen
Small screen
const xl = new Widget({
  // any other params
  customLabels: https://your-domain.com/assets/loginWidgetLocales.json’
});

Widget mit Site Builder anpassen

Wenn Sie Xsollas Site Builder nutzen, können Sie das Login-Widget in den Blockeinstellungen im Baukasten anpassen.

So passen Sie das Widget im Site Builder an:

  1. Öffnen Sie Ihr Projekt im Kundenportal.
  2. Klicken Sie in der Seitenleiste auf Site Builder.
  3. Wählen Sie im Abschnitt Seiten die gewünschte Website aus, und klicken Sie auf Site Builder öffnen.
  4. Navigieren Sie zu Login-Einstellungen > Layout.
  5. Laden Sie ein Logo oder einen eigenen Hintergrund hoch. So geht’s:
    1. Klicken Sie auf den Schalter Logo bzw. Benutzerdefinierter Hintergrund.
    2. Klicken Sie auf die Upload-Schaltfläche unter dem Schalter.
    3. Daraufhin öffnet sich ein Fenster, wählen Sie die Bilddatei aus, und klicken Sie auf Öffnen. Daraufhin öffnet sich das Medieninhalte-Fenster in der Seitenleiste des Editors, und das hochgeladene Bild erscheint sowohl in diesem Fenster als auch im Widget im Vorschaubereich.
    4. Wählen Sie die Bildgröße aus (optional):
      1. Klicken Sie auf das hochgeladene Bild.
      2. Öffnen Sie im Abschnitt Bildeinstellungen die Drop-down-Liste Größe, und wählen Sie eine der drei Optionen aus: Eingepasst, Vollbild oder Feststehend.
    5. Ändern Sie den Farbton des Bilds (optional):
      1. Klicken Sie auf das hochgeladene Bild.
      2. Klicken Sie unter Bild > Farbton auf das -Symbol, und entscheiden Sie sich für eine der Optionen oder wählen Sie eine beliebige Farbe aus der Palette.
    6. Um eine andere Version des Logos oder des Hintergrunds im Widget anzuzeigen, klicken Sie auf das entsprechende Bild im Medieninhalte-Fenster.
  6. Im Abschnitt Xsolla Login können Sie einrichten, dass Farben für den Login-Block automatisch ausgewählt werden. Klicken Sie dazu auf den Schalter Website-Stil verwenden.

Hinweis
Nachdem das Widget im Kundenportal konfiguriert wurde, dauert es 7 bis 10 Minuten, ehe das Widget aktualisiert bzw. der Cache geleert ist.

Widget mit CSS-Code im Site Builder anpassen

Hinweis
Um diese Methode zu verwenden, benötigen Sie einen Host, auf dem Sie die CSS-Datei zur späteren Verwendung öffentlich hosten können.

  1. Erstellen Sie eine CSS-Datei, und fügen Sie visuelle Einstellungen für den Login-Block ein.

Beispiel:

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. Laden Sie eine Datei mit CSS-Code und öffentlichem Zugriff auf Ihrem Hosting-Service hoch, und kopieren Sie den Datei-Link.
  2. Klicken Sie im Site Builder auf Block hinzufügen > Benutzerdefinierter Code.
  3. Fügen Sie den folgenden Code ein:
Copy
Full screen
Small screen
<script>
    window.SB.subscribe((api) => {
        api.login.setConfigMiddleware((config) => ({
            ...config,
            customStyle: "https://your-domain.com/assets/loginWidgetStyles.css"
        }));
    });
</script>

wobei https://your-domain.com/assets/loginWidgetStyles.css der Link zur CSS-Datei mit Ihren Stilen ist.

War dieser Artikel hilfreich?
Vielen Dank!
Gibt es etwas, das wir verbessern können? Nachricht
Das tut uns leid
Bitte erläutern Sie, weshalb dieser Artikel nicht hilfreich ist. Nachricht
Vielen Dank für Ihr Feedback!
Wir werden Ihr Feedback aufgreifen und dazu nutzen, Ihr Erlebnis verbessern.
Diese Seite bewerten
Diese Seite bewerten
Gibt es etwas, das wir verbessern können?

Jetzt nicht

Vielen Dank für Ihr Feedback!
Letztmalig aktualisiert: 20. Februar 2024

Haben Sie einen Tippfehler oder einen anderen Textfehler gefunden? Wählen Sie den Text aus und drücken Sie Strg+Eingabe.

Problem melden
Wir überprüfen unsere Inhalte ständig. Ihr Feedback hilft uns, sie zu verbessern.
Geben Sie eine E-Mail-Adresse an, damit wir Sie erreichen können
Vielen Dank für Ihr Feedback!