Calendly: วิธีฝังป๊อปอัปการตั้งเวลาหรือปฏิทินที่ฝังในเว็บไซต์หรือไซต์ WordPress ของคุณ

วิดเจ็ตการตั้งเวลา Calendly

ไม่กี่สัปดาห์ก่อน ฉันอยู่ที่ไซต์แห่งหนึ่งและสังเกตเห็นว่าเมื่อฉันคลิกลิงก์เพื่อกำหนดเวลานัดหมายกับพวกเขา ฉันไม่ได้ถูกพาไปยังไซต์ปลายทาง มีวิดเจ็ตที่เผยแพร่ Calendly ตัวกำหนดตารางเวลาโดยตรงในหน้าต่างป๊อปอัป นี่เป็นเครื่องมือที่ยอดเยี่ยม... การรักษาคนในเว็บไซต์ของคุณเป็นประสบการณ์ที่ดีกว่าการส่งต่อไปยังหน้าภายนอก

Calendly คืออะไร?

Calendly รวมเข้ากับ your . โดยตรง Google Workspace หรือระบบปฏิทินอื่นๆ เพื่อสร้างรูปแบบการตั้งเวลาที่สวยงามและใช้งานง่าย เหนือสิ่งอื่นใด คุณยังสามารถจำกัดเวลาที่คุณให้บุคคลอื่นเชื่อมต่อกับคุณในปฏิทินของคุณได้ ตัวอย่างเช่น ฉันมักจะมีเวลาเพียงไม่กี่ชั่วโมงในวันที่เจาะจงสำหรับการประชุมภายนอก

การใช้ตัวจัดกำหนดการเช่นนี้เป็นประสบการณ์ที่ดียิ่งกว่าการกรอกแบบฟอร์ม สำหรับฉัน บริษัทที่ปรึกษาด้านดิจิทัลทรานส์ฟอร์เมชั่น, เรามีงานขายแบบกลุ่มที่ทีมผู้นำอยู่ในที่ประชุม นอกจากนี้เรายังรวมแพลตฟอร์มการประชุมทางเว็บของเราเข้ากับ Calendly เพื่อให้คำเชิญในปฏิทินรวมลิงก์การประชุมออนไลน์ทั้งหมด

Calendly ได้เปิดตัวสคริปต์วิดเจ็ตและสไตล์ชีตที่ฝังฟอร์มการจัดกำหนดการลงในหน้าโดยตรง เปิดจากปุ่ม หรือแม้แต่จากปุ่มลอยในส่วนท้ายของไซต์ของคุณได้เป็นอย่างดี สคริปต์สำหรับ Calendly เขียนได้ดี แต่เอกสารประกอบในการรวมเข้ากับไซต์ของคุณนั้นไม่ดีเลย อันที่จริง ฉันประหลาดใจที่ Calendly ยังไม่ได้เผยแพร่ปลั๊กอินหรือแอปของตนเองสำหรับแพลตฟอร์มต่างๆ

สิ่งนี้มีประโยชน์อย่างเหลือเชื่อ ไม่ว่าคุณจะอยู่ในบริการที่บ้านและต้องการจัดเตรียมวิธีการให้ลูกค้าของคุณกำหนดเวลาการนัดหมาย สุนัขวอล์คเกอร์ บริษัท SaaS ที่ต้องการให้ผู้เยี่ยมชมกำหนดเวลาการสาธิต หรือบริษัทขนาดใหญ่ที่มีสมาชิกหลายคน คุณจำเป็นต้องจัดกำหนดการ... Calendly และวิดเจ็ตฝังตัวเป็นเครื่องมือบริการตนเองที่ยอดเยี่ยม

วิธีการฝัง Calendly ในเว็บไซต์ของคุณ

น่าแปลกที่คุณจะพบเฉพาะเส้นทางในการฝังเหล่านี้ที่ ชนิดเหตุการณ์ ระดับและไม่ใช่ระดับเหตุการณ์จริงภายในบัญชี Calendly ของคุณ คุณจะพบรหัสในรายการดรอปดาวน์สำหรับการตั้งค่าประเภทกิจกรรมที่ด้านบนขวา

ฝังไว้

เมื่อคุณคลิกแล้ว คุณจะเห็นตัวเลือกสำหรับประเภทของการฝัง:

ฝังข้อความป๊อปอัป

หากคุณคว้าโค้ดและฝังไว้ที่ใดก็ตามที่คุณต้องการบนไซต์ของคุณ แสดงว่ามีปัญหาบางประการ

  • หากคุณต้องการเรียกใช้วิดเจ็ตที่แตกต่างกันสองสามรายการในหน้าเดียว… อาจมีปุ่มที่เรียกใช้ตัวกำหนดเวลา (ข้อความป๊อปอัป) รวมถึงปุ่มส่วนท้าย (วิดเจ็ตป๊อปอัป)… คุณจะต้องเพิ่มสไตล์ชีตและสคริปต์ ครั้ง ที่ไม่จำเป็น
  • การเรียกสคริปต์ภายนอกและไฟล์สไตล์ชีตแบบอินไลน์ในไซต์ของคุณไม่ใช่วิธีการที่เหมาะสมที่สุดในการเพิ่มบริการในไซต์ของคุณ

คำแนะนำของฉันคือการโหลดสไตล์ชีตและ Javascript ในส่วนหัวของคุณ... จากนั้นใช้วิดเจ็ตอื่นๆ ที่เหมาะสมในไซต์ของคุณ

วิดเจ็ตของ Calendly ทำงานอย่างไร

Calendly มีสองไฟล์ที่จำเป็นสำหรับการฝังลงในไซต์ของคุณ ได้แก่ สไตล์ชีตและจาวาสคริปต์ หากคุณกำลังจะแทรกสิ่งเหล่านี้ลงในไซต์ของคุณ ฉันจะเพิ่มสิ่งต่อไปนี้ในส่วนหัวของ 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 แนวทางปฏิบัติที่ดีที่สุดคือการใช้ your 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 ข้อความสมอ Mine มีคลาสเพิ่มเติมเพื่อแสดงเป็นปุ่ม (ไม่เห็นในตัวอย่างด้านล่าง):

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

อีกครั้ง สิ่งนี้มีประโยชน์เพราะคุณสามารถมีหลาย divs กับแต่ละอัน Calendly ตัวกำหนดตารางเวลาในหน้าเดียวกัน

หมายเหตุด้านข้าง: ฉันหวังว่า Calendly จะแก้ไขวิธีการดำเนินการนี้ ดังนั้นจึงไม่จำเป็นต้องเป็นเทคนิคมากนัก คงจะดีถ้าคุณสามารถมีคลาสแล้วใช้ href ปลายทางเพื่อโหลดวิดเจ็ต ซึ่งจะต้องใช้การเข้ารหัสโดยตรงน้อยกว่าในระบบการจัดการเนื้อหา แต่… มันเป็นเครื่องมือที่ยอดเยี่ยม (สำหรับตอนนี้!) ตัวอย่างเช่น – ปลั๊กอิน WordPress ที่มีรหัสย่อจะเหมาะสำหรับสภาพแวดล้อมของ WordPress หากคุณสนใจ Calendly... ฉันสามารถสร้างสิ่งนี้ให้คุณได้!

เริ่มต้นกับ Calendly

ข้อจำกัดความรับผิดชอบ: ฉันเป็นผู้ใช้ Calendly และเป็นพันธมิตรสำหรับระบบของพวกเขา บทความนี้มีลิงค์พันธมิตรตลอดทั้งบทความ