Calendly: Cumu Incrustà un Popup di Scheduling o un calendariu incrustatu in u vostru situ web o WordPress

Widget di Scheduling Calendly

Uni pochi settimane fà, eru in un situ è ​​aghju nutatu quandu aghju clicatu un ligame per programà un appuntamentu cun elli chì ùn era micca purtatu à un situ di destinazione, ci era un widget chì publicava u Calendly scheduler direttamente in una finestra popup. Questu hè un grande strumentu ... mantene qualcunu nantu à u vostru situ hè una sperienza assai megliu cà di rinvià à una pagina esterna.

Cosa hè Calendly?

Calendly integra direttamente cù u vostru Spaziu di travagliu di Google o un altru sistema di calendariu per custruisce forme di pianificazione chì sò sia belle è faciule d'utilizà. U megliu di tuttu, pudete ancu limità u tempu chì lasciate qualcunu cunnetta cun voi in u vostru calendariu. Per esempiu, aghju spessu solu un paru d'ore dispunibili in ghjorni specifichi per riunioni esterne.

Aduprà un pianificatore cum'è questu hè ancu una sperienza assai megliu cà solu cumpiendu un furmulariu. Per u mo cumpagnia di cunsulenza di trasfurmazioni digitale, avemu avvenimenti di vendita di gruppu induve a squadra di dirigenza hè in a riunione. Integremu ancu a nostra piattaforma di riunione web in Calendly per chì l'inviti di u calendariu includenu tutti i ligami di riunioni in linea.

Calendly hà lanciatu un script di widget è un fogliu di stile chì face un grande travagliu per incrustà a forma di pianificazione direttamente in una pagina, aperta da un buttone, o ancu da un buttone flottante in u footer di u vostru situ. U script per Calendly hè scrittu bè, ma a documentazione per integrà in u vostru situ ùn hè micca bè. In fatti, sò sorpresu chì Calendly hà ancu publicatu i so propiu plugins o app per e diverse piattaforme.

Questu hè incredibilmente utile. Sia chì site in servizii di casa è vulete furnisce un mezzu per i vostri clienti per programà u so appuntamentu, un camminatore di cani, una cumpagnia SaaS chì vole chì i visitatori programanu una demo, o una grande corporazione cù parechji membri chì avete bisognu di pianificà facilmente ... Calendly è i widgets incrustati sò un grande strumentu di self-service.

Cumu incrustà Calendly in u vostru situ

Stranamente, truverete solu indicazioni nantu à questi incrustati à u Type de event livellu è micca u livellu di l'avvenimentu propiu in u vostru contu Calendly. Truverete u codice in u dropdown per i paràmetri di u tipu d'avvenimentu in cima à diritta.

incrustà calendly

Una volta cliccate quì, vi vede l'opzioni per i tipi di incrustazioni:

incrustà u testu popup

Se pigliate u codice è l'incrustate induve vulete nantu à u vostru situ, ci sò qualchi prublemi.

  • Se vulete chjamà un paru di widgets diffirenti in una sola pagina ... forse avete un buttone chì lancia u pianificatore (Testo Popup) è ancu u buttone di piè di pagina (Widget Popup) ... andate à aghjunghje u fogliu di stile è script un paru. di i tempi. Ùn hè micca necessariu.
  • Chjamate un script esternu è un schedariu di foglia di stile in linea in u vostru situ ùn hè micca u mezzu più ottimu per aghjunghje u serviziu à u vostru situ.

A mo ricunniscenza seria di carricà u fogliu di stile è Javascript in u vostru header ... dopu utilizate l'altri widgets induve anu sensu in u vostru situ.

Cumu funziona i widgets di Calendly

Calendly hà dui schedari chì sò necessarii per incrustà in u vostru situ, una foglia di stile è javascript. Sè avete da inserisce questi in u vostru situ, aghju aghjunghje i seguenti in a sezione di capu di u vostru 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, sè site in WordPress, a megliu pratica seria di utilizà u vostru functions.php file per inserisce i scripts utilizendu e migliori pratiche di WordPress. Allora, in u tema di u mo figliolu, aghju e seguenti linee di codice per carricà u fogliu di stile è u 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' );

Chì hà da carricà questi (è cache) in tuttu u mo situ. Avà possu aduprà i widgets induve mi piacerebbe.

Pulsante Footer di Calendly

Vogliu chjamà l'avvenimentu specificu piuttostu cà u tipu di l'avvenimentu nantu à u mo situ, cusì cargu u script seguente in u mo footer:

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

Vedite u Calendly script si sparghje cusì:

  • URL - l'avvenimentu esattu chì vogliu carricà in u mo widget.
  • Testu - u testu chì vogliu avè u buttone.
  • Color - u culore di fondo di u buttone.
  • culore di testu - u culore di u testu.
  • Branding - caccià a marca Calendly.

Popup di testu di Calendly

Vogliu ancu questu dispunibule in tuttu u mo situ cù un ligame o buttone. Per fà questu, utilizate un avvenimentu onClick in u vostru Calendly testu di ancora. U mio hà classi supplementari per vede cum'è un buttone (micca vistu in l'esempiu sottu):

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

Stu missaghju pò esse usatu per avè parechje offerte in una sola pagina. Forse avete 3 tippi d'avvenimenti chì vulete incrustà ... solu mudificà l'URL per a destinazione adatta è funziona.

Popup d'incorporazione in linea di Calendly

L'incrustazione in linea hè un pocu sfarente in quantu utilizeghja un div chì hè specificamente chjamatu per classa è destinazione.

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

In novu, questu hè utile perchè pudete avè parechje divs cù ognunu Calendly scheduler in a stessa pagina.

Nota laterale: Vogliu chì Calendly hà mudificatu a manera chì hè stata implementata per ùn avè micca bisognu di esse cusì tecnicu. Saria fantastico se puderebbe solu avè una classa è dopu aduprà u href di destinazione per carricà u widget. Chì averia bisognu di codificazione menu diretta in i sistemi di gestione di cuntenutu. Ma ... hè un grande strumentu (per avà!). Per esempiu - un plugin di WordPress cù shortcodes seria ideale per un ambiente WordPress. Sè vo site interessatu, Calendly... Puderaghju facilmente custruisce questu per voi!

Cumincià cù Calendly

Disclaimer: Sò un utilizatore di Calendly è ancu un affiliatu per u so sistema. Questu articulu hà ligami affilati in tuttu l'articulu.