Calendly: Как да вградите изскачащ прозорец за планиране или вграден календар във вашия уебсайт или WordPress сайт

Приспособление за планиране Calendly

Преди няколко седмици бях в един сайт и забелязах, когато щракнах върху връзка, за да насрочя среща с тях, че не съм доведен до сайт за дестинация, имаше джаджа, която публикува Calendly планировчик директно в изскачащ прозорец. Това е страхотен инструмент... задържането на някого на вашия сайт е много по-добро изживяване, отколкото препращането му към външна страница.

Какво е Calendly?

Calendly се интегрира директно с вашия Работно пространство на Google или друга календарна система за създаване на формуляри за планиране, които са едновременно красиви и лесни за използване. Най-хубавото е, че можете дори да ограничите времето, през което позволявате на някого да се свърже с вас в календара ви. Като пример, често имам само няколко часа на разположение в определени дни за външни срещи.

Използването на планировчик като този също е много по-добро изживяване от простото попълване на формуляр. За моя консултантска фирма за дигитална трансформация, имаме групови събития за продажби, където лидерският екип е на срещата. Ние също така интегрираме нашата платформа за уеб срещи в Calendly, така че поканите в календара да включват всички връзки за онлайн срещи.

Calendly пусна скрипт за джаджи и таблица със стилове, които вършат страхотна работа при вграждането на формуляра за планиране директно в страница, отворена от бутон или дори от плаващ бутон в долния колонтитул на вашия сайт. Скриптът за Calendly е написан добре, но документацията за интегрирането му във вашия сайт изобщо не е добра. Всъщност съм изненадан, че Calendly все още не е публикувал свои собствени плъгини или приложения за различни платформи.

Това е невероятно полезно. Независимо дали сте в домашни услуги и искате да предоставите средства на клиентите си да планират срещата си, разходка на кучета, SaaS компания, която иска посетителите да планират демонстрация, или голяма корпорация с множество членове, вие трябва лесно да планирате... Calendly а вградените джаджи са чудесен инструмент за самообслужване.

Как да вградите Calendly във вашия сайт

Странно е, че ще намерите указания само в тези вградени в Тип на събитието ниво, а не действителното ниво на събитие във вашия акаунт в Calendly. Ще намерите кода в падащото меню за настройките на типа събитие горе вдясно.

calendly embed

След като щракнете върху него, ще видите опциите за видовете вграждания:

вграждане на изскачащ текст

Ако вземете кода и го вградите където пожелаете в сайта си, има няколко проблема.

  • Ако искате да извикате няколко различни джаджи на една страница... може би имате бутон, който стартира планировчика (Изскачащ текст), както и бутона за долния колонтитул (Изскачаща джаджа)... ще добавите таблицата със стилове и скриптовете за няколко от времена. Това е излишно.
  • Извикването на външен скрипт и файл със стилова таблица вградено във вашия сайт не е най-оптималното средство за добавяне на услугата към вашия сайт.

Моята препоръка би била да заредите таблицата със стилове и Javascript в заглавката си... след това да използвате другите джаджи там, където имат смисъл във вашия сайт.

Как работят джаджиите на Calendly

Calendly има два файла, които са необходими за вграждане във вашия сайт, стилова таблица и javascript. Ако ще ги вмъкнете в сайта си, бих добавил следното в секцията head на вашия HTML:

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

Въпреки това, ако сте в WordPress, най-добрата практика би била да използвате вашия functions.php файл, за да вмъкнете скриптовете, използвайки най-добрите практики на WordPress. И така, в моята детска тема имам следните редове код за зареждане на стиловата таблица и скрипта:

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

Това ще ги зареди (и ще ги кешира) в целия ми сайт. Сега мога да използвам джаджите там, където искам.

Бутон за долния колонтитул на Calendly

Искам да извикам конкретното събитие, а не типа събитие на моя сайт, така че зареждам следния скрипт в долния колонтитул:

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

Ще видите Calendly скриптът се разгражда, както следва:

  • URL – точното събитие, което искам да заредя в моята джаджа.
  • Текст – текстът, който искам да има бутонът.
  • Цвят – цветът на фона на бутона.
  • textColor – цвета на текста.
  • брандиране – премахване на марката Calendly.

Изскачащ прозорец за текст на Calendly

Също така искам това да е достъпно в моя сайт чрез връзка или бутон. За да направите това, използвате събитие onClick във вашия Calendly котвен текст. Моят има допълнителни класове, за да го покаже като бутон (не се вижда в примера по-долу):

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

Това съобщение може да се използва, за да има множество предложения на една страница. Може би имате 3 типа събития, които искате да вградите... просто променете URL адреса за подходящата дестинация и ще работи.

Изскачащият прозорец за вграждане на Calendly

Вграденото вграждане е малко по-различно, тъй като използва div, който е специално извикан от клас и дестинация.

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

Отново, това е полезно, защото можете да имате множество divs с всеки Calendly планировчик на същата страница.

Странична бележка: Иска ми се Calendly да промени начина, по който беше реализиран, така че да не трябва да е толкова технически. Би било чудесно, ако можете просто да имате клас и след това да използвате дестинацията href, за да заредите джаджата. Това ще изисква по-малко директно кодиране в системите за управление на съдържанието. Но... това е страхотен инструмент (засега!). Например – плъгин за WordPress с кратки кодове би бил идеален за среда на WordPress. Ако проявяваш интерес, Calendly... лесно мога да създам това за теб!

Започнете с Calendly

Отказ от отговорност: Аз съм потребител на Calendly, а също и филиал на тяхната система. Тази статия има партньорски връзки в цялата статия.