Wie man Calendly in Elementor integriert: Inline-Formular und Popup über einen Elementor-Button

Du möchtest deinen Website-Besuchern eine einfache Möglichkeit geben, Termine direkt über deine Webseite zu buchen? Mit Calendly kannst du den Buchungsprozess effizient und professionell gestalten. Besucher können direkt auf deiner Webseite einen Termin mit dir vereinbaren – ganz ohne den üblichen E-Mail-Verkehr und zusätzliche Schritte. Das spart Zeit und sorgt für einen reibungslosen Ablauf.

In dieser Anleitung zeige ich dir zwei Methoden, um Calendly in deine Elementor-Webseite einzubauen:
Entweder wird der Kalender direkt auf der Seite angezeigt (Inline-Formular) oder das Formular öffnet sich in einem Popup, das über einen von dir gestalteten Elementor-Button aktiviert wird.

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

YouTube immer entsperren

Was ist Calendly und warum solltest du es nutzen?

Calendly ist ein vielseitiges Terminplanungstool, das deinen Kalender mit deiner Webseite verknüpft. Besucher können freie Zeiten einsehen und ihre Buchung vornehmen – ohne zusätzliche Kommunikation. Calendly synchronisiert sich direkt mit deinem Kalender und sendet automatische E-Mail-Benachrichtigungen, sodass du und deine Kunden stets den Überblick behalten. Ob als direkter Link oder eingebunden in deine Webseite: Mit Calendly sparst du und deine Kunden Zeit und die Terminbuchung ist so einfach wie ein Klick.

1. Calendly als Inline-Formular einfügen

Ein Inline-Formular eignet sich perfekt, wenn du den Buchungskalender direkt auf einer bestimmten Seite anzeigen möchtest. Der Kalender wird eingebettet und ist sofort sichtbar, sodass Besucher ohne Umwege eine Terminzeit auswählen können.

Schritt-für-Schritt-Anleitung:

1. Calendly-Code kopieren: Melde dich in deinem Calendly-Konto an und gehe zu dem Event, das du einbinden möchtest. Wähle unter „In Webseite einbetten“ die Option „Inline-Embed“. Du erhältst einen Code wie diesen:

   <div class="calendly-inline-widget" data-url="DEINE-CALENDLY-URL" style="min-width:320px;height:630px;"></div>
   <script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js" async></script>

2. HTML-Widget in Elementor einfügen:

• Öffne deine Seite in Elementor und füge an der gewünschten Stelle ein HTML-Widget ein.
• Kopiere den Code und füge ihn in das HTML-Widget ein.
• Ersetze DEINE-CALENDLY-URL durch deine persönliche Calendly-URL (Solltest du den Code aus deinem Konto kopieren, dann kannst du diesen Schritt überspringen)

2. Speichern und Überprüfen: Aktualisiere die Seite und überprüfe, ob das Inline-Formular korrekt angezeigt wird. Besucher können jetzt direkt im Kalender eine verfügbare Zeit auswählen und buchen.

2. Calendly als Popup über einen Elementor-Button einfügen

Falls du den Kalender dezent als Popup anzeigen möchtest, bietet Calendly dafür eine eigene Code-Einbettung. Allerdings ist der standardmäßige Popup-Button von Calendly nur sehr limitiert anpassbar und lässt sich nicht direkt über Elementor stylen. Um volle Kontrolle über das Design zu behalten, zeige ich dir hier einen alternativen Code, mit dem du deinen eigenen Elementor-Button zum Öffnen des Calendly-Popups verwenden kannst.

Schritt-für-Schritt-Anleitung:

1. HTML-Widget mit angepasstem Code einfügen:

• Füge auf deiner Elementor-Seite ein HTML-Widget ein und füge diesen angepassten Code ein:

<!-- Calendly link widget begin -->
<link href="https://assets.calendly.com/assets/external/widget.css" rel="stylesheet">
<script src="https://assets.calendly.com/assets/external/widget.js" type="text/javascript" async></script>
<script>
   document.addEventListener("DOMContentLoaded", function() {
       var calendlyButton = document.getElementById("calendlyButton");
       if (calendlyButton) {
           calendlyButton.addEventListener("click", function(event) {
               event.preventDefault();
               Calendly.initPopupWidget({ url: 'HIER-DIE-URL-ZU-DEINEM-CALENDLY' });
               return false;
           });
       }
   });
</script>
<!-- Calendly link widget end -->

• Ersetze DEINE-CALENDLY-URL durch deinen persönlichen Calendly-Link

1. Elementor-Button anpassen:

• Füge auf der gleichen Seite, wo du das HTML-Widget hinzugefügt hast, einen Button über das Elementor-Button-Widget ein.
• Gehe in die Button-Einstellungen, klicke auf „Erweitert“ und gib dem Button unter CSS-ID den Namen calendlyButton.

1. Button-Styling und Test: Jetzt kannst du den Button individuell gestalten – Farben, Größen, Text und Stil kannst du frei anpassen, sodass er nahtlos zum Design deiner Webseite passt. Aktualisiere die Seite und teste, ob sich das Popup wie gewünscht öffnet.

---

Zusammenfassung

Mit diesen beiden Methoden kannst du Calendly gezielt in deine Elementor-Webseite einfügen. Ob als direkt eingebettetes Inline-Formular oder als dezentes Popup, das sich über einen angepassten Button öffnet – beide Optionen bieten dir und deinen Besuchern eine komfortable und professionelle Lösung für die Terminbuchung.

Wenn du noch Fragen dazu hast, schreib mir gerne unten einen Kommentar.