Content MarketingCRM a dátové platformyEmail Marketing & AutomatizáciaEvent marketingMarketingové a predajné videámarketingové nástrojePovolenie predaja

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.

calendly vložiť

Keď na to kliknete, zobrazia sa možnosti pre typy vloženia:

vložiť vyskakovací text

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

Začnite s Calendly

Douglas Karr

Douglas Karr je CMO OpenINSIGHTS a zakladateľ spoločnosti Martech Zone. Douglas pomohol desiatkam úspešných startupov MarTech, asistoval pri due diligence v hodnote viac ako 5 miliárd dolárov v akvizíciách a investíciách Martech a naďalej pomáha spoločnostiam pri implementácii a automatizácii ich predajných a marketingových stratégií. Douglas je medzinárodne uznávaný odborník na digitálnu transformáciu a MarTech a rečník. Douglas je tiež publikovaným autorom príručky Dummie a knihy obchodného vedenia.

súvisiace články

Tlačidlo späť nahor
Zavrieť

Zistený blok reklám

Martech Zone vám tento obsah môže poskytnúť bezplatne, pretože naše stránky speňažujeme prostredníctvom príjmov z reklám, pridružených odkazov a sponzorstiev. Ocenili by sme, keby ste pri prezeraní našej stránky odstránili blokovanie reklám.