Widgets auf der eigenen Website

Was ein Widget ist

Ein Widget zeigt Ihren Unitlify-Shop direkt auf Ihrer eigenen Website. Der Gast bleibt auf Ihrer Seite, sucht ein Angebot, wählt Datum und Tickets und bezahlt, ohne auf unitlify.de zu wechseln. Technisch ist das Widget Ihr Shop in einem Rahmen: Alle Angebote, Preise, Zahlarten und Rechtstexte kommen aus Unitlify, Farben und Schriften aus dem Shop-Designer.

Sie verwalten Widgets unter Buchungssystem → Integration Website. Sie brauchen dafür das Recht „Widgets verwalten“.

Schritt 1: Domain freigeben

Bevor ein Widget auf Ihrer Website läuft, muss die Domain der Website unter Freigegebene Domains eingetragen sein. Ohne Freigabe zeigt das Widget eine Fehlermeldung statt der Angebote.

• Eintragen ohne https://, zum Beispiel meine-firma.de. Ob mit oder ohne www. spielt keine Rolle.
• Läuft das Widget auf einer Subdomain wie shop.meine-firma.de oder tickets.meine-firma.de, tragen Sie diese Subdomain ein. meine-firma.de allein reicht dafür nicht.
• Die Website muss über https laufen.
• Nach dem Eintragen kann es bis zu eine Minute dauern, bis die Freigabe überall greift.

Schritt 2: Widget anlegen

Klicken Sie Neues Widget. Der Editor führt in fünf Schritten durch: Widget-Typ, Einstellungen, Design, Sichtbarer Inhalt, Speichern.

Die vier Widget-Typen

Einstellungen

• Sprache: Deutsch, Englisch, Französisch oder Spanisch. Das ist die Rückfallsprache. Das Widget richtet sich zuerst nach der Sprache Ihrer Website (dem lang-Attribut der Seite), dann nach der Browsersprache des Gastes, dann nach dieser Einstellung.
• SUB-ID: eine frei wählbare Kennung bis 60 Zeichen, nach der Sie Buchungen später auswerten. Mehr dazu unten.
• Name und Beschreibung: nur für Sie, erscheinen in der Widget-Liste und in der Buchungsdetailansicht.
• Button: Text der Schaltfläche (bis 40 Zeichen, sonst „Jetzt buchen“), Ziel (Buchungskasten, Produktseite, Katalog) und ob der Knopf schwebend unten rechts oder an der rechten Seite liegt.

Design

Breite in Pixeln (leer = volle Breite), Ausrichtung, Höhe (wächst mit dem Inhalt oder fest), Umrandung und Eckenradius. Beim Katalog zusätzlich Kacheln oder Liste, Kacheln pro Zeile und ob das erste Angebot hervorgehoben wird. Auf dem Handy steht immer eine Kachel pro Zeile.

Eine feste Höhe bringt eine eigene Bildlaufleiste im Widget. „Wächst mit dem Inhalt“ ist fast immer die bessere Wahl.

Farben, Schrift und Kachelform stellen Sie nicht hier, sondern im Shop-Designer ein. Sie gelten für Shop und alle Widgets gemeinsam.

Sichtbarer Inhalt

Bei Katalog und Produkt bestimmen Sie, was zu sehen ist: Bild, Preis, Dauer und Ort auf der Kachel; Überschrift, Suchleiste, Filter, Trefferzahl, Gutscheine und Vertrauensleiste drumherum; Galerie, Beschreibung und Highlights auf der Produktseite. Im Widget sind die Elemente drumherum standardmäßig aus, außer Gutscheine. Filter erscheinen erst, wenn es etwas zu filtern gibt (mindestens zwei Standorte, Sprachen oder Preise). Gutscheine zeigt das Widget nur bei „Alle Angebote“.

Beim Booking-Widget wählen Sie nur, ob Kalender, verbleibende Tickets und ausverkaufte Kategorien angezeigt werden.

Schritt 3: Einbettungscode einfügen

Nach dem Speichern zeigt der Editor den Einbettungscode:

<unitlify-katalog widget-id="IHRE-WIDGET-ID"></unitlify-katalog>
<script src="https://unitlify.de/widget/v1/katalog.js" defer></script>

Fügen Sie beide Zeilen an der Stelle Ihrer Website ein, an der das Widget erscheinen soll.

