ฉันสามารถรันโค้ด JavaScript ที่กำหนดเองบนเหตุการณ์ของวิดเจ็ตได้หรือไม่?

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

โค้ดนี้จะบันทึกข้อความลงในคอนโซลเมื่อเกิดเหตุการณ์ต่าง ๆ ของวิดเจ็ต

เพียงแค่แทนที่ตัวจัดการเหตุการณ์เหล่านี้ด้วยโค้ดของคุณเองตามที่ต้องการ

เหตุการณ์ที่สามารถใช้งานได้มีดังนี้:

INITIALIZED — ถูกเรียกเมื่อวิดเจ็ตถูกโหลด
RESOURCE_GROUP_OPENED — ถูกเรียกเมื่อเปิดกลุ่มในแคตตาล็อก โดยจะส่งพารามิเตอร์ name และ resourceGroupId
RESERVATION_STARTED — ถูกเรียกเมื่อเปิดทรัพยากรเพื่อจอง โดยจะส่งพารามิเตอร์ name และ resourceId
RESERVATION_SAVED — ถูกเรียกเมื่อย้ายจากหน้าการจองไปยังหน้าคำสั่งซื้อ โดยจะส่งพารามิเตอร์ name และ resourceId
INDIRECT_ORDER_STARTED — ถูกเรียกเมื่อฟอร์มการชำระเงินปรากฏขึ้นและรอการชำระเงิน
ORDER_COMPLETED — ถูกเรียกเมื่อคำสั่งซื้อเสร็จสมบูรณ์ โดยจะส่งพารามิเตอร์ orderNumber, total และ deposit

การแทรกโค้ดภายในวิดเจ็ต

ในบางกรณี คุณอาจไม่สามารถเพิ่มโค้ดวิดเจ็ตพร้อมตัวจัดการเหตุการณ์ลงในหน้าเว็บของคุณได้โดยตรง กรณีนี้อาจเกิดขึ้นหากวิดเจ็ตถูกติดตั้งบนโซเชียลเน็ตเวิร์ก หรือหากคุณให้ลิงก์ตรงของวิดเจ็ตแก่ลูกค้า ในสถานการณ์เช่นนี้ คุณสามารถรันโค้ดของคุณโดยตรงภายในวิดเจ็ตโดยใช้เฟรมภายใน

ในการทำเช่นนี้ ให้เปิดใช้งานกล่องกาเครื่องหมาย ใช้เฟรมภายในเพื่อจัดการ callback:

จากนั้นคุณมีสองทางเลือก: วางโค้ดประมวลผลบนเว็บไซต์ของคุณเองและระบุ URL หน้า หรือแทรก รหัสต้นฉบับของหน้า ลงในวิดเจ็ตโดยตรง

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

ตัวเลือกที่สองเหมาะสำหรับกรณีที่คุณไม่มีเว็บไซต์ ในกรณีนี้ พารามิเตอร์ URL ทั้งหมดจากหน้าวิดเจ็ตจะถูกส่งต่อไปยังเฟรมภายใน สิ่งนี้จำเป็น เช่น ในการประมวลผลแท็ก UTM จากลิงก์วิดเจ็ตโดยตรง

รหัสต้นฉบับสำหรับเฟรมภายใน

ใช้โค้ดด้านล่างนี้ในเฟรมภายใน โค้ดนี้จะบันทึกข้อความลงในคอนโซลเมื่อเกิดเหตุการณ์ของวิดเจ็ต

<html>
<script>
window.addEventListener('message', function (e) {
if (e && e.origin && e.origin.indexOf('bukza.com') !== -1)
   var message = JSON.parse(e.data);
   switch (message.event) {
       case 'INITIALIZED':
         console.log('widget opened');
         break;
       case 'RESOURCE_GROUP_OPENED':
         console.log('entered to group ' + message.data.name);
         break;
       case 'RESERVATION_STARTED':
         console.log('started for ' + message.data.name);
         break;
       case 'RESERVATION_SAVED':
         console.log('saved for ' + message.data.name);
         break;
       case 'INDIRECT_ORDER_STARTED':
         console.log('waiting for payment');
         break;
       case 'ORDER_COMPLETED':
         console.log('order completed #' + message.data.orderNumber);
         break;
     }
   }, false);
</script>
</html>