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

วิดเจ็ตกล่องข้อความบนเว็บ

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

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

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',       // ชื่อวิดเจ็ตเมื่อกล่องข้อความว่าง
    emptyInboxText: 'There are no new messages. Stay tuned!'    // ข้อความในวิดเจ็ตเมื่อกล่องข้อความว่าง
  }
}]);

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

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

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',            // สีชื่อเรื่องเมื่อกล่องข้อความว่าง
    emptyInboxTextColor: '#7a7a7a'              // สีข้อความเมื่อกล่องข้อความว่าง
  }
}]);

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

ตัวอย่าง
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);