Calendly: Вебсайтыңызга же WordPress сайтыңызга пландаштырылган калкыма терезени же кыстарылган календарды кантип кыстаруу керек

Календардык пландоо виджети

Бир нече жума мурун мен бир сайтта болчумун жана алар менен жолугушууну пландаштыруу үчүн шилтемени чыкылдатканымда, мени көздөгөн сайтка алып келбегенимди байкадым. Calendly пландоочу түз калкыма терезеде. Бул эң сонун курал... кимдир-бирөөнү өз сайтыңызда кармап туруу, аларды тышкы баракка багыттоого караганда алда канча жакшы тажрыйба.

Календли деген эмне?

Calendly сиздин менен түздөн-түз биригет Google жумушчу мейкиндиги же кооз жана колдонууга оңой болгон график формаларын түзүү үчүн башка календарлык система. Эң жакшысы, календарыңызда кимдир бирөө сиз менен байланышууга уруксат берген убакытты да чектей аласыз. Мисал катары, менде көбүнчө тышкы жолугушуулар үчүн белгилүү бир күндөрдө бир-эки саат гана бош болот.

Бул сыяктуу пландаштыргычты колдонуу форманы толтурууга караганда алда канча жакшы тажрыйба. Менин үчүн санариптик трансформация боюнча консалтинг компаниясы, бизде лидерлик топ жолугушууда болгон топтук сатуу иш-чаралары бар. Календардык чакыруулар бардык онлайн жолугушуу шилтемелерин камтышы үчүн, биз веб-конференция платформабызды Calendly менен бириктиребиз.

Calendly виджет скриптин жана стилдер жадыбалын ишке киргизди, ал пландаштыруу формасын түздөн-түз бетке кыстарууда, баскычтан, жада калса сайтыңыздын төмөнкү колонтитулундагы калкып жүрүүчү баскычтан ачылган. Calendly үчүн сценарий жакшы жазылган, бирок аны сиздин сайтка интеграциялоо үчүн документтер такыр жакшы эмес. Чынында, мен Календли ар кандай платформалар үчүн өзүнүн плагиндерин же колдонмолорун жарыялай электигине таң калдым.

Бул укмуштуудай пайдалуу. Үй кызматтарында болуп жатасызбы жана кардарларыңызга жолугушууну пландаштыруу үчүн каражат бергиңиз келеби, ит сейилдөөчү, зыяратчылардын демонстрацияны пландаштыруусун каалаган SaaS компаниясы же бир нече мүчөлөрү бар ири корпорация, сиз оңой графикке ээ болушуңуз керек… Calendly жана кыстаруу виджеттери өзүн-өзү тейлөөнүн эң сонун куралы.

Сиздин сайтка календи кантип киргизүү керек

Кызыктуусу, сиз бул кыстаруу боюнча багыттарды гана таба аласыз Иш-чаранын түрү деңгээл жана сиздин Calendly каттоо эсебиңиздеги иш жүзүндөгү окуянын деңгээли эмес. Кодду жогорку оң жактагы окуя түрүнүн жөндөөлөрү үчүн ачылуучу тизмеден табасыз.

calendly embed

Аны чыкылдаткандан кийин, сиз кыстаруу түрлөрү үчүн опцияларды көрөсүз:

калкыма текстти кыстаруу

Эгер сиз кодду алып, аны сайтыңыздын каалаган жерине киргизсеңиз, анда бир нече маселелер бар.

  • Эгер сиз бир баракта бир нече түрдүү виджеттерди чакыргыңыз келсе... балким, пландаштыргычты (Калкып чыкма текст) жана төмөнкү колонтитул баскычын (Калкып чыгуучу виджет) ишке киргизген баскычы бар… сиз стилдер жадыбалын жана бир нече скриптти кошосуз. жолу. Бул керексиз.
  • Сайтыңызда тышкы скрипт жана стилдер жадыбалынын файлын чакыруу сиздин сайтка кызматты кошуунун эң оптималдуу ыкмасы эмес.

Менин сунушум, стилдер жадыбалын жана Javascriptти башыңызга жүктөңүз… андан кийин сайтыңызда мааниси бар башка виджеттерди колдонуңуз.

Календлинин виджеттери кантип иштейт

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

Бул менин сайтымда буларды (жана кэште) жүктөйт. Эми мен виджеттерди каалаган жерде колдоно алам.

Календлинин колонтитул баскычы

Мен өзүмдүн сайтымдагы окуянын түрүн эмес, конкреттүү окуяны чакыргым келет, андыктан төмөнкү скриптти төмөнкү колонтитулга жүктөп жатам:

<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 брендин алып салуу.

Календлинин Текст калкып чыкма терезеси

Мен дагы бул шилтемени же баскычты колдонуу менен менин сайтымда болушун каалайм. Бул үчүн, сиз өзүңүздүн onClick окуясын колдоносуз Calendly анкердик текст. Mineде аны баскыч катары көрсөтүү үчүн кошумча класстар бар (төмөндөгү мисалда көрүнбөйт):

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

Бул билдирүү бир баракта бир нече курмандыктар үчүн колдонулушу мүмкүн. Мүмкүн, сизде кыстаргыңыз келген окуялардын 3 түрү бардыр... жөн гана URL дарегин ылайыктуу көздөгөн жердин өзгөртсөңүз, ал иштейт.

Календлинин Inline Embed Калкып чыкмасы

Киргизилген кыстаруу бир аз башкачараак, анткени ал класс жана көздөгөн жер боюнча атайын чакырылган div колдонот.

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

Дагы бир жолу, бул пайдалуу, анткени ар бири менен бир нече div болушу мүмкүн Calendly ошол эле бетте пландаштыргыч.

Кошумча эскертүү: Календли бул ишке ашырылган жолду өзгөртүп, мынчалык техникалык болбошун каалайм. Жөн эле класска ээ болуп, анан виджетти жүктөө үчүн көздөгөн href колдонсоңуз жакшы болмок. Бул мазмун башкаруу системалары боюнча азыраак түз коддоону талап кылат. Бирок... бул эң сонун курал (азыр!). Мисалы - кыска коддору бар WordPress плагини WordPress чөйрөсү үчүн идеалдуу болмок. Эгер сизди кызыктырсаңыз, Календли... Мен муну сиз үчүн оңой эле куруп бере алам!

Calendly менен баштаңыз

Жоопкерчиликтен баш тартуу: Мен Calendly колдонуучусумун жана ошондой эле алардын тутумунун филиалымын. Бул макалада макаланын бүтүндөй өнөктөштүк шилтемелери бар.