Calendly: com inserir una finestra emergent de programació o un calendari incrustat al vostre lloc web o lloc de WordPress

Giny de programació de Calendly

Fa unes setmanes, estava en un lloc i em vaig adonar que quan vaig fer clic a un enllaç per programar una cita amb ells no em van portar a un lloc de destinació, hi havia un giny que publicava el Calendly planificador directament en una finestra emergent. Aquesta és una gran eina... mantenir algú al vostre lloc és una experiència molt millor que reenviar-lo a una pàgina externa.

Què és Calendly?

Calendly s'integra directament amb el teu Espai de treball de Google o un altre sistema de calendari per crear formularis de programació que siguin bonics i fàcils d'utilitzar. El millor de tot és que fins i tot podeu limitar el temps que deixeu que algú es connecti amb vosaltres al vostre calendari. Per exemple, sovint tinc només un parell d'hores disponibles en dies específics per a reunions externes.

L'ús d'un programador com aquest també és una experiència molt millor que simplement omplir un formulari. Per a mí Consultoria de transformació digital, tenim esdeveniments de vendes grupals on l'equip de direcció està a la reunió. També integrem la nostra plataforma de reunions web a Calendly perquè les invitacions del calendari incloguin tots els enllaços de reunions en línia.

Calendly ha llançat un script de widget i un full d'estil que fa un gran treball per incrustar el formulari de programació directament en una pàgina, obert des d'un botó o fins i tot des d'un botó flotant al peu de pàgina del vostre lloc. El guió de Calendly està ben escrit, però la documentació per integrar-lo al vostre lloc no és gens bona. De fet, em sorprèn que Calendly encara no hagi publicat els seus propis complements o aplicacions per a diferents plataformes.

Això és increïblement útil. Tant si esteu als serveis a domicili i voleu oferir als vostres clients un mitjà per programar la seva cita, un passejador de gossos, una empresa SaaS que vol que els visitants programin una demostració o una gran corporació amb diversos membres que necessiteu programar fàcilment... Calendly i els ginys incrustats són una gran eina d'autoservei.

Com incrustar Calendly al vostre lloc

Curiosament, només trobareu indicacions sobre aquestes incrustacions a la Tipus d'esdeveniment nivell i no el nivell d'esdeveniment real del vostre compte de Calendly. Trobareu el codi al menú desplegable per a la configuració del tipus d'esdeveniment a la part superior dreta.

incrustar calentment

Quan hi feu clic, veureu les opcions per als tipus d'insercions:

incrustar text emergent

Si agafeu el codi i l'incorporeu allà on vulgueu al vostre lloc, hi ha alguns problemes.

  • Si voleu trucar a un parell de ginys diferents en una sola pàgina... potser teniu un botó que iniciï el programador (Text emergent) així com el botó de peu de pàgina (Gny emergent)... afegireu el full d'estil i un script. de vegades. Això és innecessari.
  • Trucar un script extern i un fitxer d'estil en línia al vostre lloc no és el mitjà més òptim per afegir el servei al vostre lloc.

La meva recomanació seria carregar el full d'estil i el Javascript a la capçalera... i després utilitzar els altres ginys on tinguin sentit al vostre lloc.

Com funcionen els widgets de Calendly

Calendly té dos fitxers que es necessiten per incrustar al vostre lloc, un full d'estil i javascript. Si voleu inserir-los al vostre lloc, afegiria el següent a la secció de capçalera del vostre 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>

Tanmateix, si esteu a WordPress, la millor pràctica seria utilitzar el vostre functions.php fitxer per inserir els scripts utilitzant les millors pràctiques de WordPress. Per tant, al meu tema fill, tinc les següents línies de codi per carregar el full d'estil i l'script:

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

Això els carregarà (i els guardarà a la memòria cau) al meu lloc. Ara puc utilitzar els ginys allà on vull.

Botó de peu de pàgina de Calendly

Vull cridar l'esdeveniment específic en lloc del tipus d'esdeveniment al meu lloc, així que estic carregant el següent script al meu peu de pàgina:

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

Veureu el document Calendly l'script es divideix de la següent manera:

  • URL – l'esdeveniment exacte que vull carregar al meu giny.
  • Text – el text que vull que tingui el botó.
  • color – el color de fons del botó.
  • textColor - el color del text.
  • branding – eliminació de la marca Calendly.

La finestra emergent de text de Calendly

També vull que estigui disponible a tot el meu lloc mitjançant un enllaç o un botó. Per fer-ho, utilitzeu un esdeveniment onClick al vostre Calendly text d'ancoratge. El meu té classes addicionals per mostrar-lo com a botó (no es veu a l'exemple següent):

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

Aquest missatge es pot utilitzar per tenir diverses ofertes en una sola pàgina. Potser teniu 3 tipus d'esdeveniments que us agradaria incrustar... només cal que modifiqueu l'URL de la destinació adequada i funcionarà.

La finestra emergent d'inserció en línia de Calendly

La inserció en línia és una mica diferent, ja que utilitza un div que s'anomena específicament per classe i destinació.

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

De nou, això és útil perquè podeu tenir diversos divs amb cadascun Calendly planificador a la mateixa pàgina.

Nota lateral: m'agradaria que Calendly modifiqués la forma en què es va implementar perquè no hagués de ser tan tècnic. Seria fantàstic si només poguéssiu tenir una classe i després utilitzeu el href de destinació per carregar el giny. Això requeriria una codificació menys directa entre els sistemes de gestió de continguts. Però... és una gran eina (per ara!). Per exemple, un complement de WordPress amb codis curts seria ideal per a un entorn de WordPress. Si estàs interessat, Calendly... Podria crear-ho fàcilment per a tu!

Comenceu amb Calendly

Exempció de responsabilitat: sóc un usuari de Calendly i també un afiliat del seu sistema. Aquest article té enllaços d'afiliats a tot l'article.