• WordPress, Elementor, Wix, Squarespace: Code in ein HTML-Element (nicht in einen Textblock) einfügen.
• Mehrere Widgets auf einer Seite: Jedes Widget bekommt sein eigenes <unitlify-katalog>-Element. Das Script muss nur einmal auf der Seite stehen, ein zweites Mal schadet aber nicht.
• Tempo-Plugins wie WP Rocket, LiteSpeed Cache oder Autoptimize: Nehmen Sie katalog.js von „JavaScript verzögert ausführen“ aus, sonst erscheint das Widget erst nach einem Klick auf die Seite.

Einstellungen im Code übersteuern

Sie können Design-Einstellungen direkt am Element überschreiben, ohne im Dashboard ein zweites Widget anzulegen:

<unitlify-katalog widget-id="…" max-width="640" align="center" frame="border" lang="en"></unitlify-katalog>

Das Attribut lang="de" ist der schnellste Weg, wenn das Widget in der falschen Sprache erscheint, zum Beispiel weil Ihre Website lang="en-US" gesetzt hat.

Was nach der Buchung passiert

Der Gast bleibt auf seiner Bestätigung im Widget, Ihre Website wird nicht verlassen. Beim Button-Widget beginnt das nächste Öffnen wieder frisch.

Für Ihre Webagentur: Das Widget löst nach einer abgeschlossenen Buchung auf dem Element das Ereignis unitlify:booking aus, ohne Personendaten. Damit lässt sich zum Beispiel ein Conversion-Ziel in Analytics auslösen. Das Ereignis bedeutet „Buchung angelegt“, nicht „bezahlt“: Es kommt auch bei Überweisung und Zahlung vor Ort. Bei Zahlarten mit Weiterleitung zum Anbieter (Klarna, iDEAL) wird es nicht ausgelöst.

SUB-IDs: Buchungen nach Herkunft auswerten

Jedes Widget kann eine SUB-ID tragen, zum Beispiel startseite, landingpage-sommer oder partner-hotel-x. Bei jeder Buchung und jedem Gutscheinkauf über das Widget wird die SUB-ID an der Buchung gespeichert. Mehrere Widgets dürfen dieselbe SUB-ID tragen, sie werden dann zusammen ausgewertet.

Sie sehen die Ergebnisse an drei Stellen:

• Integration Website: je Widget Buchungen, Teilnehmer und Umsatz für 30 Tage, 90 Tage, 12 Monate oder gesamt, darunter die Tabelle „Nach SUB-ID“. Der Umsatz enthält alle nicht stornierten Buchungen, also auch noch unbezahlte.
• Buchungsliste: Filter „Alle Widgets“ und „Alle SUB-IDs“. Die Filter erscheinen erst, wenn Widgets beziehungsweise SUB-IDs existieren.
• Export: Spalten „Widget (Einbettung)“ und „SUB-ID“.

Die SUB-ID wird beim Buchen kopiert. Ändern Sie sie später, behalten alte Buchungen die alte Kennung. Löschen Sie ein Widget, verlieren seine Buchungen die Zuordnung zum Widget; die SUB-ID bleibt an der Buchung, steht aber nicht mehr im Filter, solange kein anderes Widget sie trägt.

Zahlarten im Widget

Im Widget gelten dieselben Zahlarten und Regeln wie im Shop, siehe Zahlungsmethoden einrichten. Für Apple Pay müssen Sie zusätzlich die Domain Ihrer Website unter Zahlungsmethoden → Registrierte Domains eintragen.

Vorschau

Die Vorschau im Editor zeigt den gespeicherten Stand. Ungespeicherte Änderungen sehen Sie weder in der Vorschau noch auf Ihrer Website. Nach dem Speichern kann es auf Ihrer Website bis zu eine Minute dauern, bis die neue Fassung erscheint.

Checkliste bei Problemen

• Fehlermeldung statt Angeboten: Domain nicht freigegeben, oder nur die Hauptdomain statt der Subdomain eingetragen. Die Meldung nennt die Domain, die fehlt.
• Widget bleibt leer: Website läuft über http statt https, oder ein Tempo-Plugin verzögert das Script.
• Falsche Sprache: lang-Attribut Ihrer Website prüfen oder lang="de" am Element setzen.
• Änderung nicht sichtbar: Nicht gespeichert, oder noch innerhalb der Minute Zwischenspeicher.
• Keine Gutscheine im Katalog: Gutscheine erscheinen nur bei „Alle Angebote“.
• Apple Pay fehlt im Widget: Domain unter Zahlungsmethoden → Registrierte Domains nachtragen.
• Buchungen fehlen in der Widget-Statistik: Die Buchung kam nicht über das Widget, sondern über den Shop-Link oder einen anderen Kanal.