Du hast eine Webseite, die mit WordPress und Elementor* erstellt wurde und möchtest nun deinen Website-Besuchern eine superschnelle Möglichkeit bieten, Termine bei dir zu buchen – und das ohne umständliche E-Mails oder langes Hin und Her. Mit Calendly kannst du genau das realisieren – und mit Elementor kannst du das ganze noch schön in deiner Webseite integrieren.
In diesem Artikel zeige ich dir Schritt für Schritt, wie du Calendly in deine Website einbindest. Egal, ob du einen Popup-Button, einen Floating-Button, oder einfach einen gut gestalteten Textlink verwenden möchtest – nach dieser Anleitung kannst du deine Terminbuchungs-Option nicht nur technisch umsetzen, sondern auch perfekt an dein Design anpassen.
Was ist Calendly?
Calendly ist ein Online-Tool, das die Terminplanung revolutioniert. Es wurde entwickelt, um den lästigen Hin-und-Her-Austausch von E-Mails oder Nachrichten bei der Terminfindung zu vermeiden. Mit Calendly kannst du ganz einfach freie Zeitfenster angeben, und deine Kunden, Kollegen oder Partner wählen einen passenden Termin aus – direkt online und in Sekundenschnelle.
Die Hauptvorteile von Calendly:
- Einfachheit: Du richtest deinen Kalender einmal ein und kannst ihn immer wieder verwenden.
- Flexibilität: Du bestimmst, wann du verfügbar bist und welche Arten von Terminen buchbar sein sollen.
- Integration: Calendly lässt sich nahtlos mit anderen Tools wie Google Calendar, Outlook, Zoom oder Teams verbinden.
- Automatisierung: Nach der Buchung werden Benachrichtigungen und Erinnerungen automatisch verschickt – du musst dich um nichts kümmern.
Ob für Geschäftsmeetings, Kundenanfragen oder private Coaching-Sessions – mit Calendly kannst du deine Zeit effizienter organisieren und deinen Gästen ein reibungsloses Buchungserlebnis bieten.
Möglichkeiten der Integration
Calendly bietet drei Möglichkeiten an, dein erstelltes Terminbuchungsformular mittels bereitgestellten Code-Schnipseln in deine Webseite einzufügen.
Diesen Code kannst du in Elementor ganz einfach an gewünschter Stelle mit dem HTML-Widget einfügen. Der einzige Nachteil – ohne CSS Kenntnisse kannst du nur begrenzt in die Gestaltung (zB. der Buttons) eingreifen. Daher zeige ich dir hier zusätzlich noch ein Beispiel, wie du den Elementor-Button verwenden kannst, um das Calendly Formular in einem Popup zu öffnen und den Button ganz einfach in Elementor anpassen kannst.
Diese Möglichkeiten stellt Calendly bereit:
1. Inline-Embed 👉 Direktes Einbinden des Buchungsformulars
Die einfachste Methode ist das Einfügen des Calendly-Codes in ein HTML-Widget von Elementor. Dadurch wird das Formular direkt auf Ihrer Webseite angezeigt.
2. Popup Widget 👉 Floating Button mit Calendly im Popup
Ein Floating-Button bleibt immer rechts unten auf deiner Webseite sichtbar, unabhängig davon, wo sich der Nutzer auf der Seite befindet.
- Der Button öffnet ein Popup, in dem das Buchungsformular angezeigt wird.
- Den Button-Text, Farbe des Buttons kannst du einstellen, bevor du den Code kopierst.
- Den Code können Sie einfach im Footer einfügen, um ihn auf der gesamten Website verfügbar zu machen.
Tipp: Wenn du den Button auf jeder deiner Seiten anzeigen lassen willst, musst du nicht den Code auf jeder Seite einfügen, sondern kannst den zB. auch im Footer oder über Elementor Custom Code einmalig einfügen.
Nachteil: Der Button lässt sich nur begrenzt gestalten.
3. Popup Text 👉 Popup mit einem Textlink öffnen
Ein schlichter Textlink kann ebenfalls das Calendly-Popup öffnen. Hierbei kannst du den Text des Links ändern. Wenn der Code in Elementor eingefügt ist, dann erhält der Textlink das Styling, das du in den globalen Einstellungen von Elementor eingestellt hast.
Calendly Popup mit Elementor Button öffnen
Die Buttons, die Calendly zur Verfügung stellt, lassen sich nur in der Farbe anpassen. Meistens ist es aber der Fall, dass es bereits Buttons auf der Webseite gibt, die eine bestimmte Optik haben (zB. abgerundete Ecken, Schatten, etc.). Bevor man sich nun an das CSS wagt, um den vom eingefügten Code erzeugten Button genau so aussehen zu lassen, wie die restlichen Buttons, ist es einfacher, einen Elementor-Button zu verwenden und Calendly darüber öffnen zu lassen. Wie das funktioniert, siehst du in diesem Beitrag: Calendly mit Elementor-Button öffnen.
Video-Anleitungen
Die Integration von Calendly in Elementor bietet vielseitige Möglichkeiten, um Terminbuchungen für Ihre Website-Besucher zu vereinfachen. Ob als Popup, Floating-Button oder selbst erstellten Button – mit diesen Techniken gestalten Sie Ihre Website benutzerfreundlich und ansprechend.
Hier findest du Videos zur Einbindung von Calendly in Elementor:
Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren
Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren
Wenn du Fragen zur Einbettung hast, schreib mir unten gerne einen Kommentar!
