Wie man Koalendar in Webflow einbettet
Fügen Sie jedem Webflow-Projekt eine Sofortbuchungsfunktion hinzu – Sie müssen lediglich Ihren Koalendar-Einbettungscode kopieren → in Webflow einfügen → veröffentlichen. Keine Plugins, keine API-Schlüssel.
📑 Menü
- Schritt 1 – Kopieren Sie Ihren Koalendar-Code
- Schritt 2 – Fügen Sie es in Webflow ein
- Fehlerbehebung
- Welchen Stil soll ich wählen?
📋 Schritt 1 – Kopieren Sie Ihren Koalendar-Code
- 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 Besucher sehen |
|---|---|
| Inline-Einbettung 🖥️ | Vollständiger Kalender wird direkt auf der Seite angezeigt. |
| Popup-Widget 📍 | Schwebender Button, der Ihren Kalender in einem Pop-up-Fenster öffnet. |
| Popup-Text/Schaltfläche 🔗 | Jeder Link oder Button auf Ihrer Seite öffnet den Kalender in einem Pop-up-Fenster. |
➕ Möchten Sie nur einen normalen Link? Überspringen Sie die Einbettung, kopieren Sie Ihre Koalendar-Freigabe-URL und verlinken Sie einen beliebigen Text, ein Bild oder eine Schaltfläche, um Ihren Terminplaner in einem neuen Tab zu öffnen.
🎨 Design-Tipp: Passen Sie Farben, Text und Position in Koalendar an, bevor Sie den Inhalt kopieren, damit alles zu Ihrem Webflow-Stil passt.
📝 Schritt 2 – Fügen Sie es in Webflow ein
A. Inline-Einbettung oder Popup-Text/Schaltfläche (Einbettungselement)
- Öffnen Sie im Webflow Designer die Seite, auf der Sie den Kalender oder Trigger einfügen möchten.
- Ziehen Sie einCode-Einbettungselement aus + Hinzufügen → Elemente an die gewünschte Position.
- Klicken Sie auf „Benutzerdefinierten Code bearbeiten “ und fügen Sie Ihren Koalendar-Code ein.
- Speichern & Schließen → Veröffentlichen Sie Ihre Website.
B. Popup-Widget (standortübergreifender schwebender Button)
- Gehen Sie zu Projekteinstellungen → Benutzerdefinierter Code → Fußzeilencode.
- Fügen Sie das Koalendar-Widget-Skript ein.
- Änderungen speichern → Veröffentlichen.
⏳ Hinweis: Benutzerdefinierter Code wird nur auf der veröffentlichten Website ausgeführt – nicht in der Designer-Vorschau.
🛠️ Fehlerbehebung
| Problem | Schnelle Lösung |
| Kalender oder Widget wird im Designer nicht angezeigt | Veröffentlichen Sie die Website und zeigen Sie die Live-URL an – Skripte werden in der Designer-Arbeitsfläche nicht ausgeführt. |
| Popup-Widget wird nicht angezeigt | Überprüfen Sie, ob sich das Skript im Fußzeilencode (oder einem Einbettungselement) befindet, und veröffentlichen Sie es erneut. |
| Popup-Text/Button-Link wird angezeigt, öffnet sich aber nicht | Stellen Sie sicher, dass sich sowohl das Trigger-Snippet als auch das Koalendar-Skript auf derselben Seite befinden. |
| Die Höhe des Inline-Kalenders sieht seltsam aus. | Ändern Sie die Größe des Einbettungselements oder legen Sie in Koalendar eine feste Höhe fest, bevor Sie es kopieren. |
🤔 Welchen Stil soll ich wählen?
| Ziel | Bester Stil |
| Spezieller Buchungsbereich | Inline-Einbettung 🖥️ |
| Website-weite Handlungsaufforderung | Popup-Widget 📍 |
| Zeitplan zu einem bestehenden CTA hinzufügen | Popup-Text/Schaltfläche 🔗 |
| Schneller Off-Page-Link | Einfacher Hyperlink zu Ihrer Koalendar-URL |