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

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

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

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

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

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

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

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

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

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

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

วิธีผสานรวม 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>