Pembaca seperti Anda membantu mendukung MUO. Saat Anda melakukan pembelian menggunakan tautan di situs kami, kami dapat memperoleh komisi afiliasi. Baca selengkapnya.

Bayangkan ini: seseorang yang menggunakan salah satu produk Anda mengalami masalah. Ada beberapa saluran yang dapat mereka gunakan untuk melaporkan masalah tersebut dan mencoba menyelesaikannya.

Di antara mereka, mereka dapat memilih email atau panggilan. Tetapi saluran komunikasi ini tidak menjamin tanggapan yang cepat, apalagi waktu nyata. Tapi obrolan langsung dan interaktif dengan profesional dukungan pelanggan terbukti sangat berharga.

Fitur obrolan langsung terbukti menjadi alat komunikasi yang sangat berguna. Ini karena memungkinkan Anda untuk terlibat lebih baik dengan pengguna, meningkatkan pengalaman pengguna, dan memecahkan masalah dengan cepat, dan dalam waktu nyata.

Apa Itu Obrolan Langsung dan Mengapa Penting?

Fitur obrolan langsung biasanya disertakan sebagai widget di samping halaman web, atau jendela pop-up yang muncul setelah situs dimuat. Ini menyediakan komunikasi waktu nyata antara pengguna dan perwakilan layanan pelanggan atau tim pendukung, langsung di dalam aplikasi.

instagram viewer

Pengguna fitur obrolan langsung dapat mengajukan pertanyaan mendesak tentang produk, menanyakan tentang area yang tidak mereka pahami, atau melaporkan masalah dan meminta solusi. Sementara itu, tim dukungan pelanggan Anda dapat memberikan umpan balik secara real-time dan mendetail, yang dipersonalisasi untuk pengguna.

Manfaat Mengintegrasikan Fitur Live Chat

Mengintegrasikan fitur obrolan langsung dapat memberikan beberapa manfaat:

  • Tingkatkan upaya layanan pelanggan. Produk hebat hanya sebaik penggunaannya. Mengintegrasikan fitur obrolan langsung membantu meningkatkan pengalaman pengguna secara signifikan dengan menyediakan cara mudah untuk mendapatkan bantuan dan jawaban dengan cepat. Pada akhirnya, ini akan membantu Anda menawarkan layanan yang lebih baik yang merampingkan penggunaan produk Anda.
  • Meningkatkan keterlibatan pelanggan. Obrolan langsung memungkinkan pengguna untuk berinteraksi dengan aplikasi Anda secara real-time, membuat mereka merasa dihargai. Ini mendorong mereka untuk terlibat lebih banyak, mendaftar, dan menguji lebih banyak fitur.
  • Hasilkan lebih banyak prospek dan tingkatkan penjualan. Saluran komunikasi ini menyediakan jalan untuk berinteraksi dengan pengguna Anda secara pribadi. Anda dapat menggunakan kesempatan ini untuk menangkap prospek dan mengubahnya menjadi pelanggan. Anda juga dapat memberikan rekomendasi produk dan menjualnya pada paket khusus produk Anda.
  • Sumber data pengguna. Dalam ekonomi digital, memiliki akses ke data yang akurat tentang pengguna dapat secara signifikan menempatkan Anda di depan persaingan. Saat pengguna memberi tahu Anda tentang bug atau masalah produk lainnya, umpan balik itu sangat berharga. Anda dapat mempelajari lebih lanjut tentang bagaimana mereka berinteraksi dengan layanan Anda dan menggunakannya untuk meningkatkan produk Anda.

Apa itu Chatwoot?

Chatwoot adalah platform layanan pelanggan sumber terbuka yang menyediakan cara yang dipersonalisasi untuk terlibat dengan pengguna Anda. Ini juga menyediakan platform yang disederhanakan bagi Anda untuk menanggapi pertanyaan pengguna dan memberikan umpan balik di berbagai saluran secara waktu nyata.

Anda dapat menggunakan otomatisasi, analitik, dan alat pelaporannya untuk menganalisis keterlibatan pengguna, dan mengelola operasi layanan pelanggan dengan mudah dan efektif.

Dengan menggunakan panduan ini, Anda dapat mengintegrasikan Chatwoot dengan aplikasi Anda dan menguji fitur obrolan langsungnya dengan klien React dan dasbor dukungan pelanggan.

Pengaturan Proyek Chatwoot

Chatwoot menyediakan plugin obrolan langsung yang dapat disesuaikan yang dapat Anda integrasikan dengan mudah ke dalam aplikasi Anda. Anda dapat menyesuaikannya sebanyak mungkin agar sesuai dengan kebutuhan layanan pelanggan Anda.

