Content MarketingCRM- und DatenplattformenE-Mail-Marketing und E-Mail-Marketing-AutomatisierungEvent-MarketingMarketing- und VertriebsvideosMarketing WerkzeugeVertriebsunterstützung

Calendly: So betten Sie ein Planungs-Popup oder einen eingebetteten Kalender in Ihre Website oder WordPress-Site ein

Vor ein paar Wochen war ich auf einer Site und bemerkte, als ich auf einen Link klickte, um einen Termin mit ihnen zu vereinbaren, dass ich nicht auf eine Zielsite gebracht wurde Kräftig Scheduler direkt in einem Popup-Fenster. Dies ist ein großartiges Tool. Es ist eine viel bessere Erfahrung, jemanden auf Ihrer Website zu halten, als ihn auf eine externe Seite weiterzuleiten.

Was ist Calendly?

Kräftig integriert sich direkt in Ihr Google-Arbeitsbereich oder ein anderes Kalendersystem, um Planungsformulare zu erstellen, die sowohl schön als auch einfach zu verwenden sind. Das Beste daran ist, dass Sie sogar die Zeit begrenzen können, in der Sie jemanden in Ihrem Kalender mit Ihnen verbinden lassen. Ich habe zum Beispiel oft nur wenige Stunden an bestimmten Tagen für externe Besprechungen zur Verfügung.

Die Verwendung eines solchen Planers ist auch eine weitaus bessere Erfahrung, als nur ein Formular auszufüllen. Für mein Beratungsunternehmen für digitale Transformation, haben wir Gruppenverkaufsveranstaltungen, bei denen das Führungsteam an der Besprechung teilnimmt. Wir integrieren auch unsere Web-Meeting-Plattform in Calendly, sodass Kalendereinladungen alle Online-Meeting-Links enthalten.

Calendly hat ein Widget-Skript und ein Stylesheet auf den Markt gebracht, mit denen das Planungsformular direkt in eine Seite eingebettet, über eine Schaltfläche oder sogar über eine schwebende Schaltfläche in der Fußzeile Ihrer Site geöffnet werden kann. Das Skript für Calendly ist gut geschrieben, aber die Dokumentation, um es in Ihre Site zu integrieren, ist überhaupt nicht gut. Tatsächlich überrascht es mich, dass Calendly noch keine eigenen Plugins oder Apps für verschiedene Plattformen veröffentlicht hat.

Das ist unglaublich nützlich. Egal, ob Sie im Heimdienst sind und Ihren Kunden die Möglichkeit bieten möchten, ihren Termin zu vereinbaren, ein Hundeausführer, ein SaaS-Unternehmen, das Besuchern eine Demo anbieten möchte, oder ein großes Unternehmen mit mehreren Mitgliedern, Sie müssen einfach einen Termin vereinbaren… Calendly und die Widgets zum Einbetten sind ein großartiges Self-Service-Tool.

So betten Sie Calendly in Ihre Site ein

Seltsamerweise findest du auf dieser Einbettung nur eine Wegbeschreibung im Ereignistyp Ebene und nicht die tatsächliche Ereignisebene in Ihrem Calendly-Konto. Den Code finden Sie oben rechts im Dropdown für die Einstellungen des Ereignistyps.

kalendarisch einbetten

Sobald Sie darauf klicken, werden die Optionen für die Einbettungstypen angezeigt:

Popup-Text einbetten

Wenn Sie den Code abrufen und an einer beliebigen Stelle auf Ihrer Website einbetten, gibt es einige Probleme.

  • Wenn Sie ein paar verschiedene Widgets auf einer einzigen Seite aufrufen möchten … haben Sie vielleicht eine Schaltfläche, die den Planer (Popup-Text) sowie die Fußzeilen-Schaltfläche (Popup-Widget) startet … Sie werden das Stylesheet und das Skript ein paar hinzufügen der Zeiten. Das ist unnötig.
  • Das Inline-Aufrufen einer externen Skript- und Stylesheet-Datei in Ihrer Site ist nicht die optimale Methode, um den Dienst zu Ihrer Site hinzuzufügen.

Meine Empfehlung wäre, das Stylesheet und Javascript in Ihren Header zu laden… und dann die anderen Widgets dort zu verwenden, wo sie auf Ihrer Site sinnvoll sind.

So funktionieren die Widgets von Calendly

Kräftig hat zwei Dateien, die zum Einbetten in Ihre Site benötigt werden, ein Stylesheet und Javascript. Wenn Sie diese in Ihre Site einfügen, würde ich Folgendes in den Kopfabschnitt Ihres HTML-Codes einfügen:

