Buchungs-Widgets
Buchungs-Widgets im Widget Creator Ihres Workspaces erstellen und einbetten — Konfiguration, Vorschau und Fehlerbehebung.
Buchungs-Widgets ermöglichen Kunden, Services auf Ihrer Website zu buchen, ohne das vollständige Kundenportal zu besuchen.
Jeder ServEase-Workspace hat seinen eigenen Widget Creator:
{workspace-id}.widgets.servease.io
Ersetzen Sie {workspace-id} durch Ihre Tenant-Kennung. Melden Sie sich mit Ihren Admin-Zugangsdaten an und erstellen Sie so viele Widgets wie nötig — jedes mit eigenem Einbettungscode.
Settings → Customer portal widget im Admin-Panel spiegelt dieselbe Konfiguration für Vorschau und Speichern. Für den täglichen Website-Einsatz nutzen die meisten Teams den eigenständigen Widget Creator unter {workspace-id}.widgets.servease.io. Siehe Kundenportal-Widget.
Widget-Typen
Beim Erstellen oder Bearbeiten eines Widgets wählen Sie unter dem Bereich Widget einen Typ:
| Typ | Am besten für |
|---|---|
| Calendar | Monats-, Wochen- oder Zwei-Wochen-Raster — Verfügbarkeit über die Zeit |
| Timetable | Tages-Spalten — Slot-für-Slot-Ansicht |
| List | Scrollbare Liste oder Raster buchbarer Services oder Slots |
| Map | Standortbasierte Ansicht — nützlich bei Entfernung und Geografie |
Jeder Typ hat eigene Optionen (Standardansicht, Zeitformat, Layout, Karten-Einstellungen usw.), die unten beschrieben sind.
Fünf Konfigurationsbereiche
Die Seitenleiste des Widget Creators hat fünf Hauptbereiche. Änderungen gelten für das bearbeitete Widget; erstellen Sie mehrere Widgets für verschiedene Seiten oder Zielgruppen.
Settings
- Language — Standard-Gebietsschema für Besucher (z. B. Englisch, Polnisch, Deutsch).
- API base URL — für Ihre Tenant-Umgebung aufgelöst (schreibgeschützt).
- Preview data source — Live data (echte Services und Slots) oder Demo data, wenn Ihr Katalog noch leer ist oder Sie eine sichere Vorschau ohne genügend veröffentlichte Services wünschen.
Widget
Kernverhalten und Buchungsablauf:
- Widget type — Calendar, Timetable, List oder Map (siehe oben).
- Enable service overview pages — Kunden können vor der Buchung eine gestaltete Service-Übersicht öffnen (siehe Service-Übersichtsseiten).
- Overview template — bei aktivierter Übersicht ein Layout wählen (Professional, Luxury, Simple, Friendly, Minimal, Bold, Nature, Retro usw.).
Typspezifische Optionen (wenn relevant):
| Typ | Beispiele |
|---|---|
| Calendar | Standardansicht (Woche / Zwei Wochen / Monat), Darstellung Services vs. Zeitslots, Woche beginnt Montag oder Sonntag, Zeitformat (12h / 24h), Slot columns (Startzeit, Name, Option, Team, Mitarbeiter, Preis, Standort — Text oder Icons) |
| Timetable | Zeitformat, verfügbare Slots hervorheben |
| List | Layout: Raster oder Liste |
| Map | Optionaler Google-Maps-API-Key, Entfernungseinheit (km / mi) |
Filters
Vordefinieren, was das Widget anzeigt, damit Besucher einen fokussierten Katalog statt alles auf einmal sehen:
- Services, Teams, Suchbegriff
- Start / end date (mit Voreinstellungen wie heute, nächste Woche, nächster Monat)
- Min / max price, distance (bei Map-Widgets)
Nutzen Sie Filter bei Einbettung auf Kampagnen-Landingpages („Nur Yoga buchen“) oder standortspezifischen Sites.
Display
UI-Elemente um die Buchungserfahrung ein- oder ausblenden:
| Umschalter | Wirkung |
|---|---|
| Filters bar | Vordefinierte Filtersteuerungen für Besucher sichtbar |
| Search / date / price / distance | Einzelne Filter (wenn die Filterleiste aktiv ist) |
| Calendar view switcher | Nur Calendar — Wochen-/Monatssteuerung |
| List layout switcher | Nur List — Raster- vs. Listen-Umschalter |
| Widget top bar | Kopfzeile im Widget-Rahmen |
| Outer frame | Rahmen um das Widget |
Theme
Visuelles Design unabhängig vom Frontend theme key des Kundenportals:
- Colour presets — eingebaute Paletten (Standard hell, dunkel, ocean, forest und andere).
- Custom colours — Primary, Secondary, Oberflächen, Rahmen und zugehörige Tokens.
- Typography — Schriftfamilie und Größe (small / medium / large).
- Layout — Eckenradius, Abstandsdichte, Außenabstand.
Vorschau vor der Einbettung
Nutzen Sie auf größeren Bildschirmen das Preview panel, um das Widget vor der Veröffentlichung zu prüfen:
- Desktop — volle Breite
- Tablet — eingeschränkte Tablet-Breite
- Mobile — Telefonbreite
Aktualisieren oder in neuem Tab öffnen, um gegen Live- oder Demo-Daten zu testen. Filter, Slot-Spalten und Theme auf kleinen Bildschirmen prüfen — der Großteil des Embed-Traffics ist mobil.
Auf Ihrer Website einbetten
Wenn die Konfiguration fertig ist, klicken Sie auf den grünen Embed-Button.
Der Dialog Copy into your site liefert:
- Ein iframe-Snippet (
data-servease-widget="true") mit Ihrer Widget-URL. - Das Skript
embed-loader.js— passt die iframe-Größe an und behandelt das Modal-Viewport auf der Host-Seite.
Fügen Sie beides — iframe und Loader-Skript — dort ein, wo das Widget erscheinen soll. Mit Copy embed code kopieren Sie den vollständigen Snippet.
Ein Troubleshooting-Link öffnet häufige Lösungen (unten zusammengefasst).
Fehlerbehebung bei Einbettungen
Schnellchecks
- Prüfen, dass das iframe
data-servease-widget="true"hat. - Prüfen, dass
embed-loader.jsgeladen wird (im Browser unter Network sichtbar). - Prüfen, dass
window.ServeaseEmbedLoaderin der Browser-Konsole existiert. - Nach Host-seitigen Fixes den neuesten Snippet aus dem Widget Creator einfügen.
Wichtigste Regel
Verlassen Sie sich nicht auf Script-Tags innerhalb von dangerouslySetInnerHTML. Behandeln Sie das Widget-iframe als echte Komponente in React, Next.js oder Ihrem CMS — nicht als reines HTML allein.
Häufige Probleme
| Problem | Was versuchen |
|---|---|
| Widget abgeschnitten | Unten fehlt beim ersten Laden oder mobil — neuesten Loader-Snippet nutzen; prüfen, dass embed-loader.js läuft; in React/Next echtes <iframe /> rendern, kein injiziertes HTML |
| Aktualisieren behebt es | Beim ersten Besuch falsch, nach Reload korrekt — Loader bei Client-Navigation übersprungen; embed-loader.js programmatisch beim Mount laden |
| Loader läuft nicht | Skript fehlt oder ServeaseEmbedLoader undefined — frischen Snippet einsetzen; Host-Seite darf Script-Tags nicht entfernen |
| Modal unter Seiten-Chrome | Buchungs-Modal unter fixierter Kopfzeile — aktuellen Loader für Viewport-Nachrichten behalten; vertikalen Abstand um das iframe |
| React / Next / CMS | Inkonsistent in HTML-Blöcken — iframe-src extrahieren, <iframe /> in JSX rendern, Loader via document.createElement('script') laden, ServeaseEmbedLoader.refresh() beim Mount aufrufen |
Widgets benötigen veröffentlichte Services mit gültigen Zeitplänen. Ein leeres Widget bedeutet meist keine buchbaren Slots, Filter, die alles ausschließen, oder Demo-Modus, während Services noch Entwürfe sind.
Service-Übersichtsseiten
Service-Übersichtsseiten sind optionale Einzel-Service-Landingpages auf Ihrem Widgets-Host — nützlich für Marketing-Details, Social Posts und „Diese Behandlung buchen“-Links.
Aktivieren Sie sie im Widget Creator unter Widget (Enable service overview + Standard-Template). Kunden können Overview im Buchungs-Modal öffnen, oder Sie erzeugen Links unter Service detail → Generate page.
Jede live Übersichtsseite enthält Link share — Besucher kopieren einen Kurzlink (https://{workspace-id}.api.servease.io/o/{code}), der zur vollständigen Seite auf {workspace-id}.widgets.servease.io weiterleitet.
Siehe Service-Übersichtsseiten für Templates, Generate page, Link share und Kurzlink-Struktur.