แพลตฟอร์ม Messenger

ตัวแสดงหน้าเว็บ

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

การแสดงตัวแสดงหน้าเว็บ

คุณสามารถเปิดตัวแสดงหน้าเว็บได้โดยใช้สิ่งต่อไปนี้

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

หากประสบการณ์ของคุณใช้ส่วนขยายของ Messenger ที่อธิบายไว้ในส่วนนี้ โปรดอย่าลืมตั้งค่าพารามิเตอร์ messenger_extensions ให้เป็น true ในรายการเมนูหรือปุ่มที่คุณใช้เพื่อให้ส่วนขยายดังกล่าวทำงาน

SDK ส่วนขยายของ Messenger - การไวท์ลิสต์โดเมนที่จำเป็น

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

โปรดดูข้อมูลเพิ่มเติมเกี่ยวกับการเพิ่มโดเมนลงในไวท์ลิสต์ที่ข้อมูลอ้างอิง whitelisted_domains

การตั้งค่าชื่อของตัวแสดงหน้าเว็บ

แท็ก <title> จะกำหนดข้อความที่แสดงในแถบชื่อสำหรับตัวแสดงหน้าเว็บ เช่นเดียวกับเว็บเพจอื่นๆ

<html><head><title>ตัวแสดงหน้าเว็บสุดเจ๋งของฉัน</title></head> ... </html>

การปิดตัวแสดงหน้าเว็บ

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

การปิดด้วย SDK ส่วนขยายของ Messenger

หากต้องการปิดตัวแสดงหน้าเว็บโดยใช้ SDK ส่วนขยายของ Messenger ให้เรียกใช้ MessengerExtensions.requestCloseBrowser() นอกจากนี้ คุณยังสามารถเลือกใช้ฟังก์ชั่นการเรียกกลับแบบ Success และการเรียกกลับแบบ Error ได้อีกด้วย

MessengerExtensions.requestCloseBrowser(function success() {
  // webview closed
}, function error(err) {
  // an error occurred
});

การปิดด้วยการเปลี่ยนเส้นทาง

คุณยังสามารถปิดตัวแสดงหน้าเว็บได้โดยเปลี่ยนเส้นทางผู้ใช้ไปยัง URL ด้วยรูปแบบต่อไปนี้

https://www.messenger.com/closeWindow/?image_url=<IMAGE_URL>&display_text=<DISPLAY_TEXT>

ค่าที่ตั้งไว้สำหรับพารามิเตอร์ display_text และ image_url จะแสดงชั่วครู่จนกว่าหน้าต่างจะปิด โปรดทราบว่าวิธีนี้จะปิดเฉพาะในกรณีที่คุณเปลี่ยนเส้นทางจาก URL/หน้าของคุณ การเปิด URL โดยตรงจะไม่เป็นการปิดเบราว์เซอร์

วิธีการดังกล่าวนี้สามารถทำได้บน Android เท่านั้น ส่วนในกรณีที่เป็น iOS จะมีข้อความและรูปภาพปรากฏขึ้น แต่เบราว์เซอร์จะไม่ปิดเองโดยอัตโนมัติ

SDK ส่วนขยายของ Messenger

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

โปรดดูข้อมูลเพิ่มเติมที่การเพิ่ม SDK ส่วนขยายของ Messenger

หลักปฏิบัติที่ดีที่สุด

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

ใช้สำหรับเนื้อหาที่เป็นภาพโดยเฉพาะ

ใช้สำหรับการกำหนดลักษณะของผู้ใช้ หรือเพื่ออนุญาตให้เปลี่ยนแปลงการเลือกก่อนหน้าได้ตามต้องการ

ใช้ร่วมกับการโต้ตอบจากการสนทนาเพิ่มเติม

กำหนดค่าความสูงของตัวแสดงหน้าเว็บของคุณให้ตรงกับเนื้อหาและรักษาบริบทของเธรดด้านล่าง

ใช้ประโยชน์จากส่วนขยายตัวแสดงหน้าเว็บของ Messenger เพื่อนำบริบทของเธรดมาไว้ในตัวแสดงหน้าเว็บ

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

ผสมผสานการโต้ตอบจากการสนทนาและตัวแสดงหน้าเว็บ และทำการโต้ตอบทั้งหมดที่เกิดขึ้นให้สั้นเข้าไว้ รวมการโต้ตอบของเธรดและตัวแสดงหน้าเว็บสำหรับประสบการณ์การใช้งาน “Messenger แบบเนทีฟ”

ตัวอย่างการใช้งาน

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

ขั้นตอนการออกแบบที่แนะนำ

  1. ผู้ใช้จะเข้าถึงประสบการณ์การใช้งานตัวแสดงหน้าเว็บของคุณได้โดยใช้วิธีใดวิธีหนึ่งใน 2 วิธี นั่นคือ ผ่านปุ่ม หากปุ่มนั้นเป็นส่วนหนึ่งของขั้นตอนการสนทนาที่ใหญ่กว่า หรือผ่านรายการเมนูสำหรับการเข้าถึงแบบต่อเนื่อง (เช่น การกำหนดลักษณะ) หรือผ่านทั้ง 2 วิธี
  2. ประสบการณ์ของคุณจะปรากฏเป็นเลเยอร์อยู่บนเธรด ซึ่งจะแสดงแบบเต็มหน้าจอ, ที่ความสูง 75% หรือที่ความสูง 50% โดยขึ้นอยู่กับเนื้อหาและกรณีการใช้งานของคุณ
  3. คุณอาจต้องการส่งเนื้อหาไปยังเธรดในระหว่างหรือหลังจากการโต้ตอบบนตัวแสดงหน้าเว็บ
  4. เมื่อดำเนินการเรียบร้อยแล้ว ผู้ใช้จะสามารถปิดตัวแสดงหน้าเว็บและกลับไปที่เธรดได้ หรือคุณสามารถปิดตัวแสดงหน้าเว็บเองได้ตามการดำเนินการของผู้ใช้ (เช่น ปุ่มบันทึก)