Calendly: Jak vložit vyskakovací okno plánování nebo vložený kalendář na váš web nebo web WordPress
Před několika týdny jsem byl na webu a všiml jsem si, že když jsem kliknul na odkaz, abych si s ním naplánoval schůzku, nebyl jsem přiveden na cílový web, byl tam widget, který publikoval Kalendář plánovač přímo ve vyskakovacím okně. Je to skvělý nástroj… udržet někoho na vašem webu je mnohem lepší zážitek, než ho přeposílat na externí stránku.
Co je Calendly?
Kalendář integruje přímo s vaším Pracovní prostor Google nebo jiný kalendářový systém pro vytváření plánovacích formulářů, které jsou krásné a snadno použitelné. Nejlepší na tom je, že můžete dokonce omezit dobu, po kterou se s vámi někdo může spojit ve vašem kalendáři. Například mám často jen pár hodin k dispozici v určité dny na externí schůzky.
Použití takového plánovače je také mnohem lepší zážitek než pouhé vyplňování formuláře. Pro mě poradenská společnost pro digitální transformaci, máme skupinové prodejní akce, kde je na schůzce vedoucí tým. Do Calendly také integrujeme naši webovou platformu pro schůzky, takže pozvánky v kalendáři obsahují všechny odkazy na online schůzky.
Společnost Calendly spustila skript widgetu a šablonu stylů, které skvěle fungují při vkládání formuláře plánování přímo na stránku, otevírají se pomocí tlačítka nebo dokonce z plovoucího tlačítka v zápatí vašeho webu. Skript pro Calendly je napsán dobře, ale dokumentace k jeho integraci do vašeho webu není vůbec dobrá. Vlastně mě překvapuje, že Calendly zatím nezveřejňuje své vlastní pluginy nebo aplikace pro různé platformy.
To je neuvěřitelně užitečné. Ať už jste ve službách pro domácnost a chcete svým zákazníkům poskytnout prostředky, jak si naplánovat schůzku, venčíte psy, společnost SaaS, která chce, aby si návštěvníci naplánovali ukázku, nebo velkou společnost s více členy, kterou potřebujete snadno naplánovat… Calendly a vkládací widgety jsou skvělým samoobslužným nástrojem.
Jak vložit Calendly na vaše stránky
Kupodivu najdete pokyny pouze na těchto vložení na adrese Typ události úroveň, nikoli úroveň skutečné události ve vašem účtu Calendly. Kód najdete v rozevíracím seznamu pro nastavení typu události vpravo nahoře.
Jakmile na to kliknete, zobrazí se možnosti pro typy vložení:
Pokud vezmete kód a vložíte jej kamkoli na svůj web, existuje několik problémů.
- Chcete-li na jedné stránce vyvolat několik různých widgetů... možná máte tlačítko, které spustí plánovač (vyskakovací text), stejně jako tlačítko zápatí (vyskakovací widget)... přidáte šablonu stylů a několik skriptů časů. To je zbytečné.
- Volání externího skriptu a souboru šablony stylů vložených do vašeho webu není nejoptimálnějším způsobem přidání služby na váš web.
Moje doporučení by bylo načíst šablonu stylů a Javascript do vaší hlavičky… a pak použít další widgety tam, kde dávají smysl na vašem webu.
Jak fungují widgety Calendly
Kalendář má dva soubory, které jsou potřeba k vložení do vašeho webu, šablonu stylů a javascript. Pokud je chcete vložit na svůj web, přidal bych do sekce head vašeho HTML následující:
<link href="https://calendly.com/assets/external/widget.css" rel="stylesheet">
<script src="https://calendly.com/assets/external/widget.js" type="text/javascript"></script>Pokud však používáte WordPress, nejlepším postupem by bylo použít váš functions.php soubor pro vložení skriptů využívajících osvědčené postupy WordPress. Takže v mém dětském tématu mám následující řádky kódu pro načtení šablony stylů 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' );To je načte (a uloží do mezipaměti) na mém webu. Nyní mohu widgety používat tam, kde je chci.
Calendlyho tlačítko zápatí
Chci na svém webu volat spíše konkrétní událost než typ události, takže do zápatí načítám následující 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>
Uvidíte Kalendář skript se rozloží následovně:
- URL – přesnou událost, kterou chci načíst do svého widgetu.
- Text – text, který chci, aby tlačítko mělo.
- Barva – barva pozadí tlačítka.
- textColor - barva textu.
- branding – odstranění značky Calendly.
Vyskakovací okno s textem Calendly
Také chci, aby to bylo dostupné na celém svém webu pomocí odkazu nebo tlačítka. Chcete-li to provést, použijte událost onClick ve svém Kalendář kotvící text. Moje má další třídy pro zobrazení jako tlačítka (není vidět v příkladu níže):
<a href="#" onclick="Calendly.initPopupWidget({url: 'https://calendly.com/highbridge-team/sales'});return false;">Schedule time with us</a>Tuto zprávu lze použít k zobrazení více nabídek na jedné stránce. Možná máte 3 typy událostí, které byste chtěli vložit… stačí upravit URL pro příslušný cíl a bude to fungovat.
Calendly's Inline Embed Popup
Inline vložení je trochu jiné v tom, že využívá div, který se specificky nazývá podle třídy a cíle.
<div class="calendly-inline-widget" data-url="https://calendly.com/highbridge-team/sales" style="min-width:320px;height:630px;"></div>Opět je to užitečné, protože s každým můžete mít více divů Kalendář plánovač na stejné stránce.
Vedlejší poznámka: Přál bych si, aby Calendly upravil způsob, jakým to bylo implementováno, aby to nemuselo být tak technické. Bylo by skvělé, kdybyste mohli mít jen třídu a poté použít cílový href k načtení widgetu. To by vyžadovalo méně přímého kódování napříč systémy pro správu obsahu. Ale… je to skvělý nástroj (prozatím!). Například – plugin WordPress se krátkými kódy by byl ideální pro prostředí WordPress. Pokud máš zájem, Calendly... snadno bych ti to sestavil!
Prohlášení: Jsem uživatelem Calendly a také přidruženým partnerem jejich systému. Tento článek obsahuje přidružené odkazy v celém článku.
