Widgets: Angebote auf der eigenen Website einbinden

Mit den Widgets zeigen Sie Ihre Angebote direkt auf Ihrer eigenen Website. Ihre Kunden sehen dort die Angebotsliste, ein einzelnes Kursangebot oder den Kalender einer Terminbuchung und können buchen, ohne Ihre Seite zu verlassen. Für jedes Widget erzeugt HEXLE Bookings einen Code-Schnipsel (Snippet), den Sie einmal in Ihre Website kopieren. Die Inhalte (Termine, freie Plätze, Preise) kommen danach immer aktuell aus HEXLE Bookings.

Als Beispiel dient wieder das „Studio Sonnenschein“ mit dem Kurs „Yoga für Einsteiger“ und dem Terminangebot „Erstgespräch Yoga“.

Überblick: Welche Widgets gibt es?

Sie finden die Widgets unter Allgemein › Widgets. Der Menüpunkt erscheint in der Business-Ansicht, wenn Sie alle Angebote sehen dürfen. Jedes Widget hat rechts einen eigenen Reiter.

Reiter	Was das Widget zeigt	Bezieht sich auf
Angebotsliste	Alle öffentlich sichtbaren Angebote mit Filtern, wie auf Ihrer eigenständigen Buchungsseite. Von der Liste aus öffnen Besucher die einzelnen Angebote und buchen.	alle Angebote, optional eine Kategorie
Kursangebot	Ein einzelnes Angebot mit Beschreibung, Terminen und Anmeldung	ein Angebot mit Kursbuchung
Terminbuchung	Kalender mit freien Terminen und Buchung für ein Angebot	ein Angebot mit Terminbuchung
Auslastung	Freie Plätze eines Angebots als Balken, optional mit dem Link Jetzt buchen	ein Angebot
Beschreibung (PDF)	Einen Button, der die Kursbeschreibung mit Terminen und QR-Code als PDF erzeugt	ein Angebot
Terminkalender	Monatskalender mit den Kursterminen eines Angebots. Auf dem Smartphone erscheint stattdessen eine Terminliste.	ein Angebot
FAQ	Häufige Fragen: die Fragen für alle Angebote und die Fragen zu diesem Angebot	ein Angebot
Serviceangebote	Buchung von Serviceangeboten: Leistung, Mitarbeiter und Termin wählen	alle Serviceangebote; nur mit Lizenz für Serviceangebote

Jeder Reiter ist gleich aufgebaut: Links legen Sie in mehreren Unterreitern fest, was das Widget zeigt und wie es aussieht, und holen sich den Code. Rechts sehen Sie eine Vorschau auf einer nachgestellten Website. Mit Dunkle Website simulieren bzw. Helle Website simulieren prüfen Sie, wie das Widget auf einer dunklen oder hellen Seite wirkt.

Vorschau mit fester Höhe

Die Vorschau zeigt das Widget in einer festen Höhe. Auf Ihrer Website wächst und schrumpft das Widget automatisch mit seinem Inhalt, Sie müssen keine Höhe einstellen.

Ihre Einstellungen in den Reitern Inhalt, Darstellung usw. speichert HEXLE Bookings nicht. Sie stecken ausschließlich im Code-Schnipsel. Wenn Sie später etwas ändern möchten, stellen Sie es neu ein und ersetzen den Schnipsel auf Ihrer Website.

Welche Angebote erscheinen?

• Nur aktive Angebote. In der Angebotsliste erscheinen nur Angebote im Status „Aktiv“. Ein Angebot vor Ort braucht außerdem einen Ort.
• Nur gelistete Angebote. Ist am Angebot „Im Kursangebot auflisten“ ausgeschaltet, erscheint es nicht in der Angebotsliste.
• Nur lizenzierte Angebotsarten. Angebote einer Angebotsart, für die Ihr Unternehmen keine Lizenz hat, blendet die Liste aus.
• Termine: Hat ein Kurs Termine, erscheint er nur, solange noch mindestens ein künftiger, nicht abgesagter Termin offen ist. Ein Kurs ohne jeden Termin erscheint trotzdem und nimmt Anmeldungen an.
• Serviceangebote erscheinen nicht in den Widgets Angebotsliste bis FAQ. Für sie gibt es den eigenen Reiter Serviceangebote.

