Website-Widget

So funktioniert das Widget

Das Widget ist eine kleine Terminauswahl von Reservuj in Ihrer Website. Der Kunde wählt darin einen Standort (falls Sie mehrere haben), eine Leistung, einen Tag und eine freie Uhrzeit bis zu 28 Tage im Voraus. Ein Klick auf die Uhrzeit öffnet ein neues Reservuj-Fenster, in dem er sich anmeldet oder registriert und die Buchung bestätigt. Das Widget selbst schreibt nichts und verwendet keine Cookies.

Was Sie brauchen

• Der Betrieb nimmt Buchungen an: Er ist gestartet und seine E-Mail ist bestätigt.
• Mindestens eine Leistung in der Preisliste und Öffnungszeiten, damit es etwas anzubieten gibt.
• Eine Website mit https, in die sich ein Stück HTML-Code einfügen lässt.

1. Widget einschalten

Öffnen Sie in der Verwaltung Klienti → Widget na web und haken Sie Zapnout widget na web (Widget einschalten) an. Das Widget schaltet das Unternehmen selbst ein. Solange Sie es nicht einschalten, zeigt es keine Website.

2. Adresse Ihrer Website erlauben

Tragen Sie in das Feld Povolené weby (erlaubte Websites, eine pro Zeile) die Adresse der Website ein, auf die Sie das Widget setzen — nur die Adresse, ohne Pfad. Läuft die Website mit und ohne www, tragen Sie beide Varianten ein. Erlaubt sind höchstens 10 Adressen, nur mit https; ein Port ist erlaubt. Klicken Sie dann auf Uložit (speichern).

https://www.vas-salon.cz
https://vas-salon.cz

Das Widget wird nur auf erlaubten Adressen angezeigt. Sonst könnte es jeder bei sich einbauen und sich als Sie ausgeben.

3. Code in die Website einfügen

Unter den Einstellungen steht Kód k vložení (Einbettungscode). Wählen Sie die Variante (Schaltfläche mit Fenster oder Formular direkt auf der Seite), Text und Farbe der Schaltfläche und klicken Sie auf Kopírovat (kopieren). Fügen Sie den Code dort ein, wo Schaltfläche oder Formular erscheinen sollen. Das Aussehen wird nicht gespeichert, es steckt nur im Code: Nach einer Änderung fügen Sie den Code neu ein. Die Vorschau unter dem Code zeigt, was der Kunde sieht.

Eigene Website (HTML)

Eine Schaltfläche, die ein Fenster mit der Terminauswahl öffnet. Fügen Sie beide Zeilen dort ein, wo die Schaltfläche stehen soll; das Skript genügt einmal pro Seite, auch bei mehreren Widgets.

<script src="https://reservuj.cz/js/widget/v1.js" async></script>
<div data-reservuj-widget="vas-podnik" data-variant="button" data-label="Rezervovat" data-color="#0e7c8c"></div>

Ein Formular direkt in der Seite; seine Höhe passt sich dem Inhalt an.

<script src="https://reservuj.cz/js/widget/v1.js" async></script>
<div data-reservuj-widget="vas-podnik" data-variant="inline" data-label="Rezervovat" data-color="#0e7c8c"></div>

WordPress

Fügen Sie im Seiteneditor einen Block Individuelles HTML (Custom HTML) hinzu und setzen Sie den Code hinein. Entfernt WordPress das Skript beim Speichern (ein Konto ohne Berechtigung für ungefiltertes HTML oder ein Tarif, der keine Skripte erlaubt), verwenden Sie die Variante ohne Skript oder nur den Link.

Webnode, Wix und andere Baukästen

Baukästen haben meist ein Element zum Einfügen von HTML-Code (Code einbetten, HTML, Embed). Manche setzen es in einen eigenen Rahmen auf ihrer eigenen Adresse: Das Fenster der Schaltfläche öffnet sich dann nur innerhalb des Rahmens, und wenn die Adresse des Rahmens nicht unter den erlaubten Websites ist, erscheint statt der Auswahl nur ein Buchungslink. Wählen Sie in einem solchen Baukasten das Formular direkt auf der Seite und stellen Sie den Rahmen auf mindestens 700 px Höhe ein, oder legen Sie den Link aus der Variante nur Link auf eine Schaltfläche des Baukastens.

Ohne Skript und nur Link

Lässt Ihre Website kein fremdes Skript zu, verwenden Sie die Variante ohne Skript (ein reiner iframe). Sie hat eine feste Höhe von 700 px und passt sich dem Inhalt nicht an.

