Verwenden Sie diese Schritt-für-Schritt-Anleitung, um Calendly in Ihre WordPress-Website einzubetten. Unabhängig davon, ob Sie WordPress.com, WordPress.org oder Elementor verwenden – hier finden Sie die passende Methode. Fügen Sie Ereignistypen oder Buchungsseiten mithilfe von Inline-Einbettungen, Einblendfenstern und mehr hinzu.
Bevor Sie beginnen
Prüfen Sie, welche Version von WordPress Sie verwenden
Wenn Sie nicht sicher sind, ob Ihre Website WordPress.com oder WordPress.org verwendet:
- Melden Sie sich bei Ihrem WordPress-Dashboard an.
- Bewegen Sie die Maus über das WordPress-Logo in der oberen linken Ecke.
- Wenn ein Dropdown-Menü angezeigt wird, verwenden Sie WordPress.org.
- Wenn kein Menü angezeigt wird, verwenden Sie WordPress.com.
Holen Sie sich Ihren Calendly-Einbettungscode
Sie müssen Ihren Einbettungscode von Ihrem Calendly-Konto kopieren. Sie können einen Code generieren für:
- Ein einzelner Ereignistyp
- Ihre Buchungsseite
Calendly zu WordPress.org hinzufügen
WordPress.org gibt Ihnen vollen Zugriff, um Calendly auf einer Seite oder auf Ihrer gesamten Website einzubetten.
- Hinweis: Der Einbettungscode von Calendly erfordert JavaScript. Einige WordPress-Themes unterstützen möglicherweise kein JavaScript oder beeinflussen das Erscheinungsbild der Einbettung.
Option 1 – Calendly zu einer einzelnen Seite hinzufügen
- Melden Sie sich bei WordPress an und gehen Sie zu Ihrem Admin-Dashboard.
- Wählen Sie Seiten aus und wählen Sie dann eine Seite zur Bearbeitung aus.
- Klicken Sie auf das +-Symbol, um einen neuen Block hinzuzufügen.
- Wählen Sie in den Formatierungsoptionen Benutzerdefiniertes HTML aus.
- Fügen Sie Ihren Calendly-Einbettungscode ein.
- Wählen Sie Vorschau, um das Layout zu überprüfen.
- Wählen Sie Aktualisieren, um Ihre Änderungen zu speichern.
Option 2 – Fügen Sie das Pop-up-Widget zu jeder Seite hinzu
- Gehen Sie im Admin-Dashboard zu Erscheinungsbild > Editor.
- Suchen Sie in der rechten Seitenleiste unter Design-Dateien nach Theme Footer.
- Scrollen Sie zum Ende der Datei und suchen Sie das
</body>Tag. - Fügen Sie Ihren Calendly-Pop-up-Widget-Code direkt über diesem Tag ein.
- Speichern Sie Ihre Website und zeigen Sie eine Vorschau an.
Calendly zu WordPress.com hinzufügen
Sie können Calendly zu WordPress.com hinzufügen, unabhängig davon, ob Ihr Plan Plugin-Support umfasst oder nicht.
- Hinweis: Die eingebetteten Widgets von Calendly funktionieren nur mit WordPress.com-Plänen, die benutzerdefinierte Plugins oder HTML-Blöcke unterstützen. Wenn Ihr Plan diese nicht unterstützt, können Sie trotzdem einen anklickbaren Link zu Ihrer Website hinzufügen.
Option 1 – Für Abos mit aktivierten Plugins
- Gehen Sie zu der Seite, auf der Sie Calendly hinzufügen möchten.
- Klicken Sie auf das + Blockeinfüger-Symbol aus.
- Suchen Sie nach dem benutzerdefinierten HTML-Block und fügen Sie ihn ein.
- Fügen Sie Ihren Calendly-Einbettungscode ein.
- Sehen Sie sich die Änderungen in der Vorschau an und wählen Sie Aktualisieren, um sie zu speichern.
Option 2 – Für Pläne ohne Plugin-Support
Sie können weiterhin von Text oder Bildern aus zu Ihrer Calendly-Seite verlinken.
- Markieren Sie beim Bearbeiten Ihrer Seite den Text und wählen Sie die Schaltfläche zum Einfügen/Bearbeiten von Links.
- Fügen Sie die URL auf Ihrer Terminplanungsseite, einen Ereignistyp oder eine Teamseite ein.
- Um ein Bild zu verknüpfen, klicken Sie auf das Bild und führen Sie dieselben Schritte aus.
So fügen Sie Calendly mit Elementor hinzu
Elementor funktioniert sowohl mit WordPress.org als auch mit WordPress.com. Sie haben mehr Kontrolle über die Seitengestaltung.
- Öffnen Sie Ihre Seite im Elementor-Editor.
- Fügen Sie der Leinwand ein Shortcode-Widget hinzu.
- Fügen Sie auf der Registerkarte Inhalt Ihren vollständigen Calendly-Einbettungscode ein.
Eine visuelle Anleitung finden Sie in der Elementor-Videoanleitung: Calendly mit Elementor hinzufügen.
Beheben von Problemen beim Scrollen in Elementor
Wir haben gesehen, dass Elementor automatisch overflow-y:auto als Inline-Stil hinzufügt. Das Hinzufügen dieses Stils kann ein zusätzliches Scrolling-Element erzeugen.
Um dies zu korrigieren, stellen Sie sicher, dass overflow oder overflow-y auf 'hidden' eingestellt ist. Beispiel:
</style>
.calendly-inline-widget { overflow-y: hidden ! important; }
</style>