Tutorial Partnership Barantum pada Platform Meta

Dipebarui 22 November 2024

Bagikan Artikel

Salin Link

Prasyarat

-         Anda sudah membuat dan memiliki akun developer Meta.

-         Anda sudah membuat dan memiliki Meta App.

 

Prosedur Mengajukan Partnership Barantum pada Platform Meta

Phase 1: Onboarding Tech Partnership:

  •  Akses website Meta Developer di https://developers.facebook.com/apps .
  • Pilih Meta App yang akan menjadi partnership dengan Barantum.
  • Setelah masuk halaman dashboard Meta App-nya, selanjutnya Anda scroll ke bawah sedikit, lalu cari produk Whatsapp. Klik tombol Set up untuk diarahkan ke halaman pengaturan Whatsapp.
  • Pada halaman Whatsapp, tekan tombol yang ditunjuk pada gambar di bawah. Kemudian akan muncul window untuk melanjutkan proses.


  • Saat dihadapkan pada pilihan window berikut, pilih Working with a Solution Partner dan klik Start onboarding.



Phase 2: Proses Onboarding

Pada phase ini, Anda harus melakukan tiga step besar dan harus berurutan prosesnya, yaitu verifikasi bisnis Anda kepada Meta, Meta App review, dan verifikasi akses.

 

Phase 2.1 : Verifikasi Bisnis

Pada fase ini, Anda harus melakukan pengisian informasi perusahaan Anda selengkap-lengkapnya kepada Meta. Persiapkan salah satu dari empat dokumen yang diperlukan untuk verifikasi bisnis Anda ke Meta.

1.     Laporan bank bisnis.

2.     Dokumen pendaftaran atau lisensi bisnis.

3.     Dokumen pajak bisnis.

4.     Sertifikat atau akta pendirian.

Jika sudah melakukan pengisian dan submisi form, biasanya proses review dari Meta memakan waktu 5 hari kerja.

 

Phase 2.2 : Membuat Partnership Solution

Fase ini Anda akan dipandu untuk pembuatan Partnership Solution. Berikut prosedurnya.

  • Akses Meta App Anda yang akan menjadi partnership dengan Barantum.
  • Pada navigasi tab kiri, pilih Whatsapp à Partner Solutions.
  • Selanjutnya Anda akan dihadapkan dengan tampilan gambar di bawah ini.


  • Isi Solution name dengan nama perusahaan atau brand bisnis Anda. Silakan request Partner App ID Barantum melalui email [email protected].
  • Setelah diisi, tekan Send request dan infokan tim kami untuk selanjutnya direview.
  • Jika tim kami menyetujui partnership, pada halaman ini tampilannya terdapat pada gambar di halaman selanjutnya.


Phase 2.3 : App Review

Setelah partnership Anda disetujui oleh Barantum, selanjutnya Anda harus melakukan App Review. Ikuti panduan berikut untuk melakukan App Review.

Siapkan Video

1.     Siapkan video untuk melakukan kirim pesan chat dan membuat pesan templat. Untuk contoh video, silakan akses link berikut.

a.     Kirim pesan: https://drive.google.com/file/d/1aV5adVYm6p9Oom2CBiw6cSSzO8v38aBW/view?usp=sharing

b.     Membuat pesan templat: https://drive.google.com/file/d/10SuK6nLoaO945bLUA9O17k-AsoiPaFby/view?usp=sharing

2.     Untuk videonya, Anda harus rekam sendiri sesuai pada prosedur contoh video. Peralatan Anda bisa gunakan HP Anda untuk melakukan rekaman pada layar PC/Laptop.


Request Permission Advanced

  • Akses App Meta-nya kembali, lalu di menu kiri, tekan tombol Permission and features pada menu App Review seperti pada gambar di bawah ini.


  • Cari tiga permission yang Anda harus request. Referensi tampilan terdapat pada halaman selanjutnya.

a.     Whatsapp_business_messaging à pencarian bagian atas

b.     Whatsapp_business_management à pencarian bagian bawah

