Calendly: come incorporare un popup di pianificazione o un calendario incorporato nel tuo sito web o sito WordPress

Widget Pianificazione Calendaria

Qualche settimana fa, ero su un sito e ho notato quando ho fatto clic su un collegamento per fissare un appuntamento con loro che non ero stato portato a un sito di destinazione, c'era un widget che pubblicava il Calendly pianificatore direttamente in una finestra popup. Questo è un ottimo strumento... mantenere qualcuno sul tuo sito è un'esperienza molto migliore rispetto all'inoltro a una pagina esterna.

Cos'è Calendly?

Calendly si integra direttamente con il tuo Area di lavoro di Google o un altro sistema di calendario per creare moduli di pianificazione belli e facili da usare. Soprattutto, puoi anche limitare il tempo in cui consenti a qualcuno di connettersi con te sul tuo calendario. Ad esempio, spesso ho a disposizione solo un paio d'ore in giorni specifici per riunioni esterne.

L'utilizzo di uno scheduler come questo è anche un'esperienza molto migliore rispetto alla semplice compilazione di un modulo. Per me società di consulenza per la trasformazione digitale, abbiamo eventi di vendita di gruppo in cui il team di leadership partecipa alla riunione. Integriamo anche la nostra piattaforma per riunioni Web in Calendly in modo che gli inviti del calendario includano tutti i collegamenti alle riunioni online.

Calendly ha lanciato uno script widget e un foglio di stile che fa un ottimo lavoro nell'incorporare il modulo di pianificazione direttamente in una pagina, aperto da un pulsante o anche da un pulsante mobile nel piè di pagina del tuo sito. Lo script per Calendly è scritto bene, ma la documentazione per integrarlo nel tuo sito non è affatto buona. In effetti, sono sorpreso che Calendly non abbia ancora pubblicato i propri plug-in o app per piattaforme diverse.

Questo è incredibilmente utile. Che tu sia in servizi a domicilio e desideri fornire un mezzo ai tuoi clienti per programmare il loro appuntamento, un dog sitter, un'azienda SaaS che desidera che i visitatori programmino una demo o una grande azienda con più membri che devi pianificare facilmente... Calendly e i widget incorporati sono un ottimo strumento self-service.

Come incorporare Calendly nel tuo sito

Stranamente, troverai le indicazioni solo su questi incorporamenti al Tipo di evento livello e non il livello effettivo dell'evento all'interno del tuo account Calendly. Troverai il codice nel menu a tendina per le impostazioni del tipo di evento in alto a destra.

incorporare calendamente

Dopo aver fatto clic, vedrai le opzioni per i tipi di incorporamenti:

incorpora testo popup

Se prendi il codice e lo incorpori dove vuoi nel tuo sito, ci sono alcuni problemi.

  • Se vuoi chiamare un paio di widget diversi su una singola pagina... forse hai un pulsante che avvia lo scheduler (testo popup) e il pulsante del piè di pagina (widget popup)... dovrai aggiungere il foglio di stile e scrivere un paio di volte. Non è necessario.
  • Chiamare uno script esterno e un file di foglio di stile in linea nel tuo sito non è il mezzo ottimale per aggiungere il servizio al tuo sito.

Il mio consiglio è di caricare il foglio di stile e Javascript nell'intestazione... quindi utilizzare gli altri widget dove hanno senso in tutto il sito.

Come funzionano i widget di Calendly?

Calendly ha due file necessari per essere incorporati nel tuo sito, un foglio di stile e javascript. Se hai intenzione di inserirli nel tuo sito, aggiungerei quanto segue nella sezione principale del tuo 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>

Tuttavia, se sei in WordPress, la migliore pratica sarebbe quella di utilizzare il tuo functions.php file per inserire gli script utilizzando le migliori pratiche di WordPress. Quindi, nel mio tema figlio, ho le seguenti righe di codice per caricare il foglio di stile e lo 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' );

Questo li caricherà (e li memorizzerà nella cache) in tutto il mio sito. Ora posso usare i widget dove li vorrei.

Pulsante piè di pagina di Calendly

Voglio chiamare l'evento specifico piuttosto che il tipo di evento sul mio sito, quindi sto caricando il seguente script nel mio piè di pagina:

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

Vedrai il Calendly lo script si suddivide come segue:

  • URL – l'evento esatto che voglio caricare nel mio widget.
  • Testo – il testo che voglio che il pulsante abbia.
  • Colore – il colore di sfondo del pulsante.
  • colore del testo - il colore del testo.
  • marchio – rimozione del marchio Calendly.

Popup di testo di Calendly

Voglio anche che sia disponibile in tutto il mio sito utilizzando un collegamento o un pulsante. Per fare ciò, utilizzi un evento onClick nel tuo Calendly testo di ancoraggio. Il mio ha classi aggiuntive per visualizzarlo come un pulsante (non visto nell'esempio seguente):

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

Questo messaggio può essere utilizzato per avere più offerte su un'unica pagina. Forse hai 3 tipi di eventi che vorresti incorporare... modifica semplicemente l'URL per la destinazione appropriata e funzionerà.

Popup di incorporamento in linea di Calendly

L'incorporamento in linea è leggermente diverso in quanto utilizza un div chiamato specificamente per classe e destinazione.

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

Di nuovo, questo è utile perché puoi avere più div con ciascuno Calendly pianificatore nella stessa pagina.

Nota a margine: vorrei che Calendly modificasse il modo in cui è stato implementato in modo che non debba essere così tecnico. Sarebbe fantastico se potessi avere una classe e poi usare l' href di destinazione per caricare il widget. Ciò richiederebbe una codifica meno diretta tra i sistemi di gestione dei contenuti. Ma... è un ottimo strumento (per ora!). Ad esempio, un plug-in WordPress con shortcode sarebbe l'ideale per un ambiente WordPress. Se sei interessato, Calendly... potrei facilmente costruirlo per te!

Inizia con Calendly

Dichiarazione di non responsabilità: sono un utente di Calendly e anche un affiliato per il loro sistema. Questo articolo ha collegamenti di affiliazione in tutto l'articolo.