ป๊อปอัปการสมัครสมาชิกที่กำหนดเอง

ป๊อปอัปการสมัครสมาชิกที่กำหนดเอง (Custom Subscription Popup) คือหน้าต่างป๊อปอัปที่แสดงบนหน้าเว็บเพื่อแนะนำให้ผู้ใช้สมัครรับการแจ้งเตือนแบบพุชบนเว็บ ถูกนำมาใช้งานด้วย Pushwoosh WebSDK และช่วยให้สามารถเอาชนะข้อจำกัดของเบราว์เซอร์ในการแสดงพร้อมท์การสมัครสมาชิกแบบเนทีฟได้ ป๊อปอัปการสมัครสมาชิกแบบเนทีฟสามารถแสดงให้ผู้ใช้คนใดคนหนึ่งเห็นได้เพียงสองครั้งเท่านั้น หากผู้ใช้ไม่อนุญาตการแจ้งเตือนแบบพุชและปิดป๊อปอัปการสมัครสมาชิกแบบเนทีฟสองครั้งติดต่อกัน ป๊อปอัปนั้นจะไม่แสดงอีก และการแจ้งเตือนแบบพุชจะถือว่าถูกบล็อก ป๊อปอัปการสมัครสมาชิกที่กำหนดเอง สามารถแสดงได้หลายครั้งตามที่ต้องการ จนกว่าผู้ใช้จะสมัครหรือบล็อกการแจ้งเตือนแบบพุชอย่างชัดเจน

ป๊อปอัปการสมัครสมาชิกที่กำหนดเอง สามารถใส่ข้อความใดก็ได้เพื่ออธิบายข้อดีของการสมัครรับการแจ้งเตือนแบบพุช และมีปุ่มที่ปรับแต่งได้สองปุ่ม — ปุ่มหนึ่งสำหรับตัวเลือก “ถามฉันทีหลัง” และอีกปุ่มสำหรับ “สมัคร”

เมื่อผู้ใช้กดปุ่ม “สมัคร” ป๊อปอัปการสมัครสมาชิกแบบเนทีฟจะปรากฏขึ้น

เมื่อผู้ใช้กดปุ่ม “ถามฉันทีหลัง” หรือเพียงแค่ปิดหน้าต่าง ป๊อปอัปการสมัครสมาชิกที่กำหนดเองจะปรากฏขึ้นอีกครั้งในเวลาที่กำหนด (ค่าเริ่มต้นคือในอีกหนึ่งสัปดาห์ถัดไป; สามารถกำหนดค่าความล่าช้าในการลองใหม่ได้ผ่านพารามิเตอร์ “retryOffset”)

การนำไปใช้งาน

หากต้องการเปิดใช้งานและปรับแต่ง ป๊อปอัปการสมัครสมาชิกที่กำหนดเอง ให้ใช้สคริปต์ต่อไปนี้ขณะเริ่มต้น Pushwoosh WebSDK:

Pushwoosh.push('init', {
    // . . .,
    subscribePopup: {
        enable: true,                      // (boolean) การเปิดใช้งานป๊อปอัป
        text: 'Text on popup',             // (string) ข้อความที่จะแสดงบนป๊อปอัป
        confirmSubscriptionButtonText: 'Subscribe', // (string) ข้อความที่กำหนดเองสำหรับปุ่ม "สมัคร"

        manualToggle: false,               // (boolean) การควบคุมการแสดงป๊อปอัปด้วยตนเอง
        delay: 60,                         // (integer) ความล่าช้า (วินาที) ระหว่างการโหลดหน้าเว็บและการปรากฏของป๊อปอัป
        retryOffset: 604800,               // (integer) ช่วงเวลา (วินาที) ที่จะแสดงป๊อปอัปอีกครั้ง

        iconUrl: 'https://...',            // (string) URL ไอคอนที่กำหนดเอง
        iconAlt: 'Descriptive text for your icon', // (string) ข้อความ ALT สำหรับไอคอน
        overlay: false,                    // (boolean) เปิดใช้งานการซ้อนทับหน้าเมื่อป๊อปอัปแสดงขึ้น
        position: 'top',                   // (string) ตำแหน่งบนหน้าเว็บ ค่าที่เป็นไปได้: 'top' | 'center' | 'bottom'
        mobileViewMargin: '10px',          // (string) ระยะขอบสำหรับมุมมองบนมือถือ

        bgColor: '#fff',                   // (string) สีพื้นหลังของป๊อปอัป
        borderColor: 'transparent',        // (string) สีขอบของป๊อปอัป
        boxShadow: '0 3px 6px rgba(0,0,0,0.16)', // (string) เงาของป๊อปอัป

        textColor: '#000',                 // (string) สีข้อความของป๊อปอัป
        textSize: 'inherit',               // (string) ขนาดข้อความของป๊อปอัป
        textWeight: 'normal',              // (string) น้ำหนักข้อความของป๊อปอัป
        fontFamily: 'inherit',             // (string) ฟอนต์ข้อความของป๊อปอัป

        subscribeBtnBgColor: '#4285f4',         // (string) สีพื้นหลังของปุ่ม "สมัคร"
        subscribeBtnTextColor: '#fff',          // (string) สีข้อความของปุ่ม "สมัคร"
        subscribeBtnTextWeight: 'bold',         // (string) น้ำหนักข้อความของปุ่ม "สมัคร"
        subscribeBtnBorderColor: 'transparent', // (string) สีขอบของปุ่ม "สมัคร"
        subscribeBtnBorderRadius: '4px',        // (string) รัศมีขอบของปุ่ม "สมัคร"

        askLaterButtonText: 'Not now',          // (string) ข้อความที่กำหนดเองสำหรับปุ่ม "ไว้ทีหลัง"
        askLaterBtnBgColor: 'transparent',      // (string) สีพื้นหลังของปุ่ม "ไว้ทีหลัง"
        askLaterBtnTextColor: '#000',           // (string) สีข้อความของปุ่ม "ไว้ทีหลัง"
        askLaterBtnBorderColor: 'transparent',  // (string) สีขอบของปุ่ม "ไว้ทีหลัง"
        askLaterBtnBorderRadius: '4px',         // (string) รัศมีขอบของปุ่ม "ไว้ทีหลัง"
        askLaterBtnTextWeight: 'normal',        // (string) น้ำหนักข้อความของปุ่ม "ไว้ทีหลัง"

        theme: 'material',               // (string) ธีมป๊อปอัป ค่าที่เป็นไปได้: 'material' | 'topbar'
        viewport: 'desktop'              // (string) viewport เป้าหมาย ค่าที่เป็นไปได้: 'desktop' | 'mobile'
    }
});

