Calendly: як убудаваць ўсплывальнае акно планавання або ўбудаваны каляндар на свой сайт або сайт WordPress

Віджэт Calendly Scheduling Widget

Некалькі тыдняў таму я быў на сайце і заўважыў, калі націснуў на спасылку, каб запланаваць сустрэчу з імі, што мяне не прывезлі на сайт прызначэння, быў віджэт, які апублікаваў Calendly планавальнік непасрэдна ва ўсплываючым акне. Гэта выдатны інструмент... захаваць кагосьці на вашым сайце значна лепш, чым перанакіраваць іх на знешнюю старонку.

Што такое Calendly?

Calendly інтэгруецца непасрэдна з вашым Google Workspace або іншую сістэму календара для стварэння прыгожых і простых у выкарыстанні формаў раскладу. Лепш за ўсё, вы нават можаце абмежаваць час, калі вы дазваляеце камусьці звязвацца з вамі ў вашым календары. Напрыклад, у мяне часта ёсць толькі некалькі гадзін у пэўныя дні для выязных сустрэч.

Выкарыстанне такога планавальніка таксама значна лепш, чым проста запаўненне формы. Для майго кансалтынгавая фірма па лічбавай трансфармацыі, у нас праводзяцца групавыя мерапрыемствы па продажах, на якіх прысутнічае каманда кіраўніцтва. Мы таксама інтэгруем нашу вэб-платформу для сустрэч у 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>

Зноў жа, гэта карысна, таму што вы можаце мець некалькі div з кожным Calendly планавальнік на той жа старонцы.

Заўвага: я хацеў бы, каб Calendly змяніў спосаб рэалізацыі гэтага, каб гэта не павінна было быць такім тэхнічным. Было б выдатна, калі б вы маглі проста мець клас, а затым выкарыстоўваць мэта прызначэння href для загрузкі віджэта. Гэта запатрабуе менш прамога кадавання ў сістэмах кіравання кантэнтам. Але... гэта выдатны інструмент (пакуль!). Напрыклад - убудова WordPress з шорткодамі ідэальна падыдзе для асяроддзя WordPress. Калі вы зацікаўлены, Calendly... Я мог бы лёгка пабудаваць гэта для вас!

Пачніце з Calendly

Адмова ад адказнасці: я з'яўляюся карыстальнікам Calendly, а таксама з'яўляюся філіялам іх сістэмы. У гэтым артыкуле ёсць партнёрскія спасылкі па ўсім артыкуле.