Calendly: Kako vdelati pojavno okno za načrtovanje ali vdelani koledar na vaše spletno mesto ali spletno mesto WordPress

Pripomoček za razporejanje Calendly

Pred nekaj tedni sem bil na spletnem mestu in opazil, ko sem kliknil povezavo, da se dogovorim za sestanek z njimi, da nisem bil pripeljan na ciljno spletno mesto, tam je bil pripomoček, ki je objavil Calendly planer neposredno v pojavnem oknu. To je odlično orodje ... obdržati nekoga na vašem spletnem mestu je veliko boljša izkušnja kot posredovanje na zunanjo stran.

Kaj je Calendly?

Calendly se integrira neposredno z vašim Googlov delovni prostor ali drug koledarski sistem za izdelavo obrazcev za razporejanje, ki so lepi in enostavni za uporabo. Najboljše od vsega je, da lahko celo omejite čas, ko dovolite, da se nekdo poveže z vami v vašem koledarju. Na primer, pogosto imam na voljo le nekaj ur na določene dneve za zunanje sestanke.

Uporaba takšnega načrtovalnika je tudi veliko boljša izkušnja kot samo izpolnjevanje obrazca. Za moj svetovalno podjetje za digitalno preobrazbo, imamo skupinske prodajne dogodke, kjer je na sestanku vodstvena ekipa. V Calendly integriramo tudi našo spletno platformo za srečanja, tako da koledarska povabila vključujejo vse povezave do spletnih srečanj.

Calendly je uvedel skript pripomočka in slogovno tabelo, ki odlično vgrajuje obrazec za razporejanje neposredno na stran, ki se odpre z gumbom ali celo s plavajočim gumbom v nogi vašega spletnega mesta. Skript za Calendly je dobro napisan, vendar dokumentacija za njegovo integracijo v vaše spletno mesto sploh ni dobra. Pravzaprav sem presenečen, da Calendly še ni objavil lastnih vtičnikov ali aplikacij za različne platforme.

To je neverjetno uporabno. Ne glede na to, ali ste v domačih storitvah in želite svojim strankam zagotoviti način, da se dogovorijo za sestanek, sprehajalca psov, podjetje SaaS, ki želi, da obiskovalci načrtujejo predstavitev, ali velika korporacija z več člani, ki jo morate preprosto načrtovati ... Calendly in vdelani pripomočki so odlično samopostrežno orodje.

Kako Calendly vdelati v svoje spletno mesto

Nenavadno je, da boste na teh vdelah našli le navodila na Vrsta dogodka ravni in ne dejanske ravni dogodka v vašem računu Calendly. Kodo boste našli v spustnem meniju za nastavitve vrste dogodka v zgornjem desnem kotu.

calendly embed

Ko kliknete to, boste videli možnosti za vrste vdelav:

vdelaj pojavno besedilo

Če zgrabite kodo in jo vdelate kamor koli želite na svoje spletno mesto, obstaja nekaj težav.

  • Če želite poklicati nekaj različnih pripomočkov na eni strani ... morda imate gumb, ki zažene načrtovalnik (pojavno besedilo) in gumb za nogo (pojavni pripomoček) ... boste dodali slogovno tabelo in skriptirali nekaj časov. To je nepotrebno.
  • Klicanje zunanje datoteke skripta in slogovne datoteke na vašem spletnem mestu ni najbolj optimalen način za dodajanje storitve na vaše spletno mesto.

Moje priporočilo bi bilo, da naložite slogovno tabelo in Javascript v svojo glavo ... nato uporabite druge pripomočke, kjer so smiselni na vašem spletnem mestu.

Kako delujejo pripomočki Calendly

Calendly ima dve datoteki, ki sta potrebni za vdelavo v vaše spletno mesto, slogovno tabelo in javascript. Če jih boste vstavili na svoje spletno mesto, bi v razdelek z glavo vašega HTML-ja dodal naslednje:

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

Vendar, če ste v WordPressu, bi bila najboljša praksa, da uporabite svoj functions.php datoteko za vstavljanje skriptov z uporabo najboljših praks WordPressa. Torej, v svoji otroški temi imam naslednje vrstice kode za nalaganje slogovne tabele in skripta:

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

To bo naložilo te (in jih predpomnilo) po vsem mojem spletnem mestu. Zdaj lahko uporabljam pripomočke, kjer jih želim.

Calendlyjev gumb za nogo

Na svojem spletnem mestu želim poklicati določen dogodek in ne vrsto dogodka, zato v nogo nalagam naslednji skript:

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

Videli boste Calendly skript je razčlenjen na naslednji način:

  • URL – natančen dogodek, ki ga želim naložiti v svoj pripomoček.
  • Besedilo – besedilo, ki ga želim imeti na gumbu.
  • Barva – barva ozadja gumba.
  • barva besedila – barva besedila.
  • blagovne znamke – odstranitev blagovne znamke Calendly.

Pojavno okno za besedilo Calendlyja

Želim tudi, da je to na voljo na celotnem mojem spletnem mestu prek povezave ali gumba. Če želite to narediti, uporabite dogodek onClick v vašem Calendly sidrno besedilo. Moj ima dodatne razrede za prikaz kot gumb (ni viden v spodnjem primeru):

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

To sporočilo lahko uporabite za več ponudb na eni strani. Morda imate 3 vrste dogodkov, ki jih želite vdelati ... samo spremenite URL za ustrezen cilj in bo delovalo.

Calendlyjevo vgrajeno pojavno okno za vdelavo

Inline embed je nekoliko drugačen v tem, da uporablja div, ki ga posebej kliče razred in cilj.

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

Ponovno je to uporabno, ker imate lahko več divjev z vsakim Calendly planer na isti strani.

Stranska opomba: Želim si, da bi Calendly spremenil način implementacije, tako da ne bi bilo treba biti tako tehnični. Super bi bilo, če bi imeli le razred in nato uporabili ciljni href za nalaganje pripomočka. To bi zahtevalo manj neposrednega kodiranja v sistemih za upravljanje vsebin. Ampak… to je odlično orodje (zaenkrat!). Na primer – vtičnik WordPress s kratkimi kodami bi bil idealen za okolje WordPress. Če te zanima, Calendly... To bi zlahka sestavil zate!

Začnite uporabljati Calendly

Izjava o omejitvi odgovornosti: Sem uporabnik Calendlyja in tudi podružnica njihovega sistema. Ta članek ima partnerske povezave v celotnem članku.