Inaktive Angebote in der Auswahl

Bei der Auswahl Angebot stehen auch inaktive Angebote zur Wahl. Wählen Sie eines davon, zeigt das Widget nur eine Fehlermeldung, beim Kursangebot z. B. „Fehler beim Ladevorgang – Kurs nicht verfügbar. Dieser Kurs existiert nicht (mehr) oder ist nicht mehr buchbar.“ Dasselbe sehen Ihre Besucher, wenn Sie ein eingebundenes Angebot später deaktivieren oder löschen. Aktivieren Sie das Angebot also, bevor Sie den Schnipsel einbauen.

Angebote mit Zugangscode

Ist ein Angebot mit einem Zugangscode (Passwort) geschützt, verhalten sich die Widgets so:

Widget	Verhalten bei geschütztem Angebot
Angebotsliste	Das Angebot erscheint in der Liste, aber ohne Termine und ohne Anmeldestatus.
Kursangebot, Terminbuchung	Besucher sehen zuerst die Seite „Geschützte Seite“ und geben den Zugangscode ein. Nach Weiter zur Buchung geht es mit der Buchung weiter. Der Code gilt im selben Browser-Tab, bis er abläuft.
Auslastung, Beschreibung (PDF), Terminkalender, FAQ	Das Widget zeigt nur „Dieses Angebot ist geschützt und kann nicht als Widget angezeigt werden.“

Siehe auch: Kursangebot anlegen und verwalten.

Widget einrichten

1. Öffnen Sie Allgemein › Widgets und wählen Sie rechts den Reiter des gewünschten Widgets, z. B. Kursangebot.
2. Wählen Sie im Unterreiter Inhalt unter Angebot das Angebot. Ein Klick öffnet eine Tabelle mit allen passenden Angeboten, Kategorie und Ort. Über das Suchfeld finden Sie ein Angebot schnell. Beim Kursangebot stehen nur Angebote mit aktivierter Kursbuchung zur Wahl, bei der Terminbuchung nur Angebote mit aktivierter Terminbuchung. Das gewählte Angebot übernimmt HEXLE Bookings in die anderen Reiter, soweit es dort passt. Die Angebotsliste braucht kein Angebot.
3. Legen Sie im Unterreiter Inhalt (bei der Angebotsliste: Angebotsliste) fest, welche Teile das Widget zeigt. Die Vorschau rechts aktualisiert sich sofort.
4. Passen Sie im Unterreiter Darstellung Farbschema, Hintergrund, Rahmen und Breite an Ihre Website an (siehe Darstellung).
5. Wechseln Sie in den Unterreiter Code und klicken Sie auf Snippet kopieren. Es erscheint „Snippet kopiert.“, und der Schnipsel liegt in Ihrer Zwischenablage.
6. Optional: Mit Vorschau öffnen sehen Sie das Widget mit Ihren Einstellungen in einem neuen Browser-Tab.
7. Fügen Sie den Schnipsel in Ihre Website ein (siehe Snippet in die Website einfügen).

Solange beim Widget noch kein Angebot gewählt ist, zeigt der Unterreiter Code nur „Bitte zuerst im Tab „Inhalt“ ein Angebot wählen.“

Einstellungen je Widget

Angebotsliste

Im Unterreiter Angebotsliste:

Einstellung	Wirkung
Auf Kategorie einschränken	Zeigt nur Angebote dieser Kategorie. Besucher können den Filter weiterhin ändern. Leer = alle Kategorien.
Text oben	Überschrift „Unser Kursangebot“ und Einleitung über der Liste anzeigen oder ausblenden
Filterleiste	Kategorie-, Orts- und Tagesfilter samt Suche anzeigen oder ausblenden
Kategorie-Beschriftungen	Überschriften der Kategorie-Blöcke in der Liste anzeigen oder ausblenden
Kurskarten	Mit Foto oder Kompakt (Karten ohne Foto)

