Calendly: Ako vložiť vyskakovacie okno plánovania alebo vložený kalendár na svoj web alebo web WordPress
Pred niekoľkými týždňami som bol na stránke a všimol som si, že keď som klikol na odkaz na naplánovanie stretnutia s nimi, nebol som privedený na cieľovú stránku, bola tam miniaplikácia, ktorá zverejnila Calendly plánovač priamo vo vyskakovacom okne. Je to skvelý nástroj... udržanie niekoho na vašom webe je oveľa lepší zážitok, ako jeho presmerovanie na externú stránku.
Čo je Calendly?
Calendly integruje sa priamo s vašou Pracovný priestor Google alebo iný kalendárový systém na vytváranie plánovacích formulárov, ktoré sú krásne a ľahko sa používajú. Najlepšie na tom je, že môžete dokonca obmedziť, kedy niekomu umožníte, aby sa s vami spojil vo svojom kalendári. Napríklad, často mám v konkrétne dni k dispozícii len pár hodín na externé stretnutia.
Používanie takéhoto plánovača je tiež oveľa lepší zážitok ako len vypĺňanie formulára. Pre môj poradenská spoločnosť v oblasti digitálnej transformácie, máme skupinové predajné akcie, na ktorých je na stretnutí vedúci tím. Do Calendly tiež integrujeme našu platformu webových stretnutí, takže pozvánky v kalendári obsahujú všetky odkazy na online stretnutia.
Spoločnosť Calendly spustila skript miniaplikácie a šablónu so štýlmi, ktoré odvádzajú skvelú prácu pri vkladaní formulára plánovania priamo na stránku, otvára sa pomocou tlačidla alebo dokonca z plávajúceho tlačidla v päte vašej lokality. Skript pre Calendly je napísaný dobre, ale dokumentácia na jeho integráciu do vašej stránky nie je vôbec dobrá. V skutočnosti som prekvapený, že Calendly ešte nezverejnilo svoje vlastné doplnky alebo aplikácie pre rôzne platformy.
To je neuveriteľne užitočné. Či už ste v službách pre domácnosť a chcete svojim zákazníkom poskytnúť prostriedky na naplánovanie si stretnutia, psíčkar, spoločnosť SaaS, ktorá chce, aby si návštevníci naplánovali ukážku, alebo veľká spoločnosť s viacerými členmi, ktorú potrebujete jednoducho naplánovať... Calendly a vložené widgety sú skvelým samoobslužným nástrojom.
Ako vložiť Calendly na vašu stránku
Je zvláštne, že pokyny nájdete iba na týchto vložených na Typ udalosti úroveň a nie úroveň skutočnej udalosti vo vašom účte Calendly. Kód nájdete v rozbaľovacej ponuke pre nastavenia typu udalosti vpravo hore.
Keď na to kliknete, zobrazia sa možnosti pre typy vloženia:
Ak vezmete kód a vložíte ho na ľubovoľné miesto na svojom webe, existuje niekoľko problémov.
- Ak chcete volať niekoľko rôznych miniaplikácií na jednej stránke... možno máte tlačidlo, ktoré spustí plánovač (vyskakovací text), ako aj tlačidlo päty (vyskakovacie miniaplikácie)... pridáte šablónu so štýlmi a pár skriptov časov. To je zbytočné.
- Zavolanie externého skriptu a súboru so štýlom vložený do vašej lokality nie je najoptimálnejším prostriedkom na pridanie služby na vašu lokalitu.
Moje odporúčanie by bolo načítať šablónu so štýlmi a JavaScript do hlavičky... a potom použiť ostatné miniaplikácie tam, kde na vašej stránke dávajú zmysel.
Ako fungujú widgety Calendly
Calendly má dva súbory, ktoré sú potrebné na vloženie do vašej lokality, šablónu so štýlmi a javascript. Ak ich chcete vložiť na svoju stránku, pridal by som do hlavičky kódu HTML nasledujúce:
<link href="https://calendly.com/assets/external/widget.css" rel="stylesheet">
<script src="https://calendly.com/assets/external/widget.js" type="text/javascript"></script>
Ak však používate WordPress, najlepším postupom by bolo použiť váš functions.php súbor na vloženie skriptov s využitím osvedčených postupov WordPress. Takže v mojej detskej téme mám nasledujúce riadky kódu na načítanie šablóny so štýlmi a skriptu:
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' );
Tým sa tieto načítajú (a uložia do vyrovnávacej pamäte) na celom mojom webe. Teraz môžem použiť widgety tam, kde ich chcem.
Calendlyho tlačidlo päty
Chcem na svojej stránke volať konkrétnu udalosť a nie typ udalosti, takže do päty načítavam nasledujúci skript:
<script type="text/javascript">window.onload = function() { Calendly.initBadgeWidget({ url: 'https://calendly.com/link', text: 'Schedule a Consultation', color: '#0069ff', textColor: '#ffffff', branding: false }); }</script>
Uvidíte Calendly skript sa rozdelí takto:
- URL – presná udalosť, ktorú chcem načítať do svojho widgetu.
- text – text, ktorý chcem, aby tlačidlo malo.
- Farba – farba pozadia tlačidla.
- textColor – farba textu.
- branding – odstránenie značky Calendly.
Vyskakovacie okno s textom Calendly
Chcem, aby to bolo dostupné na celom mojom webe pomocou odkazu alebo tlačidla. Ak to chcete urobiť, použite udalosť onClick vo svojom
Calendly kotviaci text. Moja má ďalšie triedy na zobrazenie ako tlačidlo (nie je vidieť v príklade nižšie):<a href="#" onclick="Calendly.initPopupWidget({url: 'https://calendly.com/link'});return false;">Schedule time with us</a>
Túto správu možno použiť na zobrazenie viacerých ponúk na jednej stránke. Možno máte 3 typy udalostí, ktoré by ste chceli vložiť... stačí upraviť URL pre príslušný cieľ a bude to fungovať.
Calendly's Inline Embed Popup
Inline vloženie je trochu iné v tom, že využíva div, ktorý sa špecificky volá podľa triedy a cieľa.
<div class="calendly-inline-widget" data-url="https://calendly.com/link" style="min-width:320px;height:630px;"></div>
Opäť je to užitočné, pretože s každým môžete mať viacero divov Calendly plánovač na tej istej stránke.
Vedľajšia poznámka: Prial by som si, aby Calendly upravil spôsob implementácie, aby to nemuselo byť také technické. Bolo by skvelé, keby ste mohli mať triedu a potom použiť cieľový href na načítanie miniaplikácie. To by vyžadovalo menej priameho kódovania v systémoch na správu obsahu. Ale... je to skvelý nástroj (zatiaľ!). Napríklad – doplnok WordPress so krátkymi kódmi by bol ideálny pre prostredie WordPress. Ak máte záujem, Calendly... ľahko by som vám to mohol postaviť!