Menambahkan SDK Ekstensi Messenger

SDK Ekstensi Messenger menghadirkan fitur khusus Messenger yang berharga ke situs web atau aplikasi web apa pun yang dibuka di tampilan web Messenger. Dengan SDK, Anda dapat mengambil informasi tentang orang yang membuka tampilan web, membagikan konten ke percakapan di Messenger, dan terintegrasi secara mendalam dengan UI Messenger.

Fitur yang Tersedia

Fitur berikut tersedia di tampilan web Messenger ketika Anda menyertakan SDK Ekstensi Messenger. Harap diperhatikan bahwa ketersediaan fitur yang sebenarnya dapat bervariasi berdasarkan versi Messenger dan perangkat.

Fungsi	Deskripsi
getContext()	Mengambil konteks percakapan seperti PSID dari orang yang membuka tampilan web.
requestCloseBrowser()	Menutup tampilan web dan kembali ke percakapan Messenger.
askPermission()	Meminta izin untuk melakukan hal-hal seperti mengambil informasi profil seseorang.
getGrantedPermissions()	Memeriksa izin yang diberikan saat ini.
getSupportedFeatures	Memeriksa fitur apa yang didukung dalam tampilan web pada perangkat saat ini, seperti bagikan.

Untuk detail lengkap tentang penggunaan fitur ini, lihat referensi SDK Ekstensi Messenger.

Menginstal SDK

1. Memasukkan domain ke daftar putih

Untuk menggunakan Ekstensi Messenger di bot Anda, Anda harus terlebih dahulu memasukkan domain asal layanan halaman ini ke daftar putih; untuk alasan keamanan, semua domain di halaman web Anda harus ditambahkan ke domain yang masuk daftar putih. Baca dokumen referensi tentang memasukkan ke daftar putih untuk detail selengkapnya.

Anda dapat dengan mudah menambahkan domain ke daftar putih secara terprogram menggunakan API berikut:

 
curl -X POST -H "Content-Type: application/json" -d '{
  "whitelisted_domains":[
    "https://petersfancyapparel.com"
  ]
}' "https://graph.facebook.com/v21.0/me/messenger_profile?access_token=PAGE_ACCESS_TOKEN"

Setelah berhasil, API Profil Messenger akan menanggapi:

{"result":"success"}

2. Menyertakan SDK JavaScript Ekstensi Messenger

Tambahkan SDK JavaScript Ekstensi Messenger ke halaman yang dimuat dalam tampilan web dengan kode di bawah ini. Anda harus menyisipkannya langsung setelah tanda body pembuka pada tiap halaman yang ingin Anda muat:

(function(d, s, id){
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) {return;}
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/messenger.Extensions.js";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'Messenger'));

3. Tunggu peristiwa dimuat SDK

window.extAsyncInit() akan dipanggil ketika SDK JavaScript Ekstensi Messenger selesai dimuat. Anda dapat menggunakan ini sebagai pemicu untuk memanggil fungsi lain yang tersedia di SDK.

window.extAsyncInit = function() {
  // the Messenger Extensions JS SDK is done loading 
};

Menggunakan SDK di Klien Web Messenger

SDK Ekstensi Messenger didukung untuk digunakan pada klien Messenger seluler dan desktop. Namun, Anda mungkin harus mempertimbangkan hal-hal berikut agar SDK bekerja dengan baik.

Anda juga dapat menggunakan properti window.name untuk memeriksa lokasi iframe dari kode sisi klien.

Ketika iframe dipicu di web Messenger, kami mengatur window.name menjadi "messenger_ref". Jika tidak, saat memuat tab obrolan Facebook, window.name akan menjadi "facebook_ref".

Fitur yang Tidak Didukung

Pengaturan atau fitur berikut tidak didukung pada klien web Messenger. Pengaturan atau fitur tersebut masih berfungsi dengan baik di klien seluler Messenger.

webview_height_ratio
webview_share_button
Tombol navigasi kembali
Judul dialog
Menutup tampilan web melalui pengalihan URL

Pemecahan Masalah

Jika Anda tidak dapat menghubungi SDK Ekstensi Messenger dari halaman Anda, pertimbangkan hal-hal berikut:

Ketika Anda membuka tampilan web dari menu persisten atau tombol, pastikan parameter messenger_extensions diatur ke true. Jika pengguna telah membuka tampilan web melalui pesan bersama, mereka tidak wajib telah berbicara dengan bot Anda agar Ekstensi Messenger berfungsi.
Periksa apakah Anda telah memasukkan domain tempat halaman di-hosting ke daftar putih.
Periksa apakah SDK JavaScript telah disertakan di setiap halaman yang menggunakan ekstensi.
Pastikan Anda tidak mencoba memanggil fungsi apa pun sebelum SDK selesai dimuat. Gunakan window.extAsyncInityang dideskripsikan di sini untuk memberi tahu saat selesai memuat.
Pastikan halaman tersebut disajikan melalui https dan tidak menyertakan porta nonstandar.