<link href="https://calendly.com/assets/external/widget.css" rel="stylesheet">
<script src="https://calendly.com/assets/external/widget.js" type="text/javascript"></script>

Wenn Sie sich jedoch in WordPress befinden, verwenden Sie am besten Ihre functions.php Datei zum Einfügen der Skripte unter Verwendung der Best Practices von WordPress. In meinem Child-Theme habe ich also die folgenden Codezeilen, um das Stylesheet und das Skript zu laden:

wp_enqueue_script('calendly-script', '//assets.calendly.com/assets/external/widget.js', array(), null, true);
wp_enqueue_style('calendly-style', '//assets.calendly.com/assets/external/widget.css' );

Das wird diese auf meiner gesamten Site laden (und zwischenspeichern). Jetzt kann ich die Widgets dort verwenden, wo ich sie haben möchte.

Calendlys Fußzeilen-Schaltfläche

Ich möchte auf meiner Site eher das spezifische Ereignis als den Ereignistyp aufrufen, daher lade ich das folgende Skript in meine Fußzeile:

<script type="text/javascript">window.onload = function() { Calendly.initBadgeWidget({ url: 'https://calendly.com/highbridge-team/sales', text: 'Schedule a Consultation', color: '#0069ff', textColor: '#ffffff', branding: false }); }</script>

Du wirst das sehen Kräftig Skript gliedert sich wie folgt:

  • URL – das genaue Ereignis, das ich in mein Widget laden möchte.
  • Text – der Text, den der Button haben soll.
  • Farbe – die Hintergrundfarbe der Schaltfläche.
  • Textfarbe – die Farbe des Textes.
  • Branding – Entfernen des Calendly-Brandings.

Calendlys Text-Popup

Ich möchte auch, dass dies auf meiner gesamten Website über einen Link oder eine Schaltfläche verfügbar ist. Dazu nutzen Sie ein onClick-Event in Ihrem Kräftig Anker-Text. Meins hat zusätzliche Klassen, um es als Schaltfläche anzuzeigen (im folgenden Beispiel nicht zu sehen):

<a href="#" onclick="Calendly.initPopupWidget({url: 'https://calendly.com/highbridge-team/sales'});return false;">Schedule time with us</a>

Diese Nachricht kann verwendet werden, um mehrere Angebote auf einer einzigen Seite zu haben. Vielleicht haben Sie 3 Arten von Ereignissen, die Sie einbetten möchten ... ändern Sie einfach die URL für das entsprechende Ziel und es wird funktionieren.

Calendlys Inline-Einbettungs-Popup

Die Inline-Einbettung unterscheidet sich ein wenig darin, dass sie ein div verwendet, das speziell nach Klasse und Ziel aufgerufen wird.

<div class="calendly-inline-widget" data-url="https://calendly.com/highbridge-team/sales" style="min-width:320px;height:630px;"></div>

Auch dies ist nützlich, da Sie mit jedem mehrere Divs haben können Kräftig Scheduler auf derselben Seite.

Randnotiz: Ich wünschte, Calendly hätte die Art und Weise geändert, wie dies implementiert wurde, damit es nicht so technisch sein musste. Es wäre toll, wenn Sie einfach eine Klasse haben und dann das Ziel href verwenden könnten, um das Widget zu laden. Das würde weniger direkte Codierung über Content-Management-Systeme hinweg erfordern. Aber… es ist ein großartiges Werkzeug (vorerst!). Zum Beispiel – ein WordPress-Plugin mit Shortcodes wäre ideal für eine WordPress-Umgebung. Wenn Sie interessiert sind, Calendly… Ich könnte das leicht für Sie bauen!

Beginnen Sie mit Calendly

Haftungsausschluss: Ich bin ein Benutzer von Calendly und auch ein Partner für ihr System. Dieser Artikel enthält im gesamten Artikel Affiliate-Links.

Douglas Karr

Douglas Karr ist der Gründer der Martech Zone und anerkannter Experte für digitale Transformation. Douglas hat bei der Gründung mehrerer erfolgreicher MarTech-Startups geholfen, bei der Due Diligence von über 5 Mrd. Er ist Mitbegründer von Highbridge, ein Beratungsunternehmen für digitale Transformation. Douglas ist auch ein veröffentlichter Autor eines Dummie's Guide und eines Buches über Unternehmensführung.

Verwandte Artikel