Setelah Anda menyematkan kode plugin di aplikasi Anda, pengguna dapat berkomunikasi dengan tim dukungan pelanggan Anda, dan mereka dapat mengelola percakapan tersebut dari dasbor agen Chatwoot.

  1. Pergilah ke Situs web Chatwoot, daftar akun, dan arahkan ke dasbor pengguna.
  2. Untuk mengelola percakapan pengguna, Anda harus menyiapkan kotak masuk terlebih dahulu dan menyesuaikannya berdasarkan kebutuhan Anda. Klik pada Kotak masuk baru tombol untuk memulai.
  3. Sekarang, pilih saluran tempat Anda ingin mengintegrasikan Chatwoot. Untuk panduan ini, pilih Situs web karena Anda mengintegrasikannya ke dalam aplikasi React.
  4. Selanjutnya, isi detail situs web Anda. Untuk pengembangan lokal, Anda dapat menguji fitur dengan URL domain host lokal, namun, setelah menerapkan ke produksi, ingatlah untuk memperbarui domain dengan URL aktif.
  5. Terakhir, tambahkan agen untuk mengelola percakapan di kotak masuk ini. Ini bisa menjadi anggota tim dukungan pelanggan Anda.

Anda telah berhasil mengatur obrolan langsung Chatwoot dengan situs web Anda ditetapkan sebagai saluran komunikasi. Chatwoot akan menghasilkan kode yang perlu Anda sematkan di aplikasi Anda untuk menambahkan widget fitur obrolan langsung. Kode ini sangat fleksibel karena Anda dengan mudah mengintegrasikannya ke klien web yang dibuat dengan salah satu dari Kerangka frontend JavaScript.

Jika Anda ingin menyesuaikan pengaturan, klik lebih lanjut Lebih banyak pengaturan tombol.

Bereaksi Pengaturan Proyek

Buat aplikasi React dan sematkan plugin obrolan langsung Chatwoot untuk menguji fitur tersebut. Buat aplikasi Bereaksi dan buat file ENV di direktori root folder proyek Anda untuk menyimpan token situs web Anda.

REACT_APP_WEBSITE_TOKEN = token

Selanjutnya, di src direktori, buat folder baru dan beri nama komponen. Di folder ini buat file baru: Livechat.js.

Tambahkan kode berikut ke file ini:

impor Bereaksi, {useEffect} dari'reaksi'

fungsiObrolan langsung () {
gunakanEfek(() => {
jendela.chatwootPengaturan = {
sembunyikanMessageBubble: PALSU,
posisi: "Kanan",
lokal: "en",
jenis: "standar"
};

(fungsi(d, t) {
var BASE_URL = " https://app.chatwoot.com";
var g = d.createElement (t), s = d.getElementsByTagName (t)[0];
g.src = BASE_URL + "/paket/js/sdk.js";
g.defer = BENAR;
g.async = BENAR;
S.parentNode.insertBefore(G, S);

g.onload = fungsi() {
jendela.chatwootSDK.berlari({
situs Token: proses.env.REACT_APP_WEBSITE_TOKEN,
baseUrl: BASE_URL
})
}
})(dokumen, "naskah");
}, []);

kembalibatal;
};

eksporbawaan Obrolan langsung;

Kode ini mengintegrasikan fitur obrolan langsung Chatwoot di aplikasi React Anda. Hook useEffect menjalankan kode di dalam callback satu kali saat komponen dipasang. Pertama, ini menginisialisasi pengaturan Chatwoot untuk fitur tersebut. Kemudian menjalankan fungsi plugin, yang disediakan oleh Chatwoot, yang mengatur widget obrolan langsung di halaman.

Itu melewati websiteToken sebagai parameter ke fungsi chatwootSDK.run yang menghubungkan aplikasi dengan akun Chatwoot Anda. Terakhir, fungsi Obrolan langsung mengembalikan nol karena Anda tidak diharuskan merender elemen HTML apa pun.

Uji Fitur Obrolan Langsung

  1. Impor komponen ini di aplikasi.js file dan putar server pengembangan untuk memperbarui perubahan yang dibuat. Anda akan melihat widget obrolan langsung di React Anda berjalan di browser.
  2. Untuk menguji fitur obrolan langsung, klik widget untuk membuka dinding obrolan percakapan dan ketik pesan.
  3. Sekarang, buka dasbor pengguna Chatwoot Anda dan arahkan ke kotak masuk Anda, Anda akan melihat pesan baru. Secara default, Chatwoot akan menghasilkan beberapa pesan dan merespons secara otomatis segera setelah pengguna mengirim pesan, seperti yang Anda lihat di bawah. Ketik tanggapan atas pesan tersebut dan klik kirim. Kembali ke dinding obrolan widget di aplikasi Anda untuk melihat responsnya.

Anda telah berhasil mengintegrasikan fitur obrolan langsung di aplikasi Anda dengan sangat sedikit baris kode.

Apakah Fitur Obrolan Langsung Layak?

Fitur obrolan langsung adalah cara terbaik untuk menyediakan layanan pelanggan, meningkatkan kepuasan pelanggan, dan meningkatkan pengalaman pengguna.

Ini menyediakan saluran komunikasi dengan potensi untuk meningkatkan keterlibatan, mengurangi waktu respons, dan mempersonalisasikan dukungan pelanggan. Pada akhirnya, ini akan membantu Anda meningkatkan operasi layanan pelanggan dengan sedikit usaha.