Цалендли: Како уградити искачући прозор за планирање или уграђени календар на вашу веб локацију или ВордПресс локацију

Цалендли Видгет за планирање

Пре неколико недеља, био сам на сајту и приметио сам када сам кликнуо на везу да закажем састанак са њима да нисам доведен на одредишни сајт, постојао је виџет који је објавио Цалендли планер директно у искачућем прозору. Ово је сјајна алатка... задржати некога на вашој веб локацији је много боље искуство од прослеђивања на спољну страницу.

Шта је Цалендли?

Цалендли се директно интегрише са вашим Гоогле Воркспаце или други систем календара за прављење образаца за планирање који су лепи и лаки за коришћење. Најбоље од свега, можете чак и да ограничите време које некоме дозвољавате да се повеже са вама у вашем календару. На пример, често имам на располагању само неколико сати одређеним данима за спољне састанке.

Коришћење оваквог планера је такође далеко боље искуство од пуког попуњавања обрасца. За мој konsultantska firma za digitalnu transformaciju, имамо групне продајне догађаје на којима је лидерски тим на састанку. Такође интегришемо нашу платформу за веб састанке у Цалендли тако да позивнице календара укључују све везе за састанке на мрежи.

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

Ово је невероватно корисно. Без обзира да ли сте у кућним услугама и желите да својим клијентима обезбедите начин да закажу свој термин, шетача паса, СааС компанију која жели да посетиоци закажу демо или велику корпорацију са више чланова коју морате лако да закажете… Цалендли а уграђени виџети су одличан алат за самопослуживање.

Како уградити Цалендли на своју веб локацију

Чудно, само ћете наћи упутства на овим уграђеним елементима на Тип догађаја ниво, а не стварни ниво догађаја у оквиру вашег Цалендли налога. Пронаћи ћете код у падајућем менију за подешавања типа догађаја у горњем десном углу.

цалендли ембед

Када кликнете на то, видећете опције за типове уграђивања:

угради искачући текст

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

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

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

Како функционишу Цалендлијеви виџети

Цалендли има две датотеке које су потребне за уградњу у ваш сајт, листу стилова и јавасцрипт. Ако ћете ово да убаците у свој сајт, додао бих следеће у одељак заглавља вашег ХТМЛ-а:

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

Међутим, ако сте у ВордПресс-у, најбоља пракса би била да користите свој фунцтионс.пхп датотеку да бисте уметнули скрипте користећи најбоље праксе ВордПресс-а. Дакле, у мојој дечјој теми, имам следеће линије кода за учитавање стилова и скрипте:

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

То ће их учитати (и кеширати) на целој мојој веб локацији. Сада могу да користим виџете тамо где желим.

Цалендлијево дугме за подножје

Желим да позовем одређени догађај, а не тип догађаја на свом сајту, тако да учитавам следећу скрипту у подножје:

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

Видећете Цалендли скрипта се разлаже на следећи начин:

  • УРЛ адреса – тачан догађај који желим да учитам у свој виџет.
  • текст – текст који желим да дугме има.
  • boja – боја позадине дугмета.
  • тектЦолор - боја текста.
  • брендирање – уклањање бренда Цалендли.

Цалендли'с Тект Попуп

Такође желим да ово буде доступно на целој мојој веб локацији помоћу везе или дугмета. Да бисте то урадили, користите догађај онЦлицк у свом Цалендли сидро текст. Мој има додатне класе да га прикаже као дугме (не види се у примеру испод):

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

Ова порука се може користити за више понуда на једној страници. Можда имате 3 врсте догађаја које желите да уградите… само измените УРЛ за одговарајуће одредиште и то ће функционисати.

Цалендли-јев искачући прозор за уграђивање у линију

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

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

Опет, ово је корисно јер можете имати више дивова са сваким Цалендли планер на истој страници.

Напомена: Волео бих да Цалендли измени начин на који је ово имплементирано тако да не мора да буде толико технички. Било би сјајно када бисте могли само да имате класу, а затим користите одредишни хреф за учитавање виџета. То би захтевало мање директног кодирања у системима за управљање садржајем. Али... то је одличан алат (за сада!). На пример – ВордПресс додатак са кратким кодовима би био идеалан за ВордПресс окружење. Ако си заинтересован, Цалендли... Лако бих могао да направим ово за тебе!

Започните са Цалендли

Изјава о одрицању одговорности: Ја сам корисник Цалендли-а, а такође и партнер њиховог система. Овај чланак има партнерске везе у целом чланку.