Calendly: Cum să încorporați un pop-up de programare sau un calendar încorporat în site-ul dvs. web sau site-ul WordPress

Widget de programare Calendly

Acum câteva săptămâni, eram pe un site și am observat când am dat clic pe un link pentru a programa o întâlnire cu ei că nu am fost adus pe un site de destinație, a existat un widget care a publicat Calendly programator direct într-o fereastră pop-up. Acesta este un instrument grozav... păstrarea pe cineva pe site-ul dvs. este o experiență mult mai bună decât redirecționarea acestuia către o pagină externă.

Ce este Calendly?

Calendly se integrează direct cu dvs Spațiul de lucru Google sau alt sistem de calendar pentru a construi formulare de programare care sunt atât frumoase, cât și ușor de utilizat. Cel mai bun dintre toate, poți chiar să limitezi timpul în care permiți pe cineva să se conecteze cu tine în calendarul tău. De exemplu, adesea am doar câteva ore disponibile în anumite zile pentru întâlniri externe.

Utilizarea unui planificator ca acesta este, de asemenea, o experiență mult mai bună decât simpla completare a unui formular. Pentru a mea firma de consultanta in transformarea digitala, avem evenimente de vânzări de grup în care echipa de conducere este la întâlnire. De asemenea, integrăm platforma noastră de întâlniri web în Calendly, astfel încât invitațiile din calendar să includă toate linkurile pentru întâlniri online.

Calendly a lansat un script widget și o foaie de stil care face o treabă grozavă la încorporarea formularului de programare direct într-o pagină, deschisă dintr-un buton sau chiar dintr-un buton plutitor din subsolul site-ului dvs. Scriptul pentru Calendly este bine scris, dar documentația pentru a-l integra în site-ul tău nu este deloc bună. De fapt, sunt surprins că Calendly încă nu și-a publicat propriile plugin-uri sau aplicații pentru diferite platforme.

Acest lucru este incredibil de util. Indiferent dacă sunteți în servicii la domiciliu și doriți să oferiți clienților un mijloc de a-și programa întâlnirea, un plimbător de câini, o companie SaaS care dorește ca vizitatorii să programeze o demonstrație sau o corporație mare cu mai mulți membri pe care trebuie să o programați cu ușurință... Calendly iar widget-urile încorporate sunt un instrument excelent de autoservire.

Cum să încorporați Calendly în site-ul dvs

În mod ciudat, veți găsi indicații numai pentru aceste încorporare la Tip de eveniment nivel și nu nivelul real al evenimentului din contul tău Calendly. Veți găsi codul în meniul drop-down pentru setările tipului de eveniment din dreapta sus.

încorpora calendly

După ce faceți clic pe acesta, veți vedea opțiunile pentru tipurile de încorporare:

încorporați text pop-up

Dacă luați codul și îl încorporați oriunde doriți pe site-ul dvs., există câteva probleme.

  • Dacă doriți să apelați câteva widget-uri diferite pe o singură pagină... poate aveți un buton care lansează programatorul (Text pop-up), precum și butonul de subsol (Widget pop-up)... veți adăuga foaia de stil și veți scrie câteva scripturi de ori. Asta e inutil.
  • Apelarea unui script extern și a unui fișier de foaie de stil în site-ul dvs. nu este cel mai optim mijloc de a adăuga serviciul pe site-ul dvs.

Recomandarea mea ar fi să încărcați foaia de stil și JavaScript în antet... apoi utilizați celelalte widget-uri acolo unde au sens pe site-ul dvs.

Cum funcționează widgeturile lui Calendly

Calendly are două fișiere care sunt necesare pentru a le încorpora în site-ul dvs., o foaie de stil și javascript. Dacă urmează să le inserați în site-ul dvs., aș adăuga următoarele în secțiunea de cap a codului HTML:

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

Cu toate acestea, dacă sunteți în WordPress, cea mai bună practică ar fi să utilizați dvs functions.php fișier pentru a insera scripturile utilizând cele mai bune practici WordPress. Deci, în tema copilului meu, am următoarele linii de cod pentru a încărca foaia de stil și scriptul:

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

Asta le va încărca (și le va stoca în cache) pe tot site-ul meu. Acum pot folosi widget-urile acolo unde aș dori.

Butonul de subsol al lui Calendly

Vreau să apelez evenimentul specific, mai degrabă decât tipul de eveniment de pe site-ul meu, așa că încarc următorul script în subsolul meu:

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

Veți vedea Calendly scriptul se descompune după cum urmează:

  • URL-ul – evenimentul exact pe care vreau să îl încarc în widget-ul meu.
  • Text – textul pe care vreau să-l aibă butonul.
  • Culori – culoarea de fundal a butonului.
  • culoarea textului - culoarea textului.
  • branding – eliminarea mărcii Calendly.

Popup-ul de text al lui Calendly

De asemenea, vreau ca acest lucru să fie disponibil pe tot site-ul meu folosind un link sau un buton. Pentru a face acest lucru, utilizați un eveniment onClick în dvs Calendly text ancorat. Al meu are clase suplimentare pentru a-l afișa ca buton (nu se vede în exemplul de mai jos):

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

Acest mesaj poate fi folosit pentru a avea mai multe oferte pe o singură pagină. Poate că aveți 3 tipuri de evenimente pe care doriți să le încorporați... trebuie doar să modificați adresa URL pentru destinația corespunzătoare și va funcționa.

Popup încorporat în linie de la Calendly

Încorporarea în linie este puțin diferită prin faptul că utilizează un div care este numit în mod special după clasă și destinație.

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

Din nou, acest lucru este util deoarece puteți avea mai multe div-uri cu fiecare Calendly programator în aceeași pagină.

Notă laterală: aș vrea ca Calendly să modifice modul în care a fost implementat, astfel încât să nu fie atât de tehnic. Ar fi grozav dacă ați putea doar să aveți o clasă și apoi să utilizați href de destinație pentru a încărca widget-ul. Acest lucru ar necesita mai puțină codificare directă între sistemele de management al conținutului. Dar... este un instrument grozav (deocamdată!). De exemplu – un plugin WordPress cu coduri scurte ar fi ideal pentru un mediu WordPress. Dacă ești interesat, Calendly... Aș putea construi cu ușurință asta pentru tine!

Începeți cu Calendly

Disclaimer: Sunt un utilizator Calendly și, de asemenea, un afiliat pentru sistemul lor. Acest articol are link-uri afiliate pe tot parcursul articolului.