Sematkan WhatsApp Connect

Jika Anda adalah penyedia SaaS atau solusi dan ingin pelanggan Anda menghubungkan nomor telepon WhatsApp mereka melalui Akun Chakra Anda, ikuti langkah-langkah berikut

1. Buat token koneksi

Untuk menyematkan tombol koneksi di halaman web/aplikasi web Anda, pertama-tama Anda perlu membuat token koneksi. Harap diperhatikan bahwa token ini hanya berlaku selama 1 jam.

Gunakan Create Connect Token API untuk melakukannya. Idealnya, token ini dibuat di backend dan diteruskan ke frontend.

Parameter yang diperlukan untuk API ini saat digunakan untuk klien baru, yang belum memiliki plugin di Chakra:

• newPluginName - [opsional] Nama plugin baru yang akan dibuat untuk klien. Jika tidak ada nilai yang diberikan, nama plugin akan menjadi "WhatsApp". Sebaiknya tambahkan nama klien atau pengenal lain yang bermakna dan mudah dibaca di kolom ini. Nama ini akan menjadi nama plugin di Chakra, dan Anda dapat mencari plugin di aplikasi web Chakra menggunakan nama ini.
• clientReferenceId - [opsional] ID referensi unik untuk klien. Biasanya, ini adalah ID pengguna/ID unik klien di sistem internal Anda. Ini akan membantu menjaga keterkaitan antara sistem Chakra dan sistem internal Anda.
• clientName - [opsional] Nama klien berdasarkan sistem internal Anda. Biasanya, ini adalah nama pengguna.
• clientEmail - [opsional] Alamat email klien
• clientPhone - [opsional] Nomor telepon klien

Parameter yang diperlukan untuk API ini saat digunakan untuk klien yang sudah ada, yang telah memiliki plugin di Chakra:

• `pluginId` - ini adalah pluginId dari plugin WhatsApp tempat detail WABA yang terhubung disimpan. Anda akan menerima dan menyimpan pluginId ini saat klien menyelesaikan alur Embedded Signup untuk pertama kalinya. Jangan gunakan pluginId yang sama untuk semua klien; Anda sangat disarankan untuk membuat plugin baru untuk setiap klien. Untuk klien baru, parameter ini tidak boleh disertakan dalam parameter body.

2. Sematkan SDK

Untuk menyematkan SDK, tambahkan tag skrip berikut ke bagian head halaman web Anda

<script src="https://embed.chakrahq.com/whatsapp-partner-connect/v1_0_1/sdk.js"></script>

Buat div container dengan ID unik di halaman web Anda, lalu tambahkan tag skrip berikut di bagian akhir halaman web. Tag skrip ini harus ditambahkan setelah div container; jika tidak, proses inisialisasi akan gagal. Berikut contoh cuplikannya:

  <div id="container">  </div>  <script>    const connectToken = "<CONNECT-TOKEN>";    const chakraWhatsappConnect = ChakraWhatsappConnect.init({      connectToken: connectToken,      container: '#container',   // optional, defaults to document.body      onMessage: (event, data) => console.log(event, data),      onReady: () => console.log('ready'),      onError: (err) => console.error(err),	  onSuccess: (data) => console.log('Connection successful, data:', data)    });    // Later, you can destroy the iframe:    // chakraWhatsappConnect.destroy();  </script>  

Argumen data dari fungsi onSuccess akan memiliki kunci pluginId, whatsappBusinessAccounts dan whatsappPhoneNumbers . Anda sangat disarankan untuk menyimpan nilai pluginId yang diterima di sini pada catatan pelanggan/klien Anda di sistem internal, lalu menggunakan pluginId ini saat membuat connectToken untuk klien tersebut di kemudian hari. Dengan begitu, jika klien ingin menambahkan atau mengubah WABA atau Nomor Telepon, data tersebut akan dipetakan ke plugin yang benar di Chakra.

3. Periksa apakah integrasi berhasil

Jika integrasi berhasil, Anda akan melihat tombol "Connect with Facebook" seperti yang ditunjukkan pada tangkapan layar di bawah

Menghubungkan nomor telepon WhatsApp

Sekarang pelanggan Anda dapat mengeklik tombol "Connect with Facebook" dan menyelesaikan pendaftaran tersemat. Alur yang berhasil akan terlihat seperti demo di bawah ini: