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 auf der Navigationsseite 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.

Diese Seite bewerten

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

Jetzt nicht

Vielen Dank für Ihr Feedback!