c. Public_profile à pencarian bagian atas


  • Khusus untuk permission public_profile, sebelum Anda bisa melakukan request, Anda harus melengkapi URL untuk kebijakan privasi seperti pada gambar di bawah berikut. Silakan tekan Basic Settings untuk diarahkan ke halaman pengisiannya.


  • Setelah diarahkan pada halaman seperti gambar di bawah, Anda tinggal isi form yang ditunjuk panah, kemudian tekan Save changes.

  • Kembali ke halaman Permission and Features, silakan cari permission public_profile dan tekan Request advanced access untuk dihadapkan dengan beberapa pertanyaan yang Anda perlu jawab. Jika tidak paham, silakan ajukan bantuan kepada tim kami.
  • Setelah Anda menyelesaikan pengisian, jika pengisian Anda valid, maka permission tersebut akan langsung terupgrade ke Advanced Access.
  • Akses halaman Requests yang terdapat pada App Review, kemudian tekan Edit untuk memulai halaman pengisian.
  • Pada halaman ini, Anda akan dihadapkan lima poin pengisian.

a.     Verifikasi bisnis (kalau sudah verified, ini bisa diskip).

b.     Pertanyaan data handling.

c.     Complete app settings (sudah diselesaikan pada step 4).

d.     Complete app verification.

e.     Menjelaskan fungsi dan value pada setiap permission.

  • Pada pertanyaan data handling, silakan konsultasikan dengan tim legal Anda terkait pengolahan data pada bisnis Anda.

 

Complete App Verification

Untuk menyelesaikan app verification, Anda harus menambahkan platform pada Meta App yang sudah dihubungkan dengan Barantum. Berikut prosedurnya.

  • Akses halaman Basic pada App settings.
  • Scroll ke halaman paling bawah, tekan + Add platform.


  • Pilih platform Anda, kemudian tekan Next.
  • Berikut hasil tampilan setelah menambahkan platform seperti pada gambar di bawah berikut.


  • Jika website, silakan isi site URL platform Anda dan tekan Add or update instructions. Pada bagian ini, Anda isi form sesuai dengan permintaan. Lalu tekan Save untuk menyimpan.
  • Selanjutnya kembali ke halaman Requests pada App Review untuk melanjutkan step selanjutnya.


Menjelaskan Fungsi Dan Value Pada Setiap Permission

  • Anda cukup scroll ke paling bawah untuk mendapatkan permission seperti pada gambar berikut.


  • Setiap permission Anda bisa akses untuk mengisi form dengan klik anak panah.
  • Pada form seperti pada gambar di bawah, Anda isi kebutuhan advanced access pada platform Anda untuk apa, bagaimana menambah value pada pengguna, dan juga berikan alasan kenapa permission ini penting sekali.


  • Untuk video yang diupload, silakan Anda upload dengan prosedur berikut

a.     Video mengirimkan pesan à whatsapp_business_messaging.

b.     Video membuat pesan templat baru à whatsapp_business_management.

  • Silakan centang pada pernyataan di bawahnya supaya Anda bisa klik Save untuk mensubmit form.
  • Setelah semua informasi lengkap, Anda tekan Submit for Review untuk dilakukan review. Pada fase ini, biasanya Anda perlu menunggu paling lama 5 hari kerja.


Phase 3.0 : Access Verification

Fase ini bisa disubmit barengan dengan App Review. Proses ini Anda hanya perlu melakukan pengisian pada pertanyaan yang diajukan oleh Meta. Pastikan Anda melakukan pengisian sesuai dengan kondisi bisnis Anda. Biasanya, prosesnya lebih cepat, sekitar 1 hari kerja.

Berikut pertanyaan yang diajukan dari Meta.


Jika ada follow up dari Meta, berikut pertanyaan selanjutnya.


Prosedur Menambahkan Tombol Embedded Whatsapp Signup

Tutorial ini ditujukan kepada Anda yang akan mengimplementasikan tombol embedded signup Whatsapp pada platform Anda.

Prasyarat

-         Sudah menyelesaikan phase 2.2 terkait membuat Partnership Solution.

