Chatwoot を使用して React アプリにライブチャット機能を統合する方法

2023/02/09

これを想像してみてください: あなたの製品の 1 つを使用している誰かが問題に遭遇しました。問題を報告し、解決を試みるために使用できるチャネルがいくつかあります。

その中で、彼らは電子メールまたは電話を選ぶことができました. しかし、これらの通信チャネルは、リアルタイムの応答はもちろんのこと、迅速な応答を保証するものではありません。しかし、カスタマーサポートの専門家とのライブのインタラクティブチャットは非常に貴重です。

ライブチャット機能は、非常に便利なコミュニケーションツールであることが証明されています。これは、ユーザーとの関わりを深め、ユーザーエクスペリエンスを向上させ、問題を迅速かつリアルタイムでトラブルシューティングできるようにするためです。

ライブチャットとは何か、なぜ重要なのか?

ライブチャット機能は、通常、Web ページの横にあるウィジェット、またはサイトの読み込み後に表示されるポップアップウィンドウとして含まれています。アプリケーション内で直接、ユーザーと顧客サービス担当者またはサポートチームとの間のリアルタイムコミュニケーションを提供します。

ライブチャット機能のユーザーは、製品に関する差し迫った質問をしたり、理解できない分野について問い合わせたり、問題を報告して解決策を要求したりできます。一方、カスタマーサポートチームは、ユーザーに合わせてパーソナライズされたリアルタイムの詳細なフィードバックを提供できます。

ライブチャット機能を統合する利点

ライブチャット機能を統合すると、いくつかの利点が得られます。

顧客サービスの取り組みを改善します。優れた製品は、その使用法と同じくらい優れています。ライブチャット機能を統合すると、ヘルプと回答をすばやく簡単に取得できる方法が提供されるため、ユーザーエクスペリエンスが大幅に向上します。最終的に、これは製品の使用を合理化するより良いサービスを提供するのに役立ちます.
顧客エンゲージメントを高めます。ライブチャットを使用すると、ユーザーはアプリケーションをリアルタイムで操作できるため、自分が大切にされていると感じられます。これにより、より多くのエンゲージメント、サインアップ、およびより多くの機能のテストが促されます。
より多くの見込み客を生み出し、売り上げを伸ばします。この通信チャネルは、ユーザーと個人的に対話する手段を提供します。この機会を利用して、リードを獲得し、顧客に変えることができます。製品の推奨事項を提供し、製品の特定のパッケージでそれらをアップセルすることもできます.
ユーザーデータのソース。デジタル経済では、ユーザーに関する正確なデータにアクセスできると、競合他社よりも大幅に優位に立つことができます。ユーザーがバグやその他の製品の問題について教えてくれたとき、そのフィードバックは非常に貴重です。彼らがあなたのサービスとどのようにやり取りするかについてもっと学び、それを使ってあなたの製品を改善することができます.

チャットウートとは？

Chatwoot は、ユーザーとやり取りするためのパーソナライズされた方法を提供するオープンソースのカスタマーサービスプラットフォームです。また、ユーザーのクエリに応答し、リアルタイムで複数のチャネルにわたってフィードバックを提供するための簡素化されたプラットフォームも提供します。

その自動化、分析、およびレポートツールを使用して、ユーザーエンゲージメントを分析し、カスタマーサービス業務を簡単かつ効果的に管理できます。

このガイドを使用すると、Chatwoot をアプリケーションに統合し、React クライアントとカスタマーサポートダッシュボードでライブチャット機能をテストできます。

Chatwoot プロジェクトのセットアップ

Chatwoot は、アプリケーションに簡単に統合できるカスタマイズ可能なライブチャットプラグインを提供します。顧客サービスのニーズに合わせて、可能な限りカスタマイズできます。

プラグインコードをアプリケーションに埋め込むと、ユーザーはカスタマーサポートチームと通信でき、Chatwoot のエージェントのダッシュボードからそれらの会話を管理できます。

Chatwootの Web サイトにアクセスし、アカウントにサインアップして、ユーザーダッシュボードに移動します。
ユーザーの会話を管理するには、まず受信トレイを設定し、必要に応じてカスタマイズする必要があります。[新しい受信トレイ] ボタンをクリックして開始します。
次に、Chatwoot を統合するチャネルを選択します。このガイドでは、 Web サイトを React アプリに統合しているため、 Web サイトを選択します。
次に、ウェブサイトの詳細を入力します。ローカル開発では、ローカルホストドメイン URL を使用して機能をテストできますが、本番環境にデプロイしたら、ライブ URL でドメインを更新することを忘れないでください。
最後に、この受信トレイで会話を管理するエージェントを追加します。これは、カスタマーサポートチームのメンバーになることができます。

コミュニケーションチャネルとして設定された Web サイトを使用して、Chatwoot のライブチャットを正常にセットアップしました。Chatwoot は、ライブチャット機能ウィジェットを追加するためにアプリに埋め込む必要があるコードを生成します。このコードは、任意の JavaScript フロントエンドフレームワークで構築された Web クライアントに簡単に統合できるため、非常に柔軟です。

設定をさらにカスタマイズする場合は、[その他の設定] ボタンをクリックします。

React プロジェクトのセットアップ

React アプリケーションを作成し、Chatwoot のライブチャットプラグインを組み込んで機能をテストします。React アプリケーションを作成し、プロジェクトフォルダーのルートディレクトリに ENV ファイルを作成して、Web サイトのトークンを保持します。

REACT_APP_WEBSITE_TOKEN = token

次に、srcディレクトリに新しいフォルダーを作成し、components という名前を付けます。このフォルダーに新しいファイル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 フックは、コンポーネントのマウント時にコールバック内のコードを 1 回実行します。まず、Chatwoot の機能の設定を初期化します。次に、Chatwoot が提供するプラグイン機能を実行して、ページにライブチャットウィジェットを設定します。

アプリを Chatwoot アカウントに接続する chatwootSDK.run 関数に、websiteToken をパラメーターとして渡します。最後に、HTML 要素をレンダリングする必要がないため、ライブチャット関数は null を返します。

ライブチャット機能を試す

このコンポーネントをapp.jsファイルにインポートし、開発サーバーをスピンアップして、加えられた変更を更新します。ブラウザで実行されている React にライブチャットウィジェットが表示されるはずです。
ライブチャット機能をテストするには、ウィジェットをクリックして会話チャットウォールを開き、メッセージを入力します。
次に、Chatwoot ユーザーダッシュボードに移動して受信トレイに移動すると、新しいメッセージが表示されます。デフォルトでは、Chatwoot はいくつかのメッセージを生成し、ユーザーがメッセージを送信するとすぐに自動応答します。メッセージへの返信を入力し、[送信] をクリックします。アプリのウィジェットチャットウォールに戻り、応答を表示します。

ほんの数行のコードでライブチャット機能をアプリケーションに統合することができました。

ライブチャット機能は価値がありますか?

ライブチャット機能は、カスタマーサービスを提供し、顧客満足度を高め、ユーザーエクスペリエンスを向上させる優れた方法です。

エンゲージメントを高め、応答時間を短縮し、カスタマーサポートをパーソナライズする可能性のあるコミュニケーションチャネルを提供します。最終的には、わずかな労力でカスタマーサービスの運用を改善するのに役立つはずです。

ライブ チャットとは何か、なぜ重要なのか?