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:

• mit dem Grafikeditor im Kundenportal
• durch Änderung der Einstellungen in den entsprechenden JSON-Dateien der Xsolla Login Widget SDK-Bibliothek

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

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.

4. Wählen Sie die Sprache und das Land für die Lokalisierung des Widgets (optional).
5. Passen Sie den Widget-Stil im Editor an.
6. Nachdem Sie alle Einstellungen vorgenommen haben, wechseln Sie durch Klick auf Schaltfläche über dem Vorschaubereich des Widgets in den HTML-Modus.

7. 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:
   • Logo hinzufügen
   • Widget-Farbschema anpassen
   • Bild hochladen und als Hintergrund für den Bereich rund um das Widget verwenden
   • Umriss von Schaltflächen und Eingabefeldern festlegen
   Alle Änderungen werden im Vorschaubereich des Widgets in Echtzeit angezeigt.

3. Ä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.

4. Klicken Sie auf Veröffentlichen, nachdem Sie alle Änderungen im Widget-Editor vorgenommen haben.

So fügen Sie ein Logo hinzu

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.

4. Klicken Sie auf die Hochladen-Schaltfläche unterhalb des Umschalters.
5. 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.

6. Wenn Sie ein anderes Logo testen möchten, klicken Sie im Anzeigebereich Medieninhalte auf Hochladen.

7. Klicken Sie im Anzeigebereich Medieninhalte auf das entsprechende Bild, um ein anderes Logo im Widget anzuzeigen.
8. 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.

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.

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

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

5. Wenn Sie ein anderes Hintergrundbild testen möchten, klicken Sie im Anzeigebereich Medieninhalte auf Hochladen.
6. Klicken Sie auf das Bild im Anzeigebereich Medieninhalte, um den anderen Hintergrund im Vorschaubereich des Widgets anzuzeigen.
7. 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.

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.

2. Wechseln Sie in den Modus HTML (mithilfe der Schaltfläche oberhalb des Vorschaubereichs), um den Initialisierungscode anzuzeigen.
3. Wechseln Sie in den Modus Vorschau, um zu prüfen, wie das Widget in der gewählten Sprache aussieht.

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.

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:

@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:

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

form {
  position: relative;
}

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

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

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

6. Klicken Sie auf Speichern.

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.

Widget mit CSS-Code im Site Builder anpassen

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

Beispiel:

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

form {
  position: relative;
}

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

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

2. Laden Sie eine Datei mit CSS-Code und öffentlichem Zugriff auf Ihrem Hosting-Service hoch, und kopieren Sie den Datei-Link.
3. Klicken Sie im Site Builder auf Block hinzufügen > Benutzerdefinierter Code.
4. Fügen Sie den folgenden Code ein:

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

Diese Seite bewerten

Gibt es etwas, das wir verbessern können? Senden

Jetzt nicht

Vielen Dank für Ihr Feedback!