-         Memiliki server backend dengan sertifikat SSL yang valid di mana berfungsi untuk memproses Webhook dari Meta.

Phase 3.1 : Menambahkan Webhook account_update pada App Meta

  • Akses halaman Developer App Meta melalui https://developers.facebook.com/apps, kemudian pilih Meta App yang sebelumnya digunakan untuk proses partnership.
  • Pada halaman Meta App tadi, di navigasi kiri tekan Webhooks. Referensi pada gambar di bawah berikut.

  • Di halaman Webhooks, silakan tekan tombol User dan pilih Whatsapp Business Account.

  • Kemudian, silakan tekan tombol Subscribe to this object dan akan muncul pop up untuk mengisi endpoint server Anda yang akan memproses beserta verifikasi kuncinya.
  • Setelah pengisian, silakan tekan Verify and save. Jika berhasil, maka akan muncul seperti gambar di halaman selanjutnya.

  • Cari account update dan tekan Subscribe untuk menyelesaikan phase ini.

  • Pada endpoint yang Anda sudah set sebelumnya, akan menerima informasi setiap customer yang sudah menyelesaikan proses embedded signup. Dari informasi itu sistem Anda bisa menyimpan perihal informasi bisnis Meta customer yang dibutuhkan untuk fungsional chatting.


Phase 3.2 : Menambahkan Domain Yang Diizinkan Pada Meta App

Meta sangat ketat bila membicarakan mengenai keamanan sistem. Pada fase ini, Anda akan kami pandu untuk membuat whitelist domain Anda di mana ini penting untuk membuat proses embedded signup berjalan lancar.

  • Akses halaman Developer App Meta melalui https://developers.facebook.com/apps, kemudian pilih Meta App yang sebelumnya digunakan untuk proses partnership.
  • Di halaman Dashboard, silakan cari produk Facebook Login for Business seperti pada gambar di bawah. Kemudian Anda klik Set up untuk memulai.


  • Pada kartu form gambar di bawah, silakan Anda toggle Yes pada opsi berikut

a.     Client OAuth Login.

b.     Web OAuth Login

c.     Enforce HTTPS.

d.     Embedded Browser OAuth Login.

e.     Use Strict Mode for redirect URI.

f.       Login with the Javascript


  • Setelah itu, Anda isi Allowed Domain for the Javascritp SDK dengan domain platform tampilan Anda (frontend, bukan backend). Domain yang ditambahkan harus menggunakan https.
  • Silakan tekan Save changes di mana terletak di bawah kanan untuk menyimpan perubahan yang Anda set.


Phase 4.3 : Konfigurasi Facebook Login

Prosedur ini bertujuan untuk implementasi pembuatan tombol Embedded Signup. Silakan ikuti prosedur berikut.

  • Akses halaman Developer App Meta melalui https://developers.facebook.com/apps, kemudian pilih Meta App yang sebelumnya digunakan untuk proses partnership.
  • Akses halaman Configurations pada menu Facebook Login for Business.

  • Pada halaman Configurations, tekan Create configuration dan Anda dialihkan ke halaman pembuatan pengaturan.
  • Berikan nama konfigurasi yang mudah dikenal, lalu tekan Next.


  • Pilih login variation Whatsapp Embedded Signup, lalu tekan Next.


  • Kemudian, Anda memilih pengaturan akses token setelah melakukan integrasi. Kami serahkan ke Anda untuk konfigurasi masa aktifnya (60 hari atau lifetime).
  • Selanjutnya, Anda perlu memilih asset yang diperlukan saat melakukan embedded signup.


  • Pilih minimal dua permission seperti pada gambar di bawah. Jika ingin menggunakan permission lainnya, pastikan permission lainnya sudah mendapatkan izin advanced access.


  • Setelah itu, tekan Create dan Anda akan mendapatkan ID konfigurasinya. Silakan disalin dan disimpan.


Phase 4 : Implementasi Embedded Signup pada Website

Setelah menyelesaikan fase 1 – 3, pada fase ini Anda membutuhkan programmer yang bisa melakukan pemasangan tombolnya. Berikut prosedurnya.

