Calendly: Ki jan yo entegre yon popup orè oswa kalandriye entegre nan sit entènèt ou oswa sit WordPress

Calendly Orè Widget

Kèk semèn de sa, mwen te sou yon sit epi mwen te remake lè mwen klike sou yon lyen pou pran yon randevou avèk yo ke mwen pa te mennen nan yon sit destinasyon, te gen yon widget ki pibliye a. Kalandriye pwogramè dirèkteman nan yon fenèt popup. Sa a se yon gwo zouti ... kenbe yon moun sou sit ou a se yon eksperyans pi bon pase voye yo nan yon paj ekstèn.

Ki sa ki Calendly?

Kalandriye entegre dirèkteman ak ou Google Espas Travay oswa lòt sistèm kalandriye pou konstwi fòm orè ki tou de bèl ak fasil pou itilize. Pi bon nan tout, ou ka menm limite tan an ke ou kite yon moun konekte avèk ou nan kalandriye ou. Kòm yon egzanp, mwen souvan gen sèlman yon koup èdtan ki disponib nan jou espesifik pou reyinyon ekstèn.

Sèvi ak yon pwogramè tankou sa a se tou yon eksperyans byen lwen pi bon pase jis ranpli yon fòm. Pou mwen konpayi konsiltasyon transfòmasyon dijital, nou gen evènman lavant gwoup kote ekip lidèchip la nan reyinyon an. Nou menm tou nou entegre platfòm reyinyon entènèt nou an nan Calendly pou envitasyon kalandriye yo gen ladan tout lyen reyinyon yo sou entènèt.

Calendly te lanse yon script widget ak stylesheet ki fè yon bon travay nan entegre fòm orè a dirèkteman nan yon paj, louvri nan yon bouton, oswa menm nan yon bouton k ap flote nan pye sit ou a. Script pou Calendly ekri byen, men dokimantasyon pou entegre li nan sit ou a pa bon ditou. An reyalite, mwen sezi ke Calendly poko pibliye grefon pwòp li yo oswa aplikasyon pou diferan tribin.

Sa a se ekstrèmman itil. Kit ou nan sèvis lakay ou epi ou vle bay yon mwayen pou kliyan ou yo pran randevou yo, yon chen walker, yon konpayi SaaS ki vle vizitè yo pwograme yon demonstrasyon, oswa yon gwo sosyete ki gen plizyè manm ou bezwen fasil pwograme ... Calendly ak widgets entegre yo se yon gwo zouti oto-sèvis.

Ki jan yo entegre Calendly nan sit ou a

Etranj, ou pral sèlman jwenn direksyon sou sa yo embed nan la Kalite Evènman nivo epi pa nivo evènman aktyèl la nan kont Calendly ou a. Ou pral jwenn kòd la nan deroule a pou anviwònman yo nan kalite evènman an sou tèt dwat.

calendly embed

Yon fwa ou klike sou sa, ou pral wè opsyon ki genyen pou kalite embeds yo:

entegre tèks popup

Si ou pwan kòd la epi entegre li nenpòt kote ou ta renmen sou sit ou a, gen kèk pwoblèm.

  • Si ou vle rele yon koup diferan widgets sou yon sèl paj... petèt gen yon bouton ki lanse pwogramè a (Popup Text) kòm byen ke bouton an footer (Popup Widget) ... w ap ale nan ajoute Stylesheet la ak script yon koup. de fwa. Sa pa nesesè.
  • Rele yon script ekstèn ak fichye stylesheet nan liy nan sit ou a se pa mwayen ki pi optimal pou ajoute sèvis la sou sit ou a.

Rekòmandasyon mwen ta dwe chaje stylesheet la ak Javascript nan header ou ... Lè sa a, sèvi ak lòt widgets yo kote yo fè sans nan tout sit ou a.

Kijan Widgets Calendly yo travay

Kalandriye gen de dosye ki nesesè yo entegre nan sit ou a, yon stylesheet ak javascript. Si w pral mete sa yo nan sit ou a, mwen ta ajoute sa ki annapre yo nan seksyon tèt HTML ou a:

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

Sepandan, si w ap nan WordPress, pi bon pratik la ta dwe sèvi ak ou functions.php dosye pou mete scripts yo itilize pi bon pratik WordPress yo. Se konsa, nan tèm pitit mwen an, mwen gen liy sa yo nan kòd yo chaje fèy style la ak 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' );

Sa a pral chaje sa yo (ak kachèt yo) nan tout sit mwen an. Koulye a, mwen ka itilize widgets yo kote mwen ta renmen yo.

Bouton Footer Calendly a

Mwen vle rele evènman an espesifik olye ke kalite evènman an sou sit mwen an, kidonk mwen ap chaje script sa a nan pye mwen an:

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

Ou pral wè la Kalandriye script kraze jan sa a:

  • URL – evènman an egzak mwen vle chaje nan widget mwen an.
  • Tèks – tèks la ke mwen vle bouton an genyen.
  • Koulè - koulè background nan bouton an.
  • textColor - koulè tèks la.
  • Branding – retire mak Calendly la.

Popup tèks Calendly a

Mwen vle tou sa a disponib nan tout sit mwen an lè l sèvi avèk yon lyen oswa bouton. Pou fè sa, ou itilize yon evènman onClick nan ou Kalandriye tèks jete lank. Mwen gen lòt klas pou montre li kòm yon bouton (pa wè nan egzanp ki anba a):

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

Mesaj sa a ka itilize pou gen plizyè ofrann sou yon sèl paj. Petèt ou gen 3 kalite evènman ou ta renmen entegre ... jis modifye URL la pou destinasyon ki apwopriye a epi li pral travay.

Popup Inline Inline Calendly a

Inline embed la se yon ti kras diferan nan ke li itilize yon div ki espesyalman rele pa klas ak destinasyon.

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

Ankò, sa a itil paske ou ka gen plizyè div ak chak Kalandriye pwogramè nan menm paj la.

Nòt bò: Mwen swete Calendly modifye fason sa a te aplike pou li pa t 'gen pou teknik konsa. Li ta gwo si ou ta ka jis gen yon klas ak Lè sa a, itilize href destinasyon an chaje widget la. Sa ta mande mwens kodaj dirèk atravè sistèm jesyon kontni. Men... li se yon gwo zouti (pou kounye a!). Pou egzanp - yon Plugin WordPress ak shortcodes ta ideyal pou yon anviwònman WordPress. Si w enterese, Calendly... Mwen ta ka fasilman bati sa a pou ou!

Kòmanse ak Calendly

Limit responsabilite nou: Mwen se yon itilizatè nan Calendly epi tou yon afilye pou sistèm yo. Atik sa a gen lyen afilye atravè atik la.