Wie man den Widget Editor benutzt

Das Widget Editor ist die zentrale Anlaufstelle für all deine React-Widgets. Es wurde für Profis und Einsteiger gleichermaßen entwickelt, sodass du keine Vorkenntnisse in CSS benötigst.

Du findest es unter Shop konfigurieren > Integration Website > Widget Editor.

Übersicht

Sobald du den Widget Editor öffnest, siehst du zwei Hauptbereiche.

• Deine Widgets – Erstellen und Konfigurieren deiner Widgets.
• Design-Einstellungen – Ändern des Erscheinungsbilds deiner Widgets.

1. Deine Widgets erstellen und anpassen

Unter Deine Widgets kannst du alle Widgets, die du im Widget Editor erstellt hast, konfigurieren und verwalten. Sie sind nach Widget-Typ sortiert.

1.1. Widget-Typ

Du kannst zwischen vier Widget-Typen wählen:

• Katalog-Widget: Übersicht über mehrere Produkte.
• Produkt-Widget: Detailseite eines deiner ausgewählten Produkte.
• Buchungs-Widget: Buchungsmodul mit Kalender.
• Button-Widget: Button mit Kalender. Weitere Details findest du im folgenden Artikel: Wie funktioniert die Integration mit dem Button-Widget?

1.2. Widget-Einstellungen

Die Einstellungen hängen vom ausgewählten Widget-Typ ab:

1.2.1. Katalog-Widget

• Für das Katalog-Widget kannst du die Produktsprache, den Kategorie Filter und den Standortfilter auswählen sowie eine Sub-ID erstellen.
  
  
   
• Bei den Kategorien handelt es sich um diejenigen, die du selbst erstellt und angeordnet hast. Wenn du mehr darüber erfahren möchtest, wie du deine Kategorien organisierst, lies diesen Artikel: Wie erstelle ich eine Kategorie?
• Zusätzlich oder eigenständig kannst du den Standortfilter verwenden. Der Standort wird anhand der Stadt bestimmt, die du eingibst. Um die Anzahl der im Katalog-Widget angezeigten Produkte zu erhöhen oder zu verringern, kannst du einen Radius eingeben, innerhalb dessen sich das Produkt befinden muss, um angezeigt zu werden.
• Hier kannst du auch eine Sub-ID erstellen: Füge die Sub-ID unter Einstellungen > Sub ID hinzu: Kleinbuchstaben und Zahlen.
  Hinweis: Du kannst die Sub-ID in deinem Code nicht sehen, da sie ausgeblendet ist.

1.2.2. Produkt-/Buchungs-Widget

• Für das Produkt-Widget und das Buchungs-Widget kannst du die Produktsprache und das Produkt auswählen sowie eine Sub-ID erstellen
  
  
   

1.2.3. Button-Widget

• Für das Button-Widget kannst du die Sprache auswählen, den Button mit einem der Widget-Typen verknüpfen, das Produkt auswählen, eine Sub-ID erstellen, einen Button-Text hinzufügen und festlegen, ob du einen schwebenden Button bevorzugst.
  
  
   

1.3. Design auswählen

In diesem Schritt kannst du das Theme auswählen, in dem das Widget dargestellt werden soll. Um einzelne Farben zu ändern, sieh dir den Abschnitt Design-Einstellungen weiter unten an.

Tipp:
Die Theme-Auswahl kann besonders praktisch sein, wenn du dein Design regelmäßig aktualisierst.
Angenommen, du änderst das Erscheinungsbild deiner Website je nach Saison. Dann kannst du das Widget ganz einfach an das neue Design anpassen, ohne im Backend etwas ändern zu müssen.

1.4. Sichtbare Inhalte festlegen

Auch hier hängt es vom vorausgewählten Widget-Typ ab.

Du kannst die Produktbox anpassen, festlegen, nach welchen Attributen der Kunde filtern kann, und außerdem entscheiden, wie detailliert die Produktseite sein soll.

• Katalog-Widget: Produkt-Box, Filterbereich, Produktdetails, Details zur Buchung, Katalog Liste
  
  
   
• Produkt-Widget: Produkt-Box, Produktdetails, Details zur Buchung
  
  
   
• Buchungs-Widget und Button-Widget: Details zur Buchung
  
  
   

1.5. Speichern und veröffentlichen

Im letzten Schritt gibst du deinem Widget einen Namen und eine Beschreibung. Beides wird in der Übersicht angezeigt.
Sobald du auf Speichern klickst, wird ein HTML-Code generiert. Diesen Code kannst du in deine Website einbetten.

Tipp:
Du musst den Code nur ein einziges Mal in deine Website integrieren! Jede Änderung, die du im Widget Editor vornimmst, wirkt sich auch auf das Widget auf deiner Website aus.

2. Design erstellen

Unter Design-Einstellungen kannst du Themes erstellen und so das Erscheinungsbild deiner Widgets ändern. Themes bestehen aus Farben und Schriftarten.

2.1. Farben

Was die Farben betrifft, hast du derzeit Zugriff auf die Akzentfarbe, die sich auf die primären Buttons auswirkt (Hier buchen und In den Warenkorb).

2.2. Schriftart

Du kannst zwischen 8 verschiedenen Schriftarten und 5 Schriftgrößen wählen.


 

2.4. Speichern & veröffentlichen

Nachdem du die Bearbeitung deines globalen Designs abgeschlossen hast, gibst du ihm einen Namen und eine Beschreibung. Wenn du speicherst, werden alle Widgets mit diesem Design automatisch aktualisiert.