1.     Silakan pasang koding berikut pada website Anda. Source code silakan gunakan pada halaman selanjutnya.

2.     Pada koding tersebut, ada dua hal yang perlu direplace.

a.     <APP_ID> : Meta App ID.

b.     <GRAPH_API_VERSION> : Versi Graph API Meta, gunakan v21.0.

3.     Setelah ditambahkan, silakan tes apakah tombol tersebut sudah berfungsi atau belum.



Source Code:

<!-- SDK loading -->

<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script>


<script>

 // SDK initialization

 window.fbAsyncInit = function() {

  FB.init({

   appId: '<APP_ID>', // your app ID goes here

   autoLogAppEvents: true,

   xfbml: true,

   version: '<GRAPH_API_VERSION>' // Graph API version goes here

  });

 };

  

 // Session logging message event listener

 window.addEventListener('message', (event) => {

  if (event.origin !== "https://www.facebook.com" && event.origin !== "https://web.facebook.com") return;

  try {

   const data = JSON.parse(event.data);

   if (data.type === 'WA_EMBEDDED_SIGNUP') {

    console.log('message event: ', data); // remove after testing

    // your code goes here

   }

  } catch {

   console.log('message event: ', event.data); // remove after testing

   // your code goes here

  }

 });

  

 // Response callback

 const fbLoginCallback = (response) => {

  if (response.authResponse) {

   const code = response.authResponse.code;

   console.log('response: ', code); // remove after testing

   // your code goes here

  } else {

   console.log('response: ', response); // remove after testing

   // your code goes here

  }

 }

  

 // Launch method and callback registration

 const launchWhatsAppSignup = () => {

  FB.login(fbLoginCallback, {

   config_id: '<CONFIGURATION_ID>', // your configuration ID goes here

   response_type: 'code',

   override_default_response_type: true,

   extras: {

    setup: {},

    featureType: '',

    sessionInfoVersion: '3',

   }

  });

 }

</script>


<!-- Launch button -->

<button onclick="launchWhatsAppSignup()" style="background-color: #1877f2; border: 0; border-radius: 4px; color: #fff; cursor: pointer; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: bold; height: 40px; padding: 0 24px;">Login with Facebook</button>


 

<!-- SDK loading -->

<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script>

 

<script>

 // SDK initialization

 window.fbAsyncInit = function() {

   FB.init({

     appId: '<APP_ID>', // your app ID goes here

     autoLogAppEvents: true,

     xfbml: true,

     version: '<GRAPH_API_VERSION>' // Graph API version goes here

   });

 };

 

 // Session logging message event listener

 window.addEventListener('message', (event) => {

   if (event.origin !== "https://www.facebook.com" && event.origin !== "https://web.facebook.com") return;

   try {

     const data = JSON.parse(event.data);

     if (data.type === 'WA_EMBEDDED_SIGNUP') {

       console.log('message event: ', data); // remove after testing

       // your code goes here

     }

   } catch {

     console.log('message event: ', event.data); // remove after testing

     // your code goes here

   }

 });

 

 // Response callback

 const fbLoginCallback = (response) => {

   if (response.authResponse) {

     const code = response.authResponse.code;

     console.log('response: ', code); // remove after testing

     // your code goes here

   } else {

     console.log('response: ', response); // remove after testing

     // your code goes here

   }

 }

 

 // Launch method and callback registration

 const launchWhatsAppSignup = () => {

   FB.login(fbLoginCallback, {

     config_id: '<CONFIGURATION_ID>', // your configuration ID goes here

     response_type: 'code',

     override_default_response_type: true,

     extras: {

       setup: {},

       featureType: '',

       sessionInfoVersion: '3',

     }

   });

 }

</script>

 

<!-- Launch button -->

<button onclick="launchWhatsAppSignup()" style="background-color: #1877f2; border: 0; border-radius: 4px; color: #fff; cursor: pointer; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: bold; height: 40px; padding: 0 24px;">Login with Facebook</button>



 

Apakah pertanyaan Anda terjawab?


Jangan sungkan hubungi tim kami melalui Barantum Support Center

Whatsapp Kami