Aus der Angebotsliste heraus öffnen Besucher die einzelnen Angebote. Wie diese Seiten aussehen, legen Sie in den Unterreitern Kursangebot, Terminbuchung und Buchungsbestätigung fest. Es gelten dieselben Einstellungen wie bei den gleichnamigen Widgets unten.

Unterschied zur eigenständigen Buchungsseite

Im Widget fehlt der Seitenkopf Ihrer eigenständigen Buchungsseite (Titelbild, Überschrift, Farbe), ebenso die eigenen Texte über und unter der Liste. Diese Teile übernimmt Ihre Website. Im Widget erscheinen nur die Liste und, wenn eingeschaltet, „Text oben“ und die Filterleiste.

Siehe auch: Konfiguration.

Kursangebot und Terminbuchung

Die beiden Buchungs-Widgets haben dieselben Schalter. Die Hinweise in der App beschreiben jeweils, was sich ändert.

Einstellung	Kursangebot	Terminbuchung
Kopfbereich	Titelbereich oberhalb der Buchung	Titelbereich oberhalb der Terminwahl
Hintergrund für Kopfbereich	Farbverlauf und Kursbild hinter dem Titel; ausgeblendet = schlichter Text	wie Kursangebot
Zurück zur Übersicht	Link „Zurück zur Kursübersicht“ oberhalb des Titels	wie Kursangebot
Angebotstyp	kleines Label „Kursbuchung“ über dem Titel	kleines Label „Terminbuchung“ über dem Titel
Nur Angebotstitel	Nur Titel blendet Ort, Preis, Termine und Verfügbarkeit im Kopfbereich aus	Nur Titel blendet Ort, Art und Terminanzahl aus
Kursdetails	Schritt mit Beschreibung vor der Buchung oder Direkte Buchung	Beschreibung neben dem Kalender oder nur der Kalender
Termine	Terminliste im Schritt Kursdetails	–
Kursvereinbarung	Vorschau der Kursvereinbarung im Schritt Kursdetails	Vorschau unter dem Kalender
Download-Icon	Icon oben, das die Kursbeschreibung als PDF herunterlädt (Standard: ausgeblendet)	wie Kursangebot

Im Unterreiter Buchungsbestätigung legen Sie fest, wie die Seite nach abgeschlossener Buchung aussieht:

Einstellung	Wirkung
Hintergrund für Kopfbereich	Ausgeblendet steht nur „Buchung erfolgreich!“ über der Buchungsnummer.
Zurück zur Buchungsseite	Button unter den Buchungsdetails anzeigen oder ausblenden

Online-Zahlung verlässt das Widget

Meldet sich ein Kunde im Kursangebot mit Online-Zahlung an, öffnet sich die Bezahlseite Ihres Zahlungsanbieters im ganzen Browserfenster, nicht im Widget. Die Bezahlseite darf nicht innerhalb Ihrer Website laufen.

Auslastung

Zeigt die freien Plätze des gewählten Angebots als Balken, z. B. „9 von 12 Plätzen frei“. Hat das Angebot keine Teilnehmergrenze, steht dort „Keine Teilnehmerbegrenzung.“

Einstellung	Wirkung
Angebotstitel	Titel des Angebots über dem Inhalt
Jetzt buchen	Link zur Buchungsseite. Er öffnet die eigenständige Buchungsseite in einem neuen Tab.

Unter Darstellung gibt es bei diesem Widget nur das Farbschema.

Beschreibung (PDF)

Ein einzelner Button Kursbeschreibung als PDF. Ein Klick erzeugt die Kursbeschreibung mit Terminen und QR-Code als PDF. Außer dem Angebot gibt es hier nichts einzustellen, auch keine Darstellungsoptionen.

Terminkalender

Zeigt die Kurstermine des Angebots in einem Kalender mit den Ansichten Monat, Woche und Tag. Auf schmalen Bildschirmen erscheint stattdessen eine Terminliste. Hat das Angebot keine Termine, steht dort „Für dieses Angebot sind keine Termine hinterlegt.“ Einstellbar ist der Angebotstitel.

