So erstellen Sie eine benutzerdefinierte Schaltfläche, um Calendly zu öffnen

Fügen Sie eine benutzerdefinierte Schaltfläche hinzu, die Calendly in einem Popup mit HTML und JavaScript öffnet – kein iFrame erforderlich. Vollständige Einrichtungs- und Stylinganleitung enthalten.

Bevor Sie beginnen

Um eine Schaltfläche zu erstellen, die Calendly in einem Popup öffnet, müssen Sie:

• Betten Sie das Einbettungsskript und CSS von Calendly in Ihre Seite ein
• Fügen Sie Ihrer HTML-Datei eine Schaltfläche oder ein anderes anklickbares Element hinzu
• Verwenden Sie eine JavaScript-onclick-Funktion, um den Planer zu starten.

Schritt 1 – Fügen Sie CSS und JavaScript von Calendly hinzu

Fügen Sie den folgenden Code zum HTML-Code Ihrer Website hinzu, idealerweise unmittelbar vor dem schließenden </head>-Tag oder am Anfang des Body-Bereichs:

<!-- Calendly einbetten Skript und Stile ein -->
<link href="https://calendly.com/assets/external/widget.css" rel="stylesheet">
<script src="https://calendly.com/assets/external/widget.js" type="text/javascript"></script>

Diese Ressourcen sind erforderlich, damit das Popup funktioniert.

Schritt 2 – Fügen Sie Ihren Button hinzu

Erstellen Sie eine Schaltfläche oder einen Link in Ihrem HTML. Rufen Sie im Attribut onclick die Calendly-Popup-Funktion auf und fügen Sie Ihren Terminplanungs-Link hinzu.

Beispiel:

<button onclick="Calendly.initPopupWidget({ url: 'https://calendly.com/YOUR_SCHEDULING_LINK' }); return false;">
  Einen Termin für ein Meeting vereinbaren
</button>

Ersetzen Sie YOUR_SCHEDULING_LINK durch die vollständige URL zu Ihrer Buchungsseite oder Ihrem Ereignistyp.

Sie können jedes anklickbare Element – Links, Symbole oder Divs – verwenden, solange es dieselbe onclick-Funktion enthält.

Optional – Passen Sie das Popup-Verhalten an

Das Popup wird in der Mitte des Bildschirms mit einem Overlay angezeigt. Sie können auch Parameter wie vorab ausgefüllte Daten der eingeladenen Person oder UTM-Tags übergeben, wenn Sie die erweiterte Einbettung verwenden. In den meisten Fällen reicht das obige Beispiel aus.

Gestalten Sie Ihren Button

Sie können Ihren Button mit CSS gestalten. Hier ist ein Beispiel:

<style>
  .calendly-button {
    background-color: #0069ff;
    Farbe: weiß;
    border: none;
    padding: 12px 24px;
    Schriftgröße: 16px;
    border-radius: 6px;
    cursor: pointer;
  }
  .calendly-button:hover {
    background-color: #0052cc;
  }
</style>

<button class="calendly-button" onclick="Calendly.initPopupWidget({ url: 'https://calendly.com/YOUR_SCHEDULING_LINK' }); return false;">
  Buchen Sie Ihren Termin
</button>

Aktualisieren Sie die Farben, den Abstand, die Schriftarten und andere Stile, um sie zu Ihrer Website anzupassen.

Tipps zur Fehlerbehebung

• Stellen Sie sicher, dass das Calendly-Skript und die CSS-Datei eingebunden sind
• Stellen Sie sicher, dass Ihre Schaltfläche return false; verwendet, um zu verhindern, dass die Seite aktualisiert wird
• Wenn das Popup nicht angezeigt wird, überprüfen Sie auf Fehler in der Browserkonsole
• Vermeiden Sie mehrere Calendly.initPopupWidget-Aufrufe auf derselben Seite, sofern dies nicht erforderlich ist