Chatwoot를 사용하여 React 앱에서 라이브 채팅 기능을 통합하는 방법

2023/02/09

여러분의 제품 중 하나를 사용하는 누군가가 문제에 직면했다고 상상해보세요. 그들이 문제를 보고하고 해결하기 위해 사용할 수 있는 몇 가지 채널이 있습니다.

그중 이메일이나 전화를 선택할 수 있습니다. 그러나 이러한 커뮤니케이션 채널은 실시간 응답은 고사하고 빠른 응답을 보장하지 않습니다. 그러나 고객 지원 전문가와의 실시간 대화형 채팅은 매우 유용할 수 있습니다.

라이브 채팅 기능은 매우 유용한 커뮤니케이션 도구임이 입증되었습니다. 이는 사용자와 더 잘 소통하고, 사용자 경험을 개선하고, 실시간으로 신속하게 문제를 해결할 수 있기 때문입니다.

실시간 채팅이란 무엇이며 왜 중요한가요?

라이브 채팅 기능은 일반적으로 웹 페이지 측면의 위젯 또는 사이트 로드 후 나타나는 팝업 창으로 포함됩니다. 애플리케이션 내에서 직접 사용자와 고객 서비스 담당자 또는 지원 팀 간의 실시간 커뮤니케이션을 제공합니다.

라이브 채팅 기능의 사용자는 제품에 대한 긴급한 질문을 하거나 이해하지 못하는 영역에 대해 문의하거나 문제를 보고하고 솔루션을 요청할 수 있습니다. 한편, 고객 지원 팀은 사용자에게 개인화된 실시간 상세 피드백을 제공할 수 있습니다.

라이브 채팅 기능 통합의 이점

라이브 채팅 기능을 통합하면 다음과 같은 여러 이점을 얻을 수 있습니다.

고객 서비스 노력을 향상시킵니다 . 훌륭한 제품은 사용법만큼만 좋습니다. 라이브 채팅 기능을 통합하면 도움과 답변을 신속하게 얻을 수 있는 쉬운 방법을 제공하여 사용자 경험을 크게 개선하는 데 도움이 됩니다. 궁극적으로 이는 제품 사용을 간소화하는 더 나은 서비스를 제공하는 데 도움이 됩니다.
고객 참여를 높 입니다. 라이브 채팅을 통해 사용자는 실시간으로 애플리케이션과 상호 작용할 수 있으므로 자신이 소중함을 느낄 수 있습니다. 이것은 그들이 더 많이 참여하고, 가입하고, 더 많은 기능을 테스트하도록 유도합니다.
더 많은 리드를 생성하고 판매를 늘리 십시오. 이 통신 채널은 사용자와 개인적으로 상호 작용할 수 있는 방법을 제공합니다. 이 기회를 활용하여 리드를 포착하고 고객으로 전환할 수 있습니다. 제품 권장 사항을 제공하고 제품의 특정 패키지에 상향 판매할 수도 있습니다.
사용자 데이터 소스 . 디지털 경제에서 사용자에 대한 정확한 데이터에 액세스하면 경쟁에서 크게 앞서 나갈 수 있습니다. 사용자가 버그나 기타 제품 문제에 대해 이야기할 때 그 피드백은 매우 중요합니다. 그들이 귀하의 서비스와 상호 작용하는 방법에 대해 자세히 알아보고 이를 사용하여 제품을 개선할 수 있습니다.

Chatwoot이란 무엇입니까?

Chatwoot은 사용자와 소통하는 개인화된 방법을 제공하는 오픈 소스 고객 서비스 플랫폼입니다. 또한 사용자의 쿼리에 응답하고 여러 채널에서 실시간으로 피드백을 제공할 수 있는 간소화된 플랫폼을 제공합니다.

자동화, 분석 및 보고 도구를 사용하여 사용자 참여를 분석하고 고객 서비스 운영을 쉽고 효과적으로 관리할 수 있습니다.

이 가이드를 사용하여 Chatwoot을 애플리케이션과 통합하고 React 클라이언트 및 고객 지원 대시보드로 라이브 채팅 기능을 테스트할 수 있습니다.

Chatwoot 프로젝트 설정

Chatwoot는 애플리케이션에 쉽게 통합할 수 있는 사용자 정의 가능한 라이브 채팅 플러그인을 제공합니다. 고객 서비스 요구 사항에 맞게 최대한 사용자 정의할 수 있습니다.

애플리케이션에 플러그인 코드를 삽입하면 사용자는 고객 지원 팀과 통신할 수 있으며 Chatwoot 에이전트의 대시보드에서 해당 대화를 관리할 수 있습니다.