FAQ

Zeigt Ihre häufigen Fragen: die Fragen, die für alle Angebote gelten, und die Fragen zu diesem Angebot. Besucher klappen die Antwort per Klick auf. Gibt es keine Fragen, steht dort „Für dieses Angebot sind keine Fragen hinterlegt.“ Einstellbar ist der Angebotstitel.

Siehe auch: Konfiguration.

Darstellung

Im Unterreiter Darstellung gleichen Sie das Widget an Ihre Website an. Welche Optionen es gibt, hängt vom Widget ab.

Option	Werte	Wirkung	Gibt es bei
Farbschema	Automatisch (Standard), Hell, Dunkel	„Automatisch“ übernimmt Hell oder Dunkel von Ihrer Website. Erkennt das Widget es dort nicht, gilt die Einstellung im Browser bzw. Betriebssystem des Besuchers.	allen außer Beschreibung (PDF)
Hintergrund	Transparent (Standard), Eigene Fläche	„Transparent“ lässt Ihre Seitenfarbe durchscheinen.	Angebotsliste, Kursangebot, Terminbuchung, Terminkalender, FAQ
Rahmen	Ohne (Standard), Karte	„Karte“ setzt das Widget als abgerundete Karte mit Schatten ab.	wie Hintergrund
Breite	Lesebreite (Standard), Voll	„Voll“ nutzt die gesamte Breite des Bereichs, in den Sie das Widget setzen.	wie Hintergrund
Hell/Dunkel-Schalter	Anzeigen (Standard), Ausblenden	Lässt Besucher das Farbschema des Widgets selbst umstellen. Die Wahl gilt nur für den aktuellen Besuch.	Angebotsliste, Kursangebot, Terminbuchung

Die großen Widgets (Angebotsliste, Kursangebot, Terminbuchung) haben oben rechts eine kleine Leiste mit dem HEXLE-Bookings-Logo, dem Hell/Dunkel-Schalter (wenn eingeschaltet), dem Download-Icon (wenn eingeschaltet) und einem Icon In neuem Tab öffnen. Unten steht „Buchung realisiert über HEXLE Bookings“. Die kleinen Widgets (Auslastung, Beschreibung, Terminkalender, FAQ) kommen ohne Leiste und Fußzeile aus.

Snippet in die Website einfügen

Der Schnipsel besteht aus einem Platzhalter für das Widget, einer Ladeanimation mit ihren Stilangaben und einer Zeile, die das HEXLE-Bookings-Skript lädt. Er funktioniert auf jeder Website, in die Sie eigenen HTML-Code einfügen können.

1. Kopieren Sie den Schnipsel in HEXLE Bookings mit Snippet kopieren.
2. Öffnen Sie in Ihrem Website-System (z. B. WordPress) die Seite, auf der das Widget erscheinen soll, im Bearbeitungsmodus.
3. Fügen Sie an der gewünschten Stelle ein Element ein, das eigenen HTML-Code unverändert übernimmt. Wie dieses Element heißt, hängt von Ihrem Website-System ab.
4. Fügen Sie den Schnipsel vollständig ein, also inklusive der Zeile mit <script … embed.js …> am Ende.
5. Speichern bzw. veröffentlichen Sie die Seite und öffnen Sie sie im Browser. Nach einer kurzen Ladeanimation erscheint das Widget und passt seine Höhe an den Inhalt an.

Das Widget fügt sich in den Textfluss Ihrer Seite ein. Ihr eigener Text darunter rückt automatisch nach, wenn das Widget wächst, z. B. beim Aufklappen der Termine.

Wenn nur die Ladeanimation erscheint

Das Widget lädt erst durch die <script>-Zeile. Entfernt Ihr Website-System diese Zeile beim Speichern, bleibt nur die Ladeanimation stehen. Prüfen Sie dann, ob das gewählte Element Skripte zulässt.

Tipp

Ändern Sie später Einstellungen im Widget-Konfigurator, kopieren Sie den neuen Schnipsel und ersetzen Sie den alten auf Ihrer Website. Inhalte wie Termine, Preise oder freie Plätze aktualisieren sich dagegen von selbst.

