Platform Messenger

Tampilan Web

Dengan Platform Messenger, Anda bisa membuka tampilan web standar, di mana Anda bisa memuat halaman web di Messenger. Platform ini memungkinkan Anda menghadirkan pengalaman dan fitur yang mungkin sulit ditawarkan dengan gelembung pesan, seperti memilih produk yang akan dibeli, kursi yang akan dipesan, atau tanggal reservasi.

Menunjukkan Tampilan Web

Anda dapat membuka tampilan web dengan salah satu hal berikut:

Dalam setiap instance ini, Anda dapat menentukan bagaimana tampilan web akan terlihat dan berperilaku.

Jika pengalaman Anda menggunakan Ekstensi Messenger yang dijelaskan di bagian ini, ingatlah untuk mengatur parameter messenger_extensions ke true di item atau tombol menu tempat Anda menjalankannya!

SDK Ekstensi Messenger - Wajib Memasukkan Domain dalam Daftar Putih

Untuk menampilkan halaman web dengan SDK Ekstensi Messenger diaktifkan di tampilan web Messenger, Anda harus memasukkan domain dalam daftar putih, termasuk sub-domain, di whitelisted_domains properti Profil Messenger bot Anda. Ini memastikan bahwa hanya domain tepercaya yang memiliki akses ke informasi pengguna yang tersedia melalui fungsi SDK.

Untuk informasi selengkapnya tentang memasukkan domain dalam daftar putih, lihat referensi whitelisted_domains.

Mengatur Judul Tampilan Web

Sama seperti tampilan web lain, tanda <title> mengatur teks yang muncul di bilah judul untuk tampilan web.

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

Menutup Tampilan Web

Menutup tampilan web setelah transaksi selesai adalah ide yang bagus, apalagi jika tindakan yang diambil pengguna akan menghasilkan pesan dalam suatu utas. Hal ini dapat dilakukan dengan SDK Ekstensi Messenger atau dengan menggunakan URL pengalihan.

Menutup SDK Ekstensi Messenger

Untuk menutup SDK Ekstensi Messenger, panggil MessengerExtensions.requestCloseBrowser(). Anda juga dapat secara opsional menerapkan fungsi panggilan balik berhasil dan kesalahan.

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

Menutup dengan Pengalihan

Anda juga dapat menutup tampilan web dengan mengalihkan pengguna ke URL dengan format berikut:

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

Nilai yang diatur untuk parameter display_text dan image_url akan ditampilkan sebentar sampai jendela ditutup. Perhatikan bahwa metode ini hanya akan ditutup jika Anda mengalihkan dari URL/Halaman Anda. Membuka URL secara langsung tidak akan menutup browser.

Ini hanya berfungsi di Android. Di iOS, teks dan gambar akan ditampilkan, tetapi browser tidak akan menutup secara otomatis.

SDK Ekstensi Messenger

Untuk memberi Anda kemampuan untuk mengintegrasikan pengalaman dalam tampilan web dengan pengalaman Messenger, kami juga telah menyediakan SDK JavaScript Ekstensi Messenger, yang membuat fungsi tambahan dapat diakses di tampilan web, seperti informasi tentang konteks utas.

Untuk informasi selengkapnya, lihat Menambahkan SDK Ekstensi Messenger.

Praktik Terbaik

Gunakan untuk interaksi yang lebih lama (lebih dari tiga langkah) ketika orang mungkin ingin mengedit masukan mereka atau melanjutkan dengan cara non-linear.

Gunakan ini untuk konten yang khususnya visual.

Gunakan untuk preferensi pengguna, atau untuk mengizinkan perubahan sesuai permintaan pada pilihan sebelumnya.

Gunakan ini dalam kombinasi dengan lebih banyak interaksi percakapan.

Atur tinggi tampilan web Anda agar sesuai dengan kontennya — dan jaga konteks utas di bawahnya.

Manfaatkan ekstensi tampilan web Messenger untuk membawa konteks utas ke tampilan web.

Jangan merasa terbatas hanya mengumpulkan semua informasi formulir sekaligus. Anda dapat mengambilnya sepotong demi sepotong per percakapan, kemudian gunakan formulir di tampilan web untuk diedit nantinya.

Campur interaksi percakapan dan tampilan web, dan buat interaksi yang diberikan tetap singkat. Gabungkan interaksi utas dan tampilan web untuk pengalaman "Messenger-native".

Contoh Penggunaan

  • Pengalaman pencarian tiket dapat menampilkan peta kursi stadion interaktif untuk memilih kursi.
  • Pengalaman bepergian dapat memberikan preferensi perjalanan—duduk di dekat lorong vs. jendela, penginapan vs. hotel, kebutuhan diet—dapat diakses dari menu persisten.
  • Pengalaman janji temu dokter gigi dapat menampilkan kalender interaktif untuk memilih slot janji temu.
  • Penerbit berita dapat menyediakan daftar topik beberapa pilihan untuk berlangganan.
  • Suatu merek dapat menawarkan preferensi pribadi untuk menyesuaikan tawaran dan hadiah gratis.

Rekomendasi Alur Desain

  1. Orang-orang mengakses tampilan web Anda mengalami salah satu dari dua cara: melalui tombol jika merupakan bagian dari alur percakapan yang lebih besar, atau item menu untuk akses berkelanjutan (misalnya: preferensi)—atau keduanya.
  2. Pengalaman Anda muncul sebagai layer di atas utas—layar penuh, pada ketinggian 75%, atau pada ketinggian 50%, bergantung pada konten dan kasus penggunaan Anda.
  3. Anda mungkin ingin mengirim konten ke utas selama atau setelah interaksi tampilan web.
  4. Setelah selesai, orang-orang dapat menutup tampilan web dan kembali ke utas—atau Anda dapat menutupnya sendiri sebagai tanggapan atas tindakan yang mereka ambil (misalnya: tombol Simpan).