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

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

Web Message Inbox ที่ผสานรวมเข้ากับเว็บไซต์ของคุณจะช่วยเพิ่มคอนเวอร์ชันได้อย่างมาก 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',                                 // widget title
    emptyInboxTitle: 'You\'re all caught up',       // empty inbox widget title
    emptyInboxText: 'There are no new messages. Stay tuned!'    // empty inbox widget text
  }
}]);

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

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

Anchor link to

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

ตัวอย่าง
Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    bgColor: '#ffffff',         // widget background
    borderColor: 'transparent', // widget border color
    borderRadius: 4,            // widget border radius (px)
    widgetWidth: 350,           // widget width (px)
    zIndex: 100                 // z-index
  }
}]);

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

ตัวอย่าง
Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    badgeBgColor: '#ff4c00',    // badge color
    badgeTextColor: '#ffffff'   // badge text color
  }
}]);

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

ตัวอย่าง
Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    textColor: '#333333',                       // text color
    fontFamily: 'Helvetica, Arial, sans-serif', // font
    messageTitleColor: '#7a7a7a',               // messages title color
    timeTextColor: '#c4c4c4',                   // timestamp text color
    emptyInboxTitleColor: '#333333',            // empty inbox title color
    emptyInboxTextColor: '#7a7a7a'              // empty inbox text color
  }
}]);

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

ตัวอย่าง
Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    emptyInboxIconUrl: 'https://pushon.pushwoosh.com/images/icon-empty-inbox.png'   // URL path to an icon
  }
}]);

การปรับแต่งเลย์เอาต์ของเซลล์

Anchor link to

วิดเจ็ตจะวาดข้อความเป็นหนึ่งในสี่ เลย์เอาต์ของเซลล์ — classic, banner, captioned หรือ carousel — ซึ่งเป็นเลย์เอาต์เดียวกับที่แสดงตัวอย่างแคมเปญในแผงควบคุม เลย์เอาต์ที่ไม่สามารถแสดงผลด้วยสิ่งที่ข้อความมีอยู่จะลดระดับลงเป็น classic: banner ต้องการรูปภาพฮีโร่, captioned ต้องการรูปภาพฮีโร่พร้อมทั้งชื่อเรื่องและเนื้อหา, และ carousel ต้องการสไลด์อย่างน้อยหนึ่งสไลด์พร้อมทั้งชื่อเรื่องและเนื้อหา

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

ตัวอย่าง
Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    unreadDotColor: '#ff4c00',    // unread dot on the classic avatar
    avatarBgColor: '#e6e6e6',     // classic avatar background
    avatarTextColor: '#333333',   // classic avatar initial color
    avatarSize: 52,               // classic avatar size (px)
    mediaRadius: 8,               // corner radius of banner/captioned/carousel media (px)
    slideCaptionColor: '#ffffff', // carousel slide caption text color
    slideScrimColor: '#000000',  // carousel slide caption background scrim
    pagerDotActiveColor: '#ff4c00', // carousel active page dot
    pagerDotColor: '#c4c4c4'      // carousel inactive page dots
  }
}]);

API

Anchor link to

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

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

การเปิดวิดเจ็ตจะรีเฟรชข้อมูลจากเซิร์ฟเวอร์ อย่างมากที่สุดหนึ่งครั้งทุกๆ 30 วินาที — ข้อความ App Inbox แบบสแตนด์อโลนจะทำงานบนช่องทางที่ไม่มีพุช ดังนั้นจึงไม่มีสิ่งอื่นใดประกาศข้อความใหม่ระหว่างการโหลดหน้าเว็บ