Serviceangebote einbetten

Den Reiter Serviceangebote sehen Sie nur, wenn Ihr Unternehmen eine Lizenz für Serviceangebote hat und Sie die Einbettung einsehen dürfen. Ihre Kunden wählen im Widget Leistung, Mitarbeiter und Termin und buchen direkt auf Ihrer Website.

Anders als bei den übrigen Widgets speichert HEXLE Bookings diese Einstellungen zentral. Eine Änderung wirkt sofort auf allen Websites, auf denen das Widget eingebaut ist, ohne dass Sie den Schnipsel austauschen.

Branding & Domains

Klicken Sie im Unterreiter Einstellungen im Bereich Branding & Domains auf Bearbeiten. Dafür brauchen Sie das Recht, die Einbettung zu bearbeiten.

Gruppe	Feld	Wirkung
Einbettung	Einbettung aktiv	Schaltet das Widget auf fremden Websites ein. Standard: aus. Solange es aus ist, zeigt das eingebettete Widget nur „Online-Buchung nicht verfügbar – Die Online-Buchung ist hier derzeit nicht verfügbar.“
Einbettung	Erlaubte Domains	Eine Domain pro Zeile, vollständig mit https://, z. B. https://www.mein-salon.at. Nur dort darf das Widget erscheinen. Leer = auf allen Websites erlaubt.
Texte	Titel	Überschrift im Widget, höchstens 200 Zeichen
Texte	Einleitungstext	Text unter der Überschrift, höchstens 2.000 Zeichen
Branding	Primärfarbe, Sekundärfarbe	Die Primärfarbe färbt Buttons und Akzente des Widgets. Die Sekundärfarbe wird gespeichert, wirkt im Widget derzeit aber nicht.
Branding	Schrift	Schriftart als CSS-Angabe, z. B. „Inter, sans-serif“. Leer = Standardschrift.
Branding	Eckenradius (px)	Wert 0 bis 32. Wird gespeichert, wirkt im Widget derzeit aber noch nicht.
Branding	Logo	Ihr Logo im Widget. Die Bilddatei wird dafür öffentlich abrufbar.

Mit Speichern übernehmen Sie die Änderungen. Es erscheint „Einbettung gespeichert.“, und die Vorschau lädt neu. Titel, Einleitung und Branding gelten nur im eingebetteten Widget, nicht auf Ihrer eigenständigen Buchungsseite.

So funktioniert die Domain-Prüfung

Die erlaubten Domains prüft das Widget im Browser des Besuchers. Steht die Website nicht in der Liste, zeigt es „Die Online-Buchung ist auf dieser Website nicht freigegeben.“ Kann der Browser die einbettende Website nicht ermitteln, blockiert das Widget nicht. Die Liste ist also eine Freigabe für Ihre eigenen Seiten, kein Zugriffsschutz. Groß-/Kleinschreibung und ein abschließender Schrägstrich spielen keine Rolle. Einträge mit Pfad (z. B. https://www.mein-salon.at/buchen) oder ohne https:// bzw. http:// lehnt HEXLE Bookings beim Speichern ab.

Über der Vorschau weisen zwei Meldungen auf fehlende Voraussetzungen hin:

Meldung	Bedeutung
„Die Einbettung ist deaktiviert – auf fremden Websites wird nichts angezeigt.“	Einbettung aktiv ist ausgeschaltet.
„Noch nicht buchbar“	Das Widget ist derzeit nicht erreichbar, es zeigt „nicht verfügbar“. Das ist auch der Fall, solange die Einbettung ausgeschaltet ist.

Code für Serviceangebote

Im Unterreiter Code kopieren Sie den Schnipsel mit Snippet kopieren und fügen ihn wie oben beschrieben in Ihre Website ein. Er besteht nur aus dem Platzhalter und der Skript-Zeile. Optional ergänzen Sie im Schnipsel data-location="…" bzw. data-service="…", um ein bestimmtes Serviceangebot oder eine Leistung vorzuwählen.

Siehe auch: Serviceangebot anlegen.