Calendly: ütemezési előugró ablak vagy beágyazott naptár beágyazása a webhelyébe vagy a WordPress webhelyébe

Calendly ütemezési widget

Néhány héttel ezelőtt egy webhelyen jártam, és amikor rákattintottam egy linkre, hogy időpontot egyeztethessek velük, észrevettem, hogy nem hoztak el egy céloldalra, volt egy widget, amely közzétette a Calendly ütemező közvetlenül egy felugró ablakban. Ez egy nagyszerű eszköz… sokkal jobb élmény valakit a webhelyén tartani, mint egy külső oldalra továbbítani.

Mi az a Calendly?

Calendly közvetlenül integrálható az Önével Google munkaterület vagy más naptári rendszerrel szép és könnyen használható ütemezési űrlapok készítéséhez. A legjobb az egészben, hogy még azt is korlátozhatja, hogy a naptárában mennyi ideig hagyja, hogy valaki kapcsolatba lépjen Önnel. Például gyakran csak néhány órám áll rendelkezésre bizonyos napokon a külső megbeszélésekre.

Egy ilyen ütemező használata is sokkal jobb élmény, mint egy űrlap kitöltése. Az én digitális transzformációs tanácsadó cég, vannak csoportos értékesítési rendezvényeink, ahol a vezetői csapat az értekezleten van. Webes értekezlet-platformunkat is integráljuk a Calendly-be, így a naptári meghívók tartalmazzák az összes online értekezlet-linket.

A Calendly elindított egy widget szkriptet és stíluslapot, amely remekül beágyazza az ütemezési űrlapot közvetlenül egy oldalba, egy gombbal vagy akár egy lebegő gombbal megnyitva a webhely láblécében. A Calendly forgatókönyve jól meg van írva, de a webhelybe való integrálásához szükséges dokumentáció egyáltalán nem jó. Valójában meglep, hogy a Calendly még nem tette közzé saját beépülő moduljait vagy alkalmazásait különböző platformokhoz.

Ez hihetetlenül hasznos. Legyen szó otthoni szolgáltatásokról, és ügyfelei számára szeretne lehetőséget biztosítani az időpont egyeztetésére, egy kutyasétáltatóra, egy SaaS-cégre, amely azt szeretné, hogy a látogatók bemutatót ütemezzenek be, vagy egy több taggal rendelkező nagyvállalatot, amelyet egyszerűen be kell ütemezni… Calendly a beágyazott widgetek pedig remek önkiszolgáló eszköz.

A Calendly beágyazása a webhelyébe

Furcsa módon ezeken a beágyazásokon csak a következő helyen talál útmutatást esemény típusa szinten, és nem a tényleges eseményszinten a Calendly-fiókon belül. A kódot az eseménytípus beállításainak legördülő menüjében találja a jobb felső sarokban.

calendly beágyazás

Ha rákattint, látni fogja a beágyazás típusaihoz tartozó lehetőségeket:

felugró szöveg beágyazása

Ha megragadja a kódot, és bárhová beágyazza a webhelyén, akkor van néhány probléma.

  • Ha több különböző widgetet szeretne meghívni egyetlen oldalon… talán van egy gomb, amely elindítja az ütemezőt (Popup Text), valamint a lábléc gombot (Popup Widget)… hozzá kell adnia a stíluslapot és le kell írnia néhányat. időkből. Ez felesleges.
  • Külső szkript- és stíluslapfájl soron belüli meghívása a webhelyen nem a legoptimálisabb módja a szolgáltatás webhelyhez való hozzáadásának.

Azt javaslom, hogy töltse be a stíluslapot és a Javascriptet a fejlécébe… majd használja a többi widgetet, ahol van értelme az egész webhelyen.

Hogyan működnek a Calendly widgetek

Calendly két fájlt tartalmaz a webhelybe való beágyazáshoz: egy stíluslapot és egy javascriptet. Ha ezeket szeretné beszúrni a webhelyébe, a következőket adnám hozzá a HTML-kód fejrészéhez:

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

Ha azonban WordPress-t használ, a legjobb módszer az lenne, ha a sajátját használja functions.php fájlba a szkriptek beszúrásához a WordPress bevált gyakorlatait alkalmazva. Tehát a gyermektémámban a következő kódsorokkal kell betölteni a stíluslapot és a szkriptet:

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

Ez betölti ezeket (és gyorsítótárba helyezi) az egész webhelyemen. Most már ott használhatom a widgeteket, ahol akarom.

Calendly lábléc gombja

A webhelyem eseménytípusa helyett a konkrét eseményt szeretném meghívni, ezért a következő szkriptet töltöm be a láblécembe:

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

Látni fogja a Calendly a script a következőképpen bomlik fel:

  • URL – a pontos esemény, amit be akarok tölteni a widgetembe.
  • szöveg – a szöveget, amit a gombon akarok.
  • színek – a gomb háttérszíne.
  • szöveg szín - a szöveg színe.
  • branding – a Calendly márkajelzés eltávolítása.

Calendly szöveg előugró ablaka

Azt is szeretném, hogy ez elérhető legyen a webhelyemen egy link vagy gomb segítségével. Ehhez használjon egy onClick eseményt a sajátjában Calendly horgonyszöveg. Az enyémnek további osztályai vannak, amelyek gombként jelenítik meg (az alábbi példában nem látható):

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

Ezzel az üzenettel több ajánlat is szerepelhet egyetlen oldalon. Lehet, hogy háromféle eseményt szeretne beágyazni… csak módosítsa a megfelelő cél URL-jét, és működni fog.

Calendly soron belüli beágyazási előugró ablaka

A soron belüli beágyazás kissé eltér attól, hogy egy div-et használ, amelyet kifejezetten osztály és cél szerint hívnak meg.

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

Ez ismét hasznos, mert mindegyikhez több div is tartozhat Calendly ütemező ugyanazon az oldalon.

Mellékes megjegyzés: Bárcsak a Calendly módosítaná a megvalósítás módját, hogy ne kelljen annyira technikainak lennie. Jó lenne, ha csak egy osztályod lenne, és a cél href-et használnád a widget betöltéséhez. Ez kevesebb közvetlen kódolást igényelne a tartalomkezelő rendszerek között. De… ez egy nagyszerű eszköz (egyelőre!). Például – egy WordPress-bővítmény rövid kódokkal ideális lenne WordPress-környezetbe. Ha érdekel, Calendly... Könnyen elkészíthetem neked!

Kezdje el a Calendlyt

Felelősség kizárása: A Calendly felhasználója vagyok, és a rendszerük leányvállalata is vagyok. Ebben a cikkben az egész cikkben kapcsolt linkek találhatók.