Chatwoot 웹사이트 로 이동하여 계정에 가입하고 사용자 대시보드로 이동합니다.
사용자의 대화를 관리하려면 먼저 받은 편지함을 설정하고 필요에 따라 사용자 지정해야 합니다. 시작하려면 새 받은 편지함 버튼을 클릭하십시오 .
이제 Chatwoot을 통합하려는 채널을 선택하십시오. 이 가이드에서는 웹사이트 를 React 앱에 통합하고 있으므로 웹사이트 를 선택합니다.
다음으로 웹사이트 세부 정보를 입력합니다. 로컬 개발의 경우 로컬 호스트 도메인 URL로 기능을 테스트할 수 있지만 프로덕션에 배포한 후에는 라이브 URL로 도메인을 업데이트해야 합니다.
마지막으로 이 받은 편지함에서 대화를 관리할 에이전트를 추가합니다. 이는 고객 지원 팀의 구성원일 수 있습니다.

웹사이트를 통신 채널로 설정하여 Chatwoot의 라이브 채팅을 성공적으로 설정했습니다. Chatwoot은 라이브 채팅 기능 위젯을 추가하기 위해 앱에 삽입해야 하는 코드를 생성합니다. 이 코드는 JavaScript 프런트엔드 프레임워크로 구축된 웹 클라이언트에 쉽게 통합되므로 매우 유연합니다.

설정을 사용자 정의하려면 추가 설정 버튼을 클릭하십시오.

반응 프로젝트 설정

기능을 테스트하기 위해 React 애플리케이션과 포함된 Chatwoot의 라이브 채팅 플러그인을 만듭니다. React 애플리케이션을 생성하고 프로젝트 폴더의 루트 디렉터리에 웹사이트 토큰을 보관할 ENV 파일을 생성합니다.

REACT_APP_WEBSITE_TOKEN = token

그런 다음 src 디렉토리에서 새 폴더를 만들고 이름을 구성 요소로 지정합니다. 이 폴더에서 Livechat.js 라는 새 파일을 만듭니다 .

이 파일에 다음 코드를 추가합니다.

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(t), s = d.getElementsByTagName(t)[0];
      g.src = BASE_URL + "/packs/js/sdk.js";
      g.defer = true;
      g.async = true;
      s.parentNode.insertBefore(g, s);
      g.onload = function() {
        window.chatwootSDK.run({
          websiteToken: process.env.REACT_APP_WEBSITE_TOKEN,
          baseUrl: BASE_URL
        })
      }
    })(document, "script");
  }, []);
  return null;
};

export default Livechat;

이 코드는 Chatwoot의 실시간 채팅 기능을 React 앱에 통합합니다. useEffect 후크는 구성요소가 마운트될 때 콜백 내부의 코드를 한 번 실행합니다. 먼저 기능에 대한 Chatwoot의 설정을 초기화합니다. 그런 다음 페이지에 라이브 채팅 위젯을 설정하는 Chatwoot에서 제공하는 플러그인 기능을 실행합니다.

앱을 Chatwoot 계정과 연결하는 chatwootSDK.run 함수에 매개변수로 websiteToken을 전달합니다. 마지막으로 라이브 채팅 기능은 HTML 요소를 렌더링할 필요가 없으므로 null을 반환합니다.

라이브 채팅 기능 테스트

app.js 파일 에서 이 구성 요소를 가져 오고 개발 서버를 가동하여 변경 사항을 업데이트합니다. 브라우저에서 실행 중인 React에 실시간 채팅 위젯이 표시되어야 합니다.
라이브 채팅 기능을 테스트하려면 위젯을 클릭하여 대화 채팅 월을 열고 메시지를 입력하세요.
이제 Chatwoot 사용자 대시보드로 이동하여 받은 편지함으로 이동하면 새 메시지가 표시됩니다. 기본적으로 Chatwoot는 아래에 표시된 것과 같이 사용자가 메시지를 보낸 직후 일부 메시지를 생성하고 자동 응답합니다. 메시지에 대한 응답을 입력하고 보내기를 클릭합니다. 응답을 보려면 앱의 위젯 채팅 담벼락으로 돌아가십시오.

몇 줄의 코드로 애플리케이션에 실시간 채팅 기능을 성공적으로 통합했습니다.

라이브 채팅 기능은 그만한 가치가 있습니까?

실시간 채팅 기능은 고객 서비스를 제공하고 고객 만족도를 높이며 사용자 경험을 개선하는 좋은 방법입니다.

참여를 늘리고 응답 시간을 줄이며 고객 지원을 개인화할 수 있는 커뮤니케이션 채널을 제공합니다. 궁극적으로 적은 노력으로 고객 서비스 운영을 개선하는 데 도움이 되어야 합니다.