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

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

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

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

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

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

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

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

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

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

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

หมายเหตุ: ฟีเจอร์นี้มีประโยชน์มากเพราะช่วยให้คุณสามารถเพิ่ม Facebook pixel ลงในหน้าการจองของคุณได้ ซึ่งบางครั้งไม่สามารถทำได้โดยตรงบนบางแพลตฟอร์มการนัดหมาย

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

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

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

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

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

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

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

  1. จากนั้นไปที่การตั้งค่าหน้าเว็บและคลิก 'แก้ไขรหัสส่วนท้าย' คุณต้องวางส่วนที่เหลือของรหัสที่ได้รับจาก 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>

```

นี่ตอบคำถามของคุณหรือไม่ ขอบคุณสำหรับความคิดเห็น เกิดปัญหาในการส่งความคิดเห็นของคุณ โปรดลองอีกครั้งในภายหลัง