วิธีผสานรวมซอฟต์แวร์นัดหมาย เช่น Calendly, TidyCal หรือ Youcanbookme

หน้านี้จะแสดงให้คุณเห็นถึงวิธีผสานรวมซอฟต์แวร์นัดหมายเข้ากับ systeme.io

สิ่งที่คุณต้องมี:

• บัญชี systeme.io
• หน้าเซลล์ฟันเนล
• บัญชี Calendly, TidyCal, หรือ YouCanBook.me

วิธีการดังต่อไปนี้สามารถใช้ได้กับ Calendly, TidyCal และ YouCanBook.me

เราจะใช้ Calendly เป็นตัวอย่าง

1. บนบัญชี Calendly ของคุณ: สร้างและคัดลอกรหัสฝัง สำหรับปฏิทิน/กิจกรรมของคุณ

2. บนบัญชี systeme.io ของคุณ:

เพิ่มองค์ประกอบ Raw HTML ลงในหน้าของคุณ

วางรหัสที่ได้รับจากซอฟต์แวร์ปฏิทินของคุณลงในองค์ประกอบ 'Raw HTML' ที่คุณเพิ่งเพิ่มเข้าไป จากนั้นกด บันทึก หน้าเว็บ

สุดท้าย เมื่อคุณดูตัวอย่างหน้าเว็บ คุณจะเห็นปฏิทิน Calendly ปรากฏขึ้น

วิธีผสานรวม Calendly เข้ากับป๊อปอัพ

ทำตามขั้นตอนก่อนหน้า แต่ให้เพิ่มองค์ประกอบ Raw HTML ลงในป๊อปอัพที่คุณต้องการให้ปฏิทินปรากฏขึ้น

1. ในรหัสที่กำหนดเองของป๊อปอัพ

เพิ่มแอตทริบิวต์ id    ไปยังองค์ประกอบ div    ที่ได้รับจาก Calendly คุณสามารถใช้ค่าใดก็ได้ อย่างไรก็ตาม ต้องแน่ใจว่าค่านั้นไม่ซ้ำกันในหน้านั้น

2. ในหน้าตัวแก้ไขหลัก

ไปที่ การตั้งค่า คลิก แก้ไขรหัสส่วนท้าย

<script>
  document.addEventListener('open_popup', function() {
    Calendly.initInlineWidget({
      url: 'https://calendly.com/YOUR_CALENDLY_LINK',
      parentElement: document.getElementById('calendly-container')
    })
  })
</script>

หากคุณเลือกชื่อ id    เป็นชื่ออื่นที่ไม่ใช่ calendly-container    ตรวจสอบให้แน่ใจว่าคุณได้เปลี่ยนชื่อหลังจากวางรหัสแล้ว

วิธีผสานรวม TidyCal เข้ากับป๊อปอัพ

นี่คือตัวอย่าง:

1. TidyCal จะให้รหัสฝังที่คล้ายกับด้านล่างนี้:

<div class="tidycal-embed" data-path="YOUR_DATA_PATH"></div><script src="https://asset-tidycal.b-cdn.net/js/embed.js"></script>

2. ขั้นแรก ให้เพิ่มองค์ประกอบ Raw HTML ลงในป๊อปอัพของคุณ จากนั้นคัดลอกเฉพาะบรรทัดต่อไปนี้จากรหัส TidyCal ของคุณและวางลงในองค์ประกอบ: <div class="tidycal-embed" data-path="YOUR_DATA_PATH"></div>     และวางลงในองค์ประกอบ HTML ของคุณ

3. จากนั้นไปที่การตั้งค่าหน้าเว็บและคลิก 'แก้ไขรหัสส่วนท้าย' คุณต้องวางส่วนที่เหลือของรหัสที่ได้รับจาก TidyCal <script src="https://asset-tidycal.b-cdn.net/js/embed.js"></script>    และรวมส่วนย่อยของรหัส (snippet) ด้านล่างนี้:

<script>
  document.addEventListener('open_popup', function(){
    const embedTarget = document.querySelector('div.tidycal-embed')
    window.TidyCal?.init(embedTarget) 
  })
</script>