ข้ามไปยังเนื้อหา
คู่มือผู้ใช้ การสนับสนุน ขอสาธิต เข้าสู่ระบบ
Pushwoosh.com

วิดเจ็ต Web inbox

Web Message Inbox ที่ผสานรวมเข้ากับเว็บไซต์ของคุณจะช่วยเพิ่ม conversion ได้อย่างมาก Web Inbox Widget ที่พร้อมใช้งานได้สมัครรับเมธอดทั้งหมดที่จำเป็นสำหรับการสื่อสารกับผู้ใช้ เพียงแค่ผสานรวมวิดเจ็ตเข้ากับเว็บไซต์ของคุณและปรับแต่งรูปลักษณ์ให้เข้ากับแบรนด์ของคุณ

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

ข้อกำหนดเบื้องต้น

Anchor link to

หากต้องการผสานรวม Message Inbox สำหรับเว็บไซต์ โปรดปฏิบัติตาม คู่มือ

การผสานรวมวิดเจ็ต

Anchor link to

เมื่อเริ่มต้น Pushwoosh WebSDK ให้เพิ่มพารามิเตอร์ inboxWidget:

ตัวอย่าง
Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox'
  }
}]);

ทริกเกอร์

Anchor link to

ในการเรนเดอร์วิดเจ็ต คุณควรระบุ องค์ประกอบทริกเกอร์ สำหรับวิดเจ็ต องค์ประกอบ DOM ใดๆ บนหน้าเว็บสามารถเป็นทริกเกอร์ได้ ระบุ ID ของมันเป็น “pwInbox” หรือกำหนด ID ที่กำหนดเองให้กับพารามิเตอร์ triggerId เมื่อเริ่มต้น SDK
เมื่อ WebSDK เริ่มต้นทำงาน ป้ายข้อความที่ยังไม่ได้อ่านจะแสดงบนองค์ประกอบทริกเกอร์ เมื่อแตะองค์ประกอบทริกเกอร์ วิดเจ็ตจะปรากฏขึ้นบนหน้าเว็บ

การจัดตำแหน่ง

Anchor link to

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

ตัวอย่าง
Pushwoosh.push(['init', {


  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    position: 'top'
  }
}]);

โดยค่าเริ่มต้น inboxWidget ควรวางไว้ก่อนแท็กปิด </body>
เรนเดอร์วิดเจ็ตที่ใดก็ได้บนหน้าเว็บตามที่แสดงในตัวอย่างด้านล่าง:

ตัวอย่าง
Pushwoosh.push(['init', {
  ...,
  inboxWidget: {


    enable: true,
    triggerId: 'pwInbox',
    appendTo: '.widget-parent-element-class'
  }
}]);

การค้นหาองค์ประกอบหลักจะดำเนินการโดย querySelector ดังนั้นจึงต้องมีการระบุคลาส, id หรือองค์ประกอบที่ชัดเจน

การปรับแต่งวิดเจ็ต

Anchor link to

การปรับแต่งข้อความ

Anchor link to

หากต้องการปรับแต่งข้อความวิดเจ็ต ให้เพิ่มพารามิเตอร์ emptyInboxTitle และ emptyInboxText:

ตัวอย่าง
Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    title: 'Inbox',                                 // ชื่อวิดเจ็ต
    emptyInboxTitle: 'You\'re all caught up',       // ชื่อวิดเจ็ต inbox ว่าง
    emptyInboxText: 'There are no new messages. Stay tuned!'    // ข้อความวิดเจ็ต inbox ว่าง
  }
}]);

ผลลัพธ์จะมีลักษณะดังนี้:

การปรับแต่งรูปลักษณ์

Anchor link to

หากต้องการปรับแต่ง รูปลักษณ์ ของวิดเจ็ต ให้ใช้พารามิเตอร์ต่อไปนี้:

ตัวอย่าง
Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    bgColor: '#ffffff',         // พื้นหลังวิดเจ็ต
    borderColor: 'transparent', // สีขอบวิดเจ็ต
    borderRadius: 4,            // รัศมีขอบวิดเจ็ต (px)
    widgetWidth: 350,           // ความกว้างวิดเจ็ต (px)
    zIndex: 100                 // z-index
  }
}]);

ป้ายนับจำนวนข้อความที่ยังไม่ได้อ่าน สามารถปรับแต่งได้ดังนี้:

ตัวอย่าง
Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    badgeBgColor: '#ff4c00',    // สีป้าย
    badgeTextColor: '#ffffff'   // สีข้อความป้าย
  }
}]);

หากต้องการปรับแต่ง คุณสมบัติข้อความ ให้เพิ่มโค้ดต่อไปนี้:

ตัวอย่าง
Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    textColor: '#333333',                       // สีข้อความ
    fontFamily: 'Helvetica, Arial, sans-serif', // แบบอักษร
    messageTitleColor: '#7a7a7a',               // สีชื่อข้อความ
    timeTextColor: '#c4c4c4',                   // สีข้อความประทับเวลา
    emptyInboxTitleColor: '#333333',            // สีชื่อ inbox ว่าง
    emptyInboxTextColor: '#7a7a7a'              // สีข้อความ inbox ว่าง
  }
}]);

สุดท้าย คุณสามารถระบุ ไอคอนสำหรับ inbox ที่ว่างเปล่า ได้:

ตัวอย่าง
Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    emptyInboxIconUrl: 'https://pushon.pushwoosh.com/images/icon-empty-inbox.png'   // เส้นทาง URL ไปยังไอคอน
  }
}]);

API

Anchor link to

หากต้องการเปิดหรือปิดวิดเจ็ต ให้ใช้เมธอด API ต่อไปนี้:

ตัวอย่าง
Pushwoosh.pwinboxWidget.toggle(open?: boolean);