<iframe src="https://reservuj.cz/de/company/vas-podnik/widget" title="Rezervovat" style="width:100%;height:700px;border:0" loading="lazy" sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox"></iframe>

Lässt die Website auch keinen iframe zu, führt der reine Link direkt zur Buchung bei Ihrem Unternehmen.

<a href="https://reservuj.cz/de/company/vas-podnik/rezervovat?utm_source=web&amp;utm_medium=booking_link&amp;utm_campaign=vas-podnik" target="_blank" rel="noopener">Rezervovat</a>

Anpassung

Das Widget wird über Attribute des div-Elements aus dem Einbettungscode eingestellt. Andere Attribute kennt Version 1 nicht.

• Die Kampagnenparameter utm_source, utm_medium, utm_campaign, utm_content und utm_term aus der Adresse Ihrer Seite gibt das Widget weiter, bis in das Fenster, in dem der Kunde die Buchung abschließt.
• Fügt die Seite das Element erst später ein (etwa nach einem Klick), rufen Sie auf: window.ReservujWidget && window.ReservujWidget.scan();
• Beim Öffnen des Fensters oder Anzeigen des Formulars löst das Element das Ereignis reservuj:open aus (detail.slug enthält die Adresse des Unternehmens) — nützlich für eigene Auswertungen.

document.addEventListener('reservuj:open', (event) => {
  console.log('Reservuj widget', event.detail.slug);
});

Was der Kunde sieht

1. Eine Schaltfläche mit Ihrem Text und Ihrer Farbe. Ein Klick öffnet ein Fenster mit der Auswahl, auf dem Handy bildschirmfüllend; es schließt sich mit dem Kreuz, der Esc-Taste oder einem Klick daneben.
2. Er wählt nacheinander Standort (nur wenn Sie mehrere haben), Leistung, Tag und Uhrzeit. Die Preise im Widget sind Grundpreise; den endgültigen Preis sieht und bestätigt der Kunde beim Abschluss.
3. Ein Klick auf die Uhrzeit öffnet ein neues Reservuj-Fenster. Wer nicht angemeldet ist, sieht Máte vybraný termín (Sie haben einen Termin gewählt) und schließt die Buchung nach Anmeldung oder Registrierung ab. Die Auswahl gilt 30 Minuten, danach wählt der Kunde die Uhrzeit neu.

Häufige Probleme

Statt der Terminauswahl gibt es nur eine Schaltfläche, die die Buchung in einem neuen Fenster öffnet

Das Widget hat sich nicht innerhalb weniger Sekunden gemeldet, und der Code hat einen Ersatzlink angezeigt. Meist steht die Adresse der Seite nicht unter den erlaubten Websites: Prüfen Sie https, die Variante mit und ohne www und Tippfehler. In der Browserkonsole steht dann ein frame-ancestors-Fehler. Genauso verhält sich das Widget, wenn es ausgeschaltet ist oder der Betrieb keine Buchungen annimmt (siehe unten).

Auf der Website erscheint nichts

Die Website oder der Baukasten hat den Code beim Speichern entfernt, oder die Inhaltssicherheitsrichtlinie (CSP) Ihrer Website blockiert das Skript. Sendet Ihre Website einen Content-Security-Policy-Header, ergänzen Sie Ihre Regeln um die Adresse des Portals:

Content-Security-Policy: script-src 'self' https://reservuj.cz; frame-src https://reservuj.cz

Für die Variante ohne Skript genügt frame-src. Lässt sich die CSP nicht ändern, verwenden Sie nur den Link.

Das Widget meldet, dass Online-Buchung hier gerade nicht verfügbar ist

Der Betrieb nimmt gerade keine Buchungen über das Widget an: Das Widget ist ausgeschaltet, die E-Mail des Betriebs ist nicht bestätigt, der Betrieb ist nicht gestartet oder gesperrt. Auf Ihrer Website erscheint dann statt der Auswahl ein Buchungslink; die Meldung sehen Sie, wenn Sie das Widget allein öffnen. Was fehlt, sagt die Verwaltung auf der Seite Widget na web.

Keine Leistung oder kein freier Termin

Online kann gerade keine Leistung gebucht werden: In der Preisliste gibt es keine gültige Leistung für die Standard-Kundenkategorie. In den nächsten Wochen gibt es keinen freien Termin: Prüfen Sie die Öffnungszeiten, die Schichten der Mitarbeiter und wie weit im Voraus die Leistung gebucht werden kann.

Gerade sind zu viele Anfragen auf einmal da

Das Widget bremst mehr als 60 Anfragen pro Minute von einer IP-Adresse (etwa aus einem Büro). Nach einer Minute geht es von selbst wieder.

Erste Schritte · API für Entwickler