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

Note
Die über das Kundenportal vorgenommenen Änderungen am Widget werden überall übernommen, wo es zum Einsatz kommt.
Notice
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 auf der Navigationsseite 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.

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

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

Notice
Sobald das Widget veröffentlicht ist, ändert es sich in allen Anwendungen und auf allen Websites, mit denen es verknüpft ist.
Note
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.

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

Note
Wenden Sie sich an Ihren Account Manager, 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.

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

Note
Die Anzeigesprache des Widgets wird nicht in den JSON-Dateien festgelegt, sondern im Widget-Initialisierungscode mithilfe des Parameters preferredLocale.
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: 22. April 2022

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!