การเข้าถึงอินสแตนซ์ของป๊อปอัปการสมัครสมาชิกที่กำหนดเอง

อินสแตนซ์ของ ป๊อปอัปการสมัครสมาชิกที่กำหนดเอง สามารถเข้าถึงได้ผ่าน Pushwoosh.moduleRegistry.subscribePopup

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

อินสแตนซ์มีเมธอด toggle() ที่ช่วยให้คุณสามารถแสดงหรือซ่อนป๊อปอัปด้วยตนเองได้:

// แสดงหรือซ่อนป๊อปอัปการสมัครสมาชิกที่กำหนดเองด้วยตนเอง
Pushwoosh.moduleRegistry.subscribePopup.toggle(); // สลับการมองเห็น
Pushwoosh.moduleRegistry.subscribePopup.toggle(true); // แสดงป๊อปอัป
Pushwoosh.moduleRegistry.subscribePopup.toggle(false); // ซ่อนป๊อปอัป

สิ่งนี้ช่วยให้สามารถควบคุมพฤติกรรมของป๊อปอัปได้มากขึ้นโดยตรงจากโค้ดของคุณ

ธีม

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

เพื่อหลีกเลี่ยงการซ่อนเนื้อหาที่มีค่าโดยป๊อปอัปการสมัครสมาชิก ให้ใช้ ธีม ‘topbar’ เพื่อให้ป๊อปอัปแสดงเป็นแถบแคบๆ ที่ด้านบนของหน้าจอ

เหตุการณ์ของป๊อปอัปการสมัครสมาชิกที่กำหนดเอง

เหตุการณ์ต่อไปนี้พร้อมใช้งานสำหรับการติดตามการโต้ตอบกับ ป๊อปอัปการสมัครสมาชิกที่กำหนดเอง:

// ทำงานเมื่อป๊อปอัปการสมัครสมาชิกที่กำหนดเองโหลดเสร็จและพร้อมที่จะแสดง
// หมายเหตุ: เหตุการณ์นี้จะไม่ทริกเกอร์หากผู้ใช้ได้สมัครรับการแจ้งเตือนแบบพุชแล้ว
Pushwoosh.addEventHandler('subscribe-popup-ready', function() {
  console.log("Triggered event: subscribe-popup-ready");
});

// ทำงานเมื่อป๊อปอัปการสมัครสมาชิกที่กำหนดเองแสดงขึ้น
Pushwoosh.addEventHandler('subscribe-popup-show', function() {
  console.log("Triggered event: subscribe-popup-show");
});

// ทำงานเมื่อผู้ใช้คลิกปุ่ม 'Subscribe' ในหน้าต่างป๊อปอัป
Pushwoosh.addEventHandler('subscribe-popup-accept', function() {
  console.log("Triggered event: subscribe-popup-accept");
});

// ทำงานเมื่อผู้ใช้คลิกปุ่ม 'Ask later' ในหน้าต่างป๊อปอัป
Pushwoosh.addEventHandler('subscribe-popup-decline', function() {
  console.log("Triggered event: subscribe-popup-decline");
});

// ทำงานเมื่อป๊อปอัปซ่อนตัวลง
Pushwoosh.addEventHandler('subscribe-popup-hide', function() {
  console.log("Triggered event: subscribe-popup-hide");
});