Calendly: Таны вэб сайт эсвэл WordPress сайтад хуваарь гаргах цонх эсвэл суулгагдсан хуанли хэрхэн оруулах вэ

Calendly Scheduling Widget

Хэдэн долоо хоногийн өмнө би нэг сайтад явж байгаад тэдэнтэй уулзах цаг товлох холбоос дээр дарахад очих газар руу нь авчираагүйг анзаарсан. Сэтгэл тайван төлөвлөгчийг шууд гарч ирэх цонхонд хийнэ. Энэ бол гайхалтай хэрэгсэл… хэн нэгнийг өөрийн сайтад байлгах нь түүнийг гадны хуудас руу дамжуулахаас хамаагүй дээр юм.

Календли гэж юу вэ?

Сэтгэл тайван тантай шууд нэгтгэдэг Google ажлын талбар эсвэл бусад календарийн систем нь үзэсгэлэнтэй, хэрэглэхэд хялбар хуваарийн маягтуудыг бий болгох. Хамгийн сайн нь, та хуанли дээрээ хэн нэгэнтэй холбогдох боломжийг хязгаарлаж болно. Жишээлбэл, би гадаад уулзалтад зориулж тодорхой өдрүүдэд хэдхэн цаг завтай байдаг.

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

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

Энэ бол гайхалтай ашигтай. Та гэрийн үйлчилгээнд хамрагдаж байгаа бөгөөд үйлчлүүлэгчиддээ цаг товлох боломжоор хангахыг хүсч байгаа эсэх, нохой зөөгч, зочдод үзүүлбэр үзүүлэхийг хүсдэг SaaS компани эсвэл олон гишүүнтэй томоохон корпорацийн хувьд та хялбархан хуваарь гаргах хэрэгтэй... Calendly мөн embed виджетүүд нь өөрөө өөртөө үйлчлэх гайхалтай хэрэгсэл юм.

Календлыг өөрийн сайтад хэрхэн оруулах вэ

Хачирхалтай нь, та эдгээр оруулга дээр зөвхөн зааварчилгааг олох болно Үйл явдлын төрөл түвшин бөгөөд таны Calendly бүртгэл дэх бодит үйл явдлын түвшин биш. Та баруун дээд буланд байгаа үйл явдлын төрлүүдийн тохиргооны цэснээс кодыг олох болно.

calendly embed

Үүнийг товшсоны дараа та суулгацын төрлүүдийн сонголтуудыг харах болно:

попап текст оруулах

Хэрэв та кодыг аваад сайтынхаа хүссэн газартаа оруулбал хэд хэдэн асуудал гарна.

  • Хэрэв та нэг хуудсан дээр хэд хэдэн өөр виджетийг дуудахыг хүсвэл ... магадгүй хуваарь гаргагч (Попап текст) болон хөл товч (Попап виджет) ажиллуулдаг товчлууртай байж магадгүй ... та загварын хүснэгт нэмж, хэд хэдэн скрипт бичих болно. удаа. Энэ нь шаардлагагүй юм.
  • Танай сайтад гадаад скрипт болон загварын файлын шугам руу залгах нь үйлчилгээг таны сайтад нэмэх хамгийн оновчтой арга биш юм.

Миний санал болгож буй зүйл бол загварын хуудас болон Javascript-ийг толгой хэсэгтээ ачаалж, дараа нь бусад виджетүүдийг өөрийн сайтын хэмжээнд ашиглах хэрэгтэй.

Календлигийн виджетүүд хэрхэн ажилладаг

Сэтгэл тайван Энэ нь таны сайтад оруулахад шаардлагатай хоёр файлтай, загварын хуудас болон 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>

Та харах болно Сэтгэл тайван скриптийг дараах байдлаар задалдаг.

  • URL – миний виджет дээр ачаалахыг хүссэн үйл явдал.
  • текст – миний товчлуурыг дарахыг хүсч буй текст.
  • өнгө – товчлуурын дэвсгэр өнгө.
  • текст өнгө - текстийн өнгө.
  • Брэнд – Calendly брэндийг устгаж байна.

Календлигийн текст попап

Би үүнийг холбоос эсвэл товчлуур ашиглан сайтынхаа бүх хэсэгт ашиглахыг хүсч байна. Үүнийг хийхийн тулд та өөрийн onClick үйл явдлыг ашиглана Сэтгэл тайван зангуу текст. Минийх үүнийг товчлуур хэлбэрээр харуулах нэмэлт ангиудтай (доорх жишээнд харагдахгүй байна):

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

Энэ мессежийг нэг хуудсан дээр олон санал болгоход ашиглаж болно. Танд оруулахыг хүсэж буй 3 төрлийн арга хэмжээ байгаа байж магадгүй... URL-г тохирох газрынхаа хаягаар өөрчлөхөд л хангалттай.

Calendly's Inline Embed Popup

Inline embed нь анги болон очих газраа тусгайлан дууддаг div-г ашигладагаараа арай өөр юм.

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

Дахин хэлэхэд энэ нь ашигтай, учир нь та тус бүрдээ олон div-тэй байж болно Сэтгэл тайван нэг хуудсанд хуваарь гаргагч.

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

Calendly-г эхлүүлээрэй

Анхааруулга: Би Calendly-ийн хэрэглэгч бөгөөд мөн тэдний системийн нэг гишүүн юм. Энэ нийтлэл нь нийтлэлийн туршид түншлэлийн холбоосуудтай.