Integrations merupakan sebuah fitur Omnichannel Qontak di mana para customer bisa menghubungkan berbagai platform dengan chat panel.

Penting
Hanya pengguna dengan role Admin yang dapat melakukan integrasi. Apabila Anda tidak memiliki akun dengan role Admin, Anda dapat menghubungi tim support kami di support-qontak@mekari.com.

Untuk mengelola integrasi Qontak Omnichannel dengan Live Chat pada Web, Anda perlu mengikuti langkah-langkah berikut:

A. Cara Integrasi Live Chat dengan Widget Baru dengan Mode Any Visitor

Fitur Any visitor memungkinkan Qontak mengenali pengunjung website melalui kode OTP yang dikirimkan ke email. Untuk menggunakannya, Anda hanya perlu memasang satu tag script yang sama di setiap halaman website. Pengunjung perlu memasukkan kode OTP untuk proses verifikasi, tetapi Anda tidak perlu melakukan pekerjaan tambahan di sisi Anda. Fitur ini memerlukan domain yang sama persis dengan alamat website dan cocok digunakan pada website publik, toko online, serta halaman bantuan. 

Berikut langkah-langkahnya.

1. Pada menu Channel Integration, klik “Manage” pada bagian Live chat.
   
2. Pilih “Add widget”.
   

3. Selanjutnya isikan kolom Widget name. 
   

   Nama yang hanya dilihat tim Anda, maksimal 30 karakter: huruf, angka, spasi, tanda hubung, dan garis bawah. 

4. Pada bagian Choose an audience, pilih mode Any visitor.
   

5. Kemudian pada kolom Domain, masukkan alamat website tempat widget akan ditampilkan. Pastikan Anda mencantumkan alamat website secara lengkap, termasuk  https:// dan www jika digunakan pada website Anda. Sebagai contoh: https://www.example.com. Pastikan alamat yang dimasukkan sesuai dengan alamat website agar widget dapat berjalan pada domain yang ditentukan.
   

   Alamat Domain yang menggunakan www dan tanpa www dianggap sebagai dua Domain yang berbeda. Hal yang sama berlaku untuk setiap subdomain. Pastikan Anda memasukkan alamat Domain yang sesuai dengan alamat yang digunakan pengunjung untuk mengakses website. 
   
   Jika alamat Domain tidak sesuai, tombol chat akan menampilkan pesan error “This website is not registered for chat” dan “Please contact the business another way.” Pesan tersebut disertai baris Support code yang diakhiri dengan widget_invalid.
   
   Satu widget hanya dapat digunakan untuk satu Domain. 

6. Kemudian klik “Add widget”.
   
7. Jika data yang Anda masukkan benar atau sesuai maka akan muncul pop up berikut sebagai informasi bahwa data yang Anda masukkan sudah terbuat.
   

8. Selanjutnya, Anda akan diarahkan ke halaman Widget setup. Pada tab Connection, di bagian Entry point, pilih metode identifikasi pengunjung yang akan digunakan, yaitu Email atau Phone number. Jika memilih Email, pengunjung perlu memasukkan alamat email dan kode OTP yang dikirimkan ke alamat tersebut. Jika memilih Phone number, pengunjung perlu memasukkan nomor telepon dan alamat email, lalu memasukkan kode OTP yang dikirimkan ke alamat email untuk verifikasi identitas.
   

9. Kemudian, salin blok Embed code.
   
10. Tempelkan blok kode berikut tepat sebelum tag </body> pada setiap halaman yang menampilkan fitur chat. Berikut contoh blok kode yang perlu ditambahkan: 
    

11. Buka website Anda menggunakan alamat yang sesuai dengan Domain yang telah dikonfigurasi. Tombol chat akan muncul di sudut kanan bawah halaman. Klik tombol tersebut untuk menampilkan formulir yang meminta alamat email atau nomor telepon dan alamat email, sesuai dengan pengaturan Entry point. 
    

    - Jika website dibuka melalui localhost, alamat preview, atau alamat lain yang tidak sesuai dengan konfigurasi Domain (misalnya, Domain didaftarkan tanpa www, tetapi website diakses menggunakan www), tombol chat akan menampilkan pesan error.
    - Blok kode di konsol sudah berisi host widget dan kode widget Anda. Jika memasukkan tag secara manual, ganti WIDGET_HOST dengan host widget yang tersedia di bagian Environment dan alamat, lalu ganti YOUR_WIDGET_CODE dengan kode widget Anda.

B. Cara Integrasi Live Chat dengan Widget Baru dengan Mode Signed-in User

Mode Signed-in user memungkinkan pelanggan yang sudah masuk ke aplikasi Anda menggunakan widget tanpa perlu memasukkan kode OTP. Pada opsi ini, identitas pengunjung dikenali melalui server aplikasi Anda. Gunakan mode ini jika pengunjung sudah masuk ke aplikasi Anda. Server akan mengidentifikasi pengunjung dan mengirimkan informasinya ke Qontak, sehingga pengunjung tidak perlu memasukkan kode OTP. Mode ini tidak memerlukan pengaturan Domain.

Opsi ini tidak memerlukan pengaturan domain khusus dan cocok digunakan pada portal pelanggan, dashboard, serta aplikasi yang mengharuskan pelanggan masuk terlebih dahulu. 

Untuk memasang mode ini, Anda memerlukan bantuan developer karena proses instalasi melibatkan konfigurasi pada sisi server.

Berikut langkah-langkahnya.

B1. Siapkan Informasi Widget

1. Pada menu Channel Integration, klik “Manage” pada bagian Live chat.
   
2. Pilih “Add widget”.
   
3. Selanjutnya isikan kolom Widget name.
   
4. Pada bagian Choose an audience, pilih mode Signed-in users.
   
5. Kemudian klik “Add widget”.
   
6. Jika data yang Anda masukkan benar atau sesuai maka akan muncul pop up berikut sebagai informasi bahwa data yang Anda masukkan sudah terbuat.
   
7. Pada bagian Credentials, periksa App name yang digunakan untuk mengidentifikasi aplikasi Anda.
   

8. Pada bagian Credentials, periksa Client ID dan Secret key yang tersedia. Siapkan kedua informasi tersebut untuk digunakan pada konfigurasi aplikasi oleh developer.
   

   Secret key hanya ditampilkan satu kali setelah dibuat. Simpan informasi tersebut dengan aman dan jangan membagikannya kepada pihak yang tidak berwenang.

B2. Dapatkan Access Token

Pada langkah ini, developer perlu mendapatkan access token yang digunakan untuk mengautentikasi permintaan ke layanan Qontak Live Chat. Permintaan ini dilakukan melalui server aplikasi Anda menggunakan Client ID dan Secret key yang tersedia pada tab Connection. Ikuti langkah-langkah berikut:

1. Siapkan Client ID dan Secret key dari pengaturan widget Qontak Live Chat pada tab Connection.
2. Simpan kedua informasi tersebut sebagai environment variable pada server dengan nama QONTAK_CLIENT_ID dan QONTAK_SECRET_KEY. Dengan demikian, nilai kredensial tidak perlu ditulis langsung ke dalam perintah.

3. Jalankan perintah berikut pada terminal server untuk meminta access token:
   

   Perintah tersebut mengirimkan Client ID dan Secret key ke endpoint autentikasi Qontak untuk mendapatkan access token.

4. Periksa respons yang diterima. Jika permintaan berhasil, respons akan berisi informasi seperti berikut:
   

5. Simpan nilai access_token di server. Token ini akan digunakan untuk mengautentikasi permintaan API pada langkah instalasi berikutnya.

B3. Daftarkan Pengunjung sebagai Kontak

Setelah mendapatkan access token, daftarkan pengunjung aplikasi Anda sebagai kontak di Qontak. Proses ini dilakukan melalui server aplikasi dengan mengirimkan data pengunjung menggunakan API Qontak Web Chat.

Ikuti langkah-langkah berikut:

1. Siapkan informasi berikut:

• App ID: ID aplikasi yang digunakan pada widget Qontak Live Chat.
• Access token: Token autentikasi yang diperoleh pada langkah sebelumnya.
• External ID: ID unik pengunjung yang dibuat dan disimpan pada sistem aplikasi Anda.
• Full name: Nama lengkap pengunjung.

2. Jalankan perintah berikut melalui terminal server untuk mengirimkan data pengunjung ke Qontak:
   

3. Ganti YOUR_APP_ID dengan App ID widget Anda. Pastikan nilai access token yang diperoleh pada langkah sebelumnya telah digunakan pada bagian Authorization. Selanjutnya, sesuaikan nilai external_id dan full_name dengan data pengunjung pada aplikasi Anda.

4. Periksa respons API yang diterima. Jika pendaftaran berhasil, respons akan menampilkan status success beserta informasi kontak yang telah didaftarkan.
   Contoh respons:
   

5. Simpan nilai data.id dari respons API. Nilai tersebut merupakan Contact ID yang akan digunakan pada langkah instalasi berikutnya.

   - external_id merupakan ID unik pengunjung pada sistem aplikasi Anda. Gunakan ID yang sama untuk pengunjung yang sama agar riwayat chat tetap terhubung dengan kontak yang sesuai.
   - external_id dan full_name wajib diisi.
   - Gunakan nilai external_id yang dibuat secara acak dan tidak mudah ditebak. Hindari menggunakan nomor akun, alamat email, nomor telepon, atau NIK pengunjung.

B4. Pasang Script pada Halaman Aplikasi

Setelah mendapatkan access token dan Contact ID dari langkah sebelumnya, pasang script Qontak Web Chat pada halaman aplikasi Anda agar widget dapat ditampilkan kepada pengunjung yang sudah masuk (signed-in user).

Ikuti langkah-langkah berikut:

1. Siapkan informasi berikut:

• Widget Host: Host yang digunakan untuk mengakses Qontak Web Chat.
• App ID: ID aplikasi dari widget Qontak Web Chat.
• Access token: Token autentikasi yang diperoleh pada langkah 2.
• Contact ID: ID kontak yang diperoleh pada langkah 3.

2. Tambahkan script berikut pada kode halaman aplikasi Anda:
   
3. Sesuaikan nilai pada setiap atribut berikut:

• WIDGET_HOST: Host Qontak Web Chat yang digunakan.
• YOUR_APP_ID: Ganti dengan App ID widget Anda.
• ACCESS_TOKEN_DARI_LANGKAH_2: Ganti dengan access token yang diperoleh pada langkah 2.
• CONTACT_ID_DARI_LANGKAH_3: Ganti dengan Contact ID yang diperoleh pada langkah 3.

4. Pastikan server aplikasi menghasilkan script tersebut untuk setiap pengunjung yang sudah masuk. Dengan demikian, setiap pengunjung akan terhubung dengan identitas kontak masing-masing.

B5. Selesaikan Instalasi

Setelah seluruh konfigurasi selesai, Qontak Live Chat siap digunakan pada halaman aplikasi Anda.

Tombol chat akan muncul secara otomatis tanpa perlu memanggil JavaScript tambahan. Pesan yang dikirimkan pengunjung juga akan langsung tercatat menggunakan nama kontak yang telah didaftarkan sebelumnya.

Browser tidak menyimpan sesi chat. Setiap halaman menggunakan access token dan Contact ID yang dikirimkan melalui atribut pada script.

C. Cara Mengelola Isi dan Tampilan Widget pada Live Chat

1. Pada widget ingin Anda kelola, klik “Action”, kemudian klik “Set up widget”.
   
2. Pada halaman Widget setup, Anda dapat mengatur tampilan widget pada website Anda mulai dari Connection, Topics, hingga Content & Appearance.  

a. Connection 

Keterangan:

Penerapan Shareable Chat Link

Penting
Fitur ini hanya berlaku untuk mode Any visitor.

Berikut alur penerapan Shareable Chat Link ketika diaktifkan:

1. Setelah toggle ‘Shareable link” diaktifkan, klik “Copy” untuk dapat menyalin link yang telah disediakan. 
   
2. Setelah selesai melakukan konfigurasi, klik “Save changes” untuk menyimpan perubahan.
   
3. Kemudian buka link yang sebelumnya telah Anda salin. Maka akan terlihat tampilan berikut. Lengkapi data pada setiap kolomnya.
   
4. Kemudian klik “Send OTP” untuk melanjutkan.
5. Lalu isikan kode OTP yang telah dikirimkan melalui email Anda. Kemudian klik “Verify”.
   
6. Selanjutnya, Anda akan diarahkan ke tampilan berikut. Sebagai contoh, ilustrasi yang digunakan adalah chat order.
    
7. Selanjutnya, coba kirim pesan melalui Live Chat. 
   
8. Setelah pelanggan mengirim pesan, percakapan tersebut akan otomatis muncul di halaman Inbox Mekari Qontak dan dapat ditangani oleh Agent. 
   

b. Topics

Pada tab Topics, Anda dapat mengatur topik percakapan untuk membantu pelanggan memilih kebutuhan mereka sebelum memulai chat. Topik yang dipilih akan menentukan apakah percakapan diteruskan kepada agen yang sesuai atau ke WhatsApp. Berikut langkah-langkahnya.

1. Klik “Add topic” untuk menambahkan topik percakapan yang dapat dipilih pelanggan saat membuka chat. 
    

2. Kemudian, lengkapi pengaturan topik dengan mengisi informasi berikut sesuai kebutuhan Anda.  
   

Keterangan: 

No.	Nama Fitur	Penjelasan
1	Icon	Menentukan ikon yang mewakili topik percakapan.
2	Topic name	Menentukan nama topik yang akan ditampilkan kepada pelanggan saat memilih topik sebelum memulai chat.
3	Description	Menambahkan deskripsi singkat mengenai topik percakapan. Pengisian bersifat opsional dan deskripsi ini tidak ditampilkan pada widget.
4	Where conversations go	Menentukan tujuan percakapan dengan memilih salah satu opsi berikut:  Continue in web chat, untuk melanjutkan percakapan melalui widget dan meneruskannya kepada agen yang tersedia. Move to WhatsApp, untuk mengarahkan pelanggan ke WhatsApp setelah memasukkan nomor telepon, sehingga percakapan dilanjutkan dengan agen yang paling sedikit menangani percakapan. Jika Anda memilih Move to WhatsApp, bagian Agent numbers akan muncul untuk menentukan akun WhatsApp Business yang dapat menerima pengalihan percakapan.  Fitur Move to WhatsApp hanya mendukung Agent yang terhubung melalui Coexistence. Untuk mengintegrasikan Coexistence, lihat panduan di sini. Pilih tim melalui dropdown All teams, lalu centang satu atau beberapa nomor Agent yang ingin digunakan. Daftar ini menampilkan nama Agent, tim, dan nomor telepon yang terhubung melalui Coexistence.  Setelah Agent dipilih, field Utility template akan muncul dan wajib diisi dengan memilih templat pesan yang memiliki konten teks. Field ini digunakan untuk menentukan templat pesan yang akan digunakan dalam proses pengalihan percakapan ke WhatsApp.

3. Lalu klik “Add topic”.
   

4. Maka topic yang telah Anda tentukan akan muncul pada tampilan berikut. Berikutnya, klik “Save changes”.
   

c. Content & appearance

Pada Content & appearance, Anda dapat mengunggah logo Anda beserta warna - warna widgetnya. Berikut penjelasannya.

Keterangan:

3. Kemudian klik “Save changes”.
   
4. Setelah menyimpan Widget settings, maka Anda akan kembali ke halaman awal Live Chat Integration. Selain itu, muncul notifikasi seperti berikut yang menandakan Settings telah berhasil tersimpan.
   

D. Cara Menghapus Widget pada Live Chat

Penting
Jika Anda menghapus widget, pastikan Anda juga menghapus script dari widget yang sebelumnya ditambahkan pada website agar widget tidak lagi berjalan di website tersebut.

1. Pada widget ingin Anda hapus, klik “Action”, kemudian klik “Delete”.
   
2. Pada pop-up yang muncul, klik “Delete”.
   
3. Maka, Anda akan kembali ke halaman awal Live Chat Integration. Selain itu, muncul notifikasi seperti berikut yang menandakan bahwa Widget telah berhasil dihapus.
   

Demikian panduan cara mengelola integrasi Live Chat pada Mekari Qontak.