Cách tích hợp tính năng trò chuyện trực tiếp trong ứng dụng React bằng Chatwoot
Hãy tưởng tượng điều này: ai đó đang sử dụng một trong các sản phẩm của bạn gặp sự cố. Có một số kênh họ có thể sử dụng để báo cáo sự cố và cố gắng giải quyết vấn đề.
Trong số đó, họ có thể chọn nhận email hoặc cuộc gọi. Nhưng các kênh liên lạc này không đảm bảo phản hồi nhanh chóng, chưa nói đến thời gian thực. Nhưng một cuộc trò chuyện tương tác trực tiếp với chuyên gia hỗ trợ khách hàng có thể chứng minh là vô giá.
Tính năng trò chuyện trực tiếp đã được chứng minh là một công cụ giao tiếp rất hữu ích. Điều này là do nó cho phép bạn tương tác tốt hơn với người dùng, cải thiện trải nghiệm người dùng và khắc phục sự cố một cách nhanh chóng và trong thời gian thực.
Mục Lục
Trò chuyện trực tiếp là gì và tại sao nó quan trọng?
Tính năng trò chuyện trực tiếp thường được bao gồm dưới dạng một tiện ích ở bên cạnh trang web hoặc cửa sổ bật lên xuất hiện sau khi tải trang web. Nó cung cấp thông tin liên lạc theo thời gian thực giữa người dùng và đại diện dịch vụ khách hàng hoặc nhóm hỗ trợ, trực tiếp trong ứng dụng.
Người dùng tính năng trò chuyện trực tiếp có thể đặt câu hỏi cấp bách về sản phẩm, hỏi về những lĩnh vực họ không hiểu hoặc báo cáo sự cố và yêu cầu giải pháp. Trong khi đó, các nhóm hỗ trợ khách hàng của bạn có thể cung cấp phản hồi chi tiết, theo thời gian thực, được cá nhân hóa cho người dùng.
Lợi ích của việc tích hợp tính năng trò chuyện trực tiếp
Tích hợp tính năng trò chuyện trực tiếp có thể mang lại một số lợi ích:
- Cải thiện nỗ lực dịch vụ khách hàng. Một sản phẩm tuyệt vời chỉ tốt như cách sử dụng của nó. Tích hợp tính năng trò chuyện trực tiếp giúp cải thiện đáng kể trải nghiệm của người dùng bằng cách cung cấp một cách dễ dàng để nhận trợ giúp và câu trả lời nhanh chóng. Cuối cùng, điều này sẽ giúp bạn cung cấp các dịch vụ tốt hơn giúp đơn giản hóa việc sử dụng sản phẩm của bạn.
- Tăng sự tương tác của khách hàng. Trò chuyện trực tiếp cho phép người dùng tương tác với ứng dụng của bạn trong thời gian thực, khiến họ cảm thấy được trân trọng. Điều này nhắc họ tham gia nhiều hơn, đăng ký và thử nghiệm nhiều tính năng hơn.
- Tạo thêm khách hàng tiềm năng và tăng doanh số bán hàng. Kênh liên lạc này cung cấp một con đường để tương tác với người dùng của bạn một cách cá nhân. Bạn có thể sử dụng cơ hội này để thu hút khách hàng tiềm năng và biến họ thành khách hàng. Bạn cũng có thể cung cấp các đề xuất sản phẩm và bán thêm chúng trên các gói cụ thể của sản phẩm.
- Nguồn dữ liệu người dùng. Trong nền kinh tế kỹ thuật số, việc có quyền truy cập vào dữ liệu chính xác về người dùng có thể giúp bạn vượt lên dẫn trước đối thủ một cách đáng kể. Khi người dùng cho bạn biết về lỗi hoặc các sự cố khác của sản phẩm, phản hồi đó rất có giá trị. Bạn có thể tìm hiểu thêm về cách họ tương tác với dịch vụ của bạn và sử dụng nó để cải thiện sản phẩm của bạn.
Chatwoot là gì?
Chatwoot là một nền tảng dịch vụ khách hàng mã nguồn mở cung cấp cách tương tác được cá nhân hóa với người dùng của bạn. Nó cũng cung cấp một nền tảng đơn giản hóa để bạn trả lời các truy vấn của người dùng và cung cấp phản hồi trên nhiều kênh trong thời gian thực.
Bạn có thể sử dụng các công cụ tự động hóa, phân tích và báo cáo của nó để phân tích mức độ tương tác của người dùng, đồng thời quản lý các hoạt động dịch vụ khách hàng một cách dễ dàng và hiệu quả.
Sử dụng hướng dẫn này, bạn có thể tích hợp Chatwoot với ứng dụng của mình và thử nghiệm tính năng trò chuyện trực tiếp với ứng dụng khách React và bảng điều khiển hỗ trợ khách hàng.
Thiết lập dự án Chatwoot
Chatwoot cung cấp plugin trò chuyện trực tiếp có thể tùy chỉnh mà bạn có thể dễ dàng tích hợp vào ứng dụng của mình. Bạn có thể tùy chỉnh nó nhiều nhất có thể để phù hợp với nhu cầu dịch vụ khách hàng của bạn.
Sau khi bạn nhúng mã plugin vào ứng dụng của mình, người dùng có thể giao tiếp với nhóm hỗ trợ khách hàng của bạn và họ có thể quản lý các cuộc hội thoại đó từ bảng điều khiển của đại lý Chatwoot.
- Truy cập trang web của Chatwoot, đăng ký tài khoản và điều hướng đến bảng điều khiển người dùng.
- Để quản lý các cuộc trò chuyện của người dùng, trước tiên bạn cần thiết lập hộp thư đến và tùy chỉnh hộp thư đến dựa trên những gì bạn yêu cầu. bấm vào hộp thư đến mới nút để bắt đầu.
- Bây giờ, hãy chọn kênh mà bạn muốn tích hợp Chatwoot. Đối với hướng dẫn này, hãy chọn Trang mạng vì bạn đang tích hợp nó vào ứng dụng React.
- Tiếp theo, điền vào các chi tiết trang web của bạn. Để phát triển cục bộ, bạn có thể thử nghiệm tính năng này bằng URL miền máy chủ lưu trữ cục bộ, tuy nhiên, khi bạn triển khai sang sản xuất, hãy nhớ cập nhật miền bằng URL trực tiếp.
- Cuối cùng, thêm một/các đại lý để quản lý các cuộc hội thoại trong hộp thư đến này. Đây có thể là một thành viên trong nhóm hỗ trợ khách hàng của bạn.
Bạn đã thiết lập thành công trò chuyện trực tiếp của Chatwoot với trang web của bạn được đặt làm kênh liên lạc. Chatwoot sẽ tạo mã bạn cần nhúng vào ứng dụng của mình để thêm tiện ích tính năng trò chuyện trực tiếp. Mã này rất linh hoạt vì bạn dễ dàng tích hợp nó vào một ứng dụng khách web được xây dựng với bất kỳ khung công tác giao diện người dùng JavaScript nào.
Nếu bạn muốn tùy chỉnh thêm thiết lập, hãy nhấp vào Cài đặt khác cái nút.
Thiết lập dự án phản ứng
Tạo ứng dụng React và nhúng plugin trò chuyện trực tiếp của Chatwoot để kiểm tra tính năng này. Tạo ứng dụng React và tạo tệp ENV trong thư mục gốc của thư mục dự án để giữ mã thông báo trang web của bạn.
REACT_APP_WEBSITE_TOKEN = token
Tiếp theo, trong src thư mục, tạo một thư mục mới và đặt tên cho nó là các thành phần. Trong thư mục này, tạo một tệp mới: Livechat.js.
Thêm đoạn mã sau vào tập tin này:
import React, {useEffect} from 'react'
function Livechat () {
useEffect(() => {
window.chatwootSettings = {
hideMessageBubble: false,
position: "right",
locale: "en",
type: "standard"
};
(function(d,t) {
var BASE_URL = "https://app.chatwoot.com";
var g = d.createElement