So fügen Sie Koalendar zu einer Unbounce-Website hinzu
Fügen Sie mit einem einfachen Kopieren und Einfügen eine unkomplizierte Terminplanung zu jeder Unbounce-Landingpage hinzu. Keine zusätzlichen Integrationen – alles, was Sie brauchen, finden Sie bereits in Koalendar und Unbounce.
📑 Menü
- 📋 Schritt 1 – Kopieren Sie Ihren Einbettungscode
- 📝 Schritt 2 – Fügen Sie es in Unbounce ein
- 🛠️ Fehlerbehebung
- 🤔 Welchen Einbettungsstil sollten Sie verwenden?
📋 Schritt 1 – Kopieren Sie Ihren Einbettungscode
- Klicken Sie im Koalendar-Dashboard neben der Buchungsseite, die Sie einbetten möchten, auf „Teilen “.
- Wählen Sie „Zur Website hinzufügen”.
- Wählen Sie einen Einbettungsstil aus und klicken Sie auf „Code kopieren“.
| Einbettungsstil | Was es tut |
|---|---|
| Inline-Einbettung 🖥️ | Zeigt den Buchungskalender direkt auf der Startseite an. |
| Popup-Widget 📍 | Fügt eine schwebende Schaltfläche „Jetzt buchen“ hinzu, die ein Kalender-Popup öffnet. |
| Popup beim Klicken 🔗 | Verwandelt jeden Link oder jede Schaltfläche in einen Popup-Kalender. |
💡 Passen Sie Farben, Text und Position vor dem Kopieren an, damit alles zu Ihrem Unbounce-Design passt.
📝 Schritt 2 – Fügen Sie es in Unbounce ein
Option A – Inline-Einbettung oder Popup beim Klicken 🔧
- Ziehen Sie im Unbounce Page Builder einen HTML-Block auf die Seite, auf der der Kalender (oder Popup-Trigger) angezeigt werden soll.
- Doppelklicken Sie auf den Block, um den benutzerdefinierten HTML -Editor zu öffnen.
- Fügen Sie den kopierten Koalendar-Code ein.
- Speichern Sie den Code und zeigen Sie dann eine Vorschau Ihrer Seite an oder veröffentlichen Sie sie.
Option B – Popup-Widget (schwebende Schaltfläche) 📌
- Öffnen Sie Ihre Seite im Unbounce Page Builder und klicken Sie auf die Registerkarte „Javascripts“ (unten links).
- Klicken Sie auf „Skript hinzufügen“ → geben Sie ihm einen Namen wie „Koalendar Widget“.
- Fügen Sie den Koalendar-Widget-Code ein und setzen Sie die Platzierung auf „Vor dem Body-End-Tag“.
- Fertig → Vorschau oder Veröffentlichen. Die schwebende Schaltfläche erscheint nun auf jeder Variante dieser Seite.
📝 Benötigen Sie ein siteweites Widget? Fügen Sie dasselbe Skript zu jeder Landing Page hinzu oder duplizieren Sie die Seite, sobald das Widget installiert ist.
🛠️ Fehlerbehebung
| Problem | Schnelle Lösung |
| Kalender wird in der Vorschau nicht geladen | Veröffentlichen Sie die Seite – einige Skripte laufen nur auf der Live-URL. |
| Widget fehlt nach dem Einfügen | Stellen Sie sicher, dass das Skript vor dem Body-End-Tag (nicht vor dem Head-Tag) platziert ist. |
| Popup-Link wird angezeigt, lässt sich aber nicht öffnen | Vergewissern Sie sich, dass sich sowohl der Link-Ausschnitt als auch das Koalendar-Skript auf derselben Seite befinden. |
| Das Styling wirkt beengt. | Erhöhen Sie die Breite/Höhe des HTML-Blocks oder passen Sie den Abstand in den Koalendar-Einbettungseinstellungen an. |
🤔 Welchen Einbettungsstil sollten Sie verwenden?
| Ziel | Bester Stil |
| Spezieller Buchungsbereich | Inline-Einbettung 🖥️ |
| Immer sichtbarer CTA | Popup-Widget 📍 |
| Zu einer vorhandenen Schaltfläche eine Zeitplanung hinzufügen | Popup beim Klicken 🔗 |
| Schneller Off-Page-Link | Direkter Link ↗️ |