Chế độ xem web

Với Nền tảng Messenger, bạn có thể mở chế độ xem web tiêu chuẩn để tải các trang web bên trong Messenger. Khi đó, bạn có thể mang lại những trải nghiệm và tính năng khó cung cấp qua bong bóng tin nhắn, chẳng hạn như chọn sản phẩm cần mua, chỗ ngồi muốn đặt hoặc khoảng ngày sẽ đặt trước.

Hiển thị chế độ xem web

Bạn có thể mở chế độ xem web theo bất kỳ cách nào sau đây:

Trong mỗi trường hợp này, bạn có thể chỉ định giao diện và cách thức hoạt động của chế độ xem web.

Nếu trải nghiệm của bạn sử dụng Tiện ích Messenger được mô tả trong phần này, hãy nhớ đặt thông số messenger_extensionstrue trong mục menu hoặc nút mà bạn đang gọi thông số đó!

SDK Tiện ích Messenger – Yêu cầu đưa miền vào danh sách hợp lệ

Để hiển thị một trang web khi bật SDK Tiện ích Messenger trong chế độ xem web của Messenger, bạn phải đưa miền (kể cả miền con) vào danh sách hợp lệ trong thuộc tính whitelisted_domains của Trang cá nhân Messenger cho bot. Điều này đảm bảo rằng chỉ những miền đáng tin cậy mới quy cập được thông tin người dùng có sẵn qua chức năng của SDK.

Để biết thêm thông tin về cách đưa miền vào danh sách hợp lệ, hãy xem tài liệu tham khảo về whitelisted_domains.

Đặt tiêu đề cho chế độ xem web

Cũng giống như bất kỳ trang web nào, thẻ <title> sẽ đặt văn bản hiển thị trong thanh tiêu đề cho chế độ xem web.

<html><head><title>My Awesome Webview</title></head>
   ...
</html>

Đóng chế độ xem web

Bạn nên đóng chế độ xem web sau khi hoàn tất giao dịch, đặc biệt khi hành động người dùng thực hiện sẽ dẫn đến một tin nhắn trong chuỗi trò chuyện. Bạn có thể thực hiện việc này bằng SDK Tiện tích Messenger hoặc sử dụng URL chuyển hướng.

Đóng bằng SDK Tiện ích Messenger

Để đóng chế độ xem web bằng SDK Tiện ích Messenger, hãy gọi MessengerExtensions.requestCloseBrowser(). Bạn cũng có thể tùy ý triển khai các hàm gọi lại thành công và hàm gọi lại lỗi.

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

Đóng bằng lệnh chuyển hướng

Bạn cũng có thể đóng chế độ xem web bằng cách chuyển hướng người dùng đến URL có định dạng sau:

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

Các giá trị được đặt cho thông số display_textimage_url sẽ hiển thị trong thời gian ngắn cho đến khi cửa sổ đóng lại. Lưu ý rằng phương thức này sẽ chỉ đóng lại khi bạn chuyển hướng từ URL/Trang của mình. Trình duyệt sẽ không đóng lại khi bạn mở trực tiếp URL này.

Phương thức này chỉ dùng được trên Android. Trên iOS, văn bản và hình ảnh sẽ hiển thị nhưng trình duyệt sẽ không tự động đóng lại.

SDK Tiện ích Messenger

Để đem lại cho bạn khả năng tích hợp chặt chẽ các trải nghiệm trong chế độ xem web với trải nghiệm Messenger, chúng tôi cũng đã cung cấp SDK Tiện ích Messenger dành cho Javascript để người dùng có thể truy cập chức năng bổ sung trong chế độ xem web, chẳng hạn như thông tin về ngữ cảnh của chuỗi trò chuyện.

Hãy xem phần Thêm SDK Tiện ích Messenger để biết thêm thông tin.

Cách làm tốt nhất

Sử dụng chế độ xem web cho các hoạt động tương tác lâu hơn (nhiều hơn 3 bước), trong đó mọi người có thể muốn chỉnh sửa dữ liệu nhập hoặc tiếp tục theo kiểu phi tuyến tính.

Sử dụng chế độ xem web cho nội dung đặc biệt trực quan.

Sử dụng chế độ xem web cho tùy chọn của người dùng hoặc để cho phép thay đổi lựa chọn trước đó theo nhu cầu.

Sử dụng chế độ xem web cùng với các hoạt động tương tác mang tính trò chuyện hơn.

Đặt cấu hình độ cao của chế độ xem web sao cho phù hợp với nội dung – và giữ nguyên ngữ cảnh của chuỗi trò chuyện bên dưới.

Tận dụng các tiện ích chế độ xem web của Messenger để đưa ngữ cảnh chuỗi trò chuyện vào chế độ xem web.

Đừng chỉ giới hạn ở việc thu thập tất cả thông tin trên mẫu cùng lúc. Bạn có thể thu thập từng chút một qua trò chuyện, sau đó sử dụng mẫu trong chế độ xem web để chỉnh sửa sau.

Kết hợp hoạt động tương tác qua trò chuyện và chế độ xem web, đồng thời nêu ngắn gọn mọi hoạt động tương tác đã cho. Kết hợp hoạt động tương tác qua chuỗi trò chuyện và chế độ xem web để mang lại trải nghiệm "Messenger gốc".

Trường hợp sử dụng mẫu

  • Trải nghiệm tìm kiếm vé có thể hiển thị một sơ đồ chỗ ngồi trên sân vận động mang tính tương tác để chọn chỗ ngồi.
  • Trải nghiệm du lịch có thể cung cấp các tùy chọn du lịch – gần lối đi lại hay cửa sổ, nhà trọ hay khách sạn, nhu cầu ăn kiêng – có thể truy cập từ menu cố định.
  • Trải nghiệm hẹn khám nha khoa có thể hiển thị một lịch mang tính tương tác để chọn buổi hẹn.
  • Nhà phát hành tin tức có thể cung cấp danh sách cho phép chọn nhiều chủ đề để đăng ký.
  • Một thương hiệu có thể cung cấp các tùy chọn cá nhân để tùy chỉnh ưu đãi và quà tặng miễn phí.

Quy trình thiết kế được đề xuất

  1. Mọi người truy cập vào trải nghiệm chế độ xem web của bạn theo một trong 2 cách: qua nút nếu nút đó thuộc một quy trình trò chuyện lớn hơn hoặc mục menu để có quyền truy cập liên tục (ví dụ: tùy chọn) – hoặc theo cả hai cách này.
  2. Trải nghiệm của bạn hiển thị dưới dạng lớp trong chuỗi trò chuyện – toàn màn hình, ở độ cao 75% hoặc ở độ cao 50%, tùy thuộc vào nội dung và trường hợp sử dụng của bạn.
  3. Bạn nên gửi nội dung đến chuỗi trò chuyện trong hoặc sau khi tương tác qua chế độ xem web.
  4. Khi hoàn tất, mọi người có thể đóng chế độ xem web và quay lại chuỗi trò chuyện – hoặc bạn có thể tự đóng chế độ xem web để phản hồi hành động mà mọi người thực hiện (ví dụ: nút Lưu).