Kalenner: Wéi embett een e Scheduling Popup oder Embedded Kalenner op Ärer Websäit oder WordPress Site

Calendly Scheduling Widget

Virun e puer Wochen war ech op engem Site a gemierkt, wéi ech op e Link geklickt hunn fir e Rendez-vous mat hinnen ze plangen, datt ech net op eng Destinatiounssäit bruecht ginn, et war e Widget deen de Calendly Scheduler direkt an enger Popup-Fënster. Dëst ass e super Tool ... een op Ärem Site ze halen ass eng vill besser Erfahrung wéi se op eng extern Säit weiderzebréngen.

Wat ass Calendly?

Calendly integréiert direkt mat Ärem Google Aarbechtsberäich oder aner Kalennersystem fir Fuerplangformen ze bauen déi souwuel schéin an einfach ze benotzen sinn. Bescht vun allem, Dir kënnt souguer d'Zäit limitéieren datt Dir een mat Iech op Ärem Kalenner verbënnt. Als Beispill hunn ech dacks nëmmen e puer Stonnen op spezifesch Deeg zur Verfügung fir extern Reuniounen.

Mat engem Scheduler wéi dësen ass och eng vill besser Erfahrung wéi just e Formulaire auszefëllen. Fir mäin digital Transformatioun Consultatioun Firma, Mir hunn Grupp Verkafsevenementer wou d'Leedungsteam op der Versammlung ass. Mir integréieren och eis Web Meeting Plattform zu Calendly sou datt Kalenner Invitatiounen all vun der Online Versammlung Linken enthalen.

Calendly huet e Widget-Skript a Stylesheet lancéiert, deen eng super Aarbecht mécht fir de Fuerplangformular direkt op eng Säit z'integréieren, opgemaach vun engem Knäppchen, oder souguer vun engem schwiewende Knäppchen am Fousszeil vun Ärem Site. De Skript fir Calendly ass gutt geschriwwen, awer d'Dokumentatioun fir se an Ärem Site z'integréieren ass guer net gutt. Tatsächlech sinn ech iwwerrascht datt Calendly nach seng eege Plugins oder Apps fir verschidde Plattformen publizéiert huet.

Dëst ass onheemlech nëtzlech. Egal ob Dir an Heemservicer sidd an e Mëttel fir Är Cliente wëllt ubidden fir hire Rendez-vous ze plangen, en Hondspazéierer, eng SaaS Firma déi Besucher wëllt eng Demo plangen, oder eng grouss Gesellschaft mat ville Memberen, déi Dir braucht fir einfach ze plangen ... Kalenner an d'Embed Widgets sinn e super Self-Service Tool.

Wéi kalendly op ärem Site embett

Komesch, Dir wäert nëmmen Uweisungen op dës embed op der fannen Event Typ Niveau an net den aktuellen Eventniveau an Ärem Calendly Kont. Dir fannt de Code am Dropdown fir d'Astellunge vum Eventtyp uewe riets.

calendly embed

Wann Dir op dat klickt, gesitt Dir d'Optioune fir d'Typen vun Embedden:

embed Popup Text

Wann Dir de Code gräift an en embedt egal wou Dir op Ärem Site wëllt, da ginn et e puer Probleemer.

  • Wann Dir e puer verschidde Widgets op enger eenzeger Säit ruffe wëllt ... hu vläicht e Knäppchen deen de Scheduler lancéiert (Popup Text) souwéi de Fousszeilen Knäppchen (Popup Widget) ... Dir gitt de Stylesheet derbäi a schreift e puer vun Zäiten. Dat ass onnéideg.
  • En externen Skript a Stylesheet-Datei inline op Ärem Site ze ruffen ass net dat optimalst Mëttel fir de Service op Äre Site ze addéieren.

Meng Empfehlung wier de Stylesheet an Javascript an Ärem Header ze lueden ... dann benotzt déi aner Widgets wou se Sënn op Ärem Site maachen.

Wéi Calendly's Widgets funktionnéieren

Calendly huet zwee Dateien déi néideg sinn fir an Ärem Site z'integréieren, e Stylesheet an Javascript. Wann Dir dës op Äre Site setzt, fügen ech déi folgend an d'Head Sektioun vun Ärem HTML derbäi:

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

Wéi och ëmmer, wann Dir a WordPress sidd, wier déi bescht Praxis Är functions.php Datei fir d'Skripte anzeginn mat WordPress 'best practices. Also, a mengem Kand Thema, hunn ech déi folgend Zeilen vum Code fir de Stylesheet a Skript ze lueden:

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' );

Dat wäert dës lueden (a se cache) op mengem Site. Elo kann ech d'Widgets benotze wou ech se gär hätt.

Calendly's Footer Button

Ech wëll de spezifeschen Event nennen anstatt den Eventtyp op mengem Site, also lueden ech de folgende Skript a mengem Fousszeil:

<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>

Dir kënnt dat gesinn Calendly Skript brécht wéi follegt:

  • URL - dat genau Event dat ech a mengem Widget luede wëll.
  • Text - den Text deen ech de Knäppchen wëll hunn.
  • Faarf - den Hannergrondfaarf vum Knäppchen.
  • textColor - d'Faarf vum Text.
  • Markéieren - de Calendly Branding ewechhuelen.

Calendly's Text Popup

Ech wëll dat och op mengem Site verfügbar mat engem Link oder Knäppchen. Fir dëst ze maachen, benotzt Dir en onClick Event an Ärem Calendly ankeren Text. Mine huet zousätzlech Klassen fir et als Knäppchen ze weisen (net am Beispill hei ënnen gesinn):

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

Dëse Message ka benotzt ginn fir verschidde Offeren op enger eenzeger Säit ze hunn. Vläicht hutt Dir 3 Aarte vun Eventer déi Dir gären embeden ... just d'URL fir déi entspriechend Destinatioun änneren an et funktionnéiert.

Calendly's Inline Embed Popup

Den Inline Embed ass e bëssen anescht an deem et eng Div benotzt déi speziell vu Klass an Destinatioun genannt gëtt.

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

Erëm, dëst ass nëtzlech well Dir verschidde Divs mat jidderengem hutt Calendly Scheduler op der selwechter Säit.

Säit Notiz: Ech wënschen datt Calendly de Wee geännert huet wéi dëst ëmgesat gouf sou datt et net sou technesch muss sinn. Et wier super wann Dir just eng Klass hätt an dann den Destinatioun href benotzt fir de Widget ze lueden. Dat géif manner direkt Kodéierung iwwer Inhaltsmanagementsystemer erfuerderen. Awer ... et ass e super Tool (fir elo!). Zum Beispill - e WordPress Plugin mat Shortcodes wier ideal fir e WordPress Ëmfeld. Wann Dir interesséiert sidd, Calendly ... Ech kéint dëst einfach fir Iech bauen!

Fänkt mat Calendly un

Verzichterklärung: Ech sinn e Benotzer vu Calendly an och e Partner fir hire System. Dësen Artikel huet Affiliate Linken am ganzen Artikel.