Calendly: Како да вградите скокачки прозорец за распоред или вграден календар на вашата веб-страница или страница на WordPress

Додаток за закажување календли

Пред неколку недели, бев на една локација и забележав кога кликнав на врската за да закажам состанок со нив дека не ме доведоа до дестинација, имаше графичка контрола што ја објави Calendly распоредувач директно во скокачки прозорец. Ова е одлична алатка... задржувањето некого на вашата страница е многу подобро искуство отколку да го препраќате на надворешна страница.

Што е Calendly?

Calendly се интегрира директно со вашиот Работно место на Google или друг систем за календари за да се изградат формулари за закажување кои се и убави и лесни за употреба. Најдобро од сè, можете дури и да го ограничите времето кога ќе дозволите некој да се поврзе со вас во вашиот календар. Како пример, често имам само неколку часа на располагање во одредени денови за надворешни состаноци.

Користењето на распоредувач како овој е исто така многу подобро искуство отколку само пополнување формулар. За мојот консултантска фирма за дигитална трансформација, имаме групни продажни настани каде што лидерскиот тим е на состанокот. Ние, исто така, ја интегрираме нашата веб-платформа за состаноци во Calendly, така што поканите за календарот ги вклучуваат сите линкови за онлајн состаноци.

Calendly лансираше скрипта за виџети и лист со стилови што одлично ја вградува формата за закажување директно во страница, отворена од копче или дури и од лебдечко копче во подножјето на вашата страница. Скриптата за Calendly е добро напишана, но документацијата за да ја интегрирате во вашата страница воопшто не е добра. Всушност, изненаден сум што Calendly допрва треба да објави свои приклучоци или апликации за различни платформи.

Ова е неверојатно корисно. Без разлика дали сте во домашни услуги и сакате да обезбедите средства за вашите клиенти да закажат состанок, шетач на кучиња, компанија SaaS која сака посетителите да закажат демо или голема корпорација со повеќе членови што треба лесно да ги закажете… Calendly а додатоците за вградување се одлична алатка за самопослужување.

Како да се вметне Calendly во вашата страница

Чудно, ќе најдете насоки само на овие вградувања на Тип на настан ниво, а не вистинското ниво на настан во вашата сметка на Calendly. Кодот ќе го најдете во паѓачкото мени за поставките за типот на настанот горе десно.

calendly вградуваат

Откако ќе кликнете на тоа, ќе ги видите опциите за видовите вградувања:

вметнете скокачки текст

Ако го земете кодот и го вградите каде и да сакате на вашата страница, има неколку проблеми.

  • Ако сакате да повикате неколку различни графички контроли на една страница... можеби имате копче што го стартува распоредувачот (Текст во скокање), како и копчето за подножјето (програма за скокање)... ќе го додадете листот со стилови и неколку скрипти на пати. Тоа е непотребно.
  • Повикувањето на надворешна скрипта и датотека со стилски лист на вашата страница не е најоптималното средство за додавање на услугата на вашата страница.

Моја препорака би била да ги вчитате листот за стилови и Javascript во вашето заглавие... потоа користете ги другите графички контроли каде што имаат смисла низ вашата страница.

Како функционираат виџетите на Calendly

Calendly има две датотеки што се потребни за да се вградат во вашата страница, лист со стилови и Javascript. Ако сакате да ги вметнете овие во вашата страница, би го додала следново во главниот дел од вашиот 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 – точниот настан што сакам да го вчитам во мојот додаток.
  • Текст – текстот што сакам да го има копчето.
  • Боја – бојата на позадината на копчето.
  • текст Боја - бојата на текстот.
  • брендирање – отстранување на брендирањето 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>

Повторно, ова е корисно бидејќи можете да имате повеќекратни дивови со секое Calendly распоредувач на истата страница.

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

Започнете со Calendly

Одрекување: Јас сум корисник на Calendly и исто така партнер на нивниот систем. Оваа статија има придружни врски низ целата статија.