Freshchatの始め方

変更日月, 2月 27, 2023 で 5:37 午後

Freshchatは、販売、サポート、および顧客エンゲージメントのための新しいメッセージングアプリです。

この記事では、Freshchatの始め方ついてご紹介いたします。

Freshchatアカウントを有効にする方法
ウェブサイトにFreshchatをインストールする
ウェブアプリにFreshchatをインストールする
Freshchatのウェブメッセンジャーのカスタマイズ方法
- ステップ１：会社ロゴと名前を追加する
- ステップ２：メッセンジャーのテーマを選ぶ
エージェントをグループにする

Freshchat　✔Free 　✔ Growth　✔ Pro　✔ Enterprise

Omnichannel Plans　 ✔ Growth　✔ Pro　✔ Enterprise

Freshchatアカウントを有効にする方法

Freshchatにサインアップすると、Freshchatのアカウントに直接アクセスできるようになります。

しかし、利用するには、アカウントを有効化し、パスワードを設定する必要があります。

サインアップすると、Freshchatからメールが送られてきます。

アカウントを有効にするをクリックすると、Freshworksのアカウントページに移動しますので、

そこであなたの詳細情報を入力し、パスワードを設定してください。

ウェブサイトにFreshchatをインストールする

Freshchatの会話ウィジェット（ウェブメッセンジャー）を運用中のウェブサイトにインストールするには、以下のコードスニペットをコードエディタに貼り付けます。

<script>
  function initFreshChat() {
    window.fcWidget.init({
      token: "WEB_CHAT_TOKEN,
      host: "https://wchat.freshchat.com"
    });
  }
  function initialize(i,t){var e;i.getElementById(t)?initFreshChat():((e=i.createElement("script")).id=t,e.async=!0,e.src="https://wchat.freshchat.com/js/widget.js",e.onload=initFreshChat,i.head.appendChild(e))}function initiateCall(){initialize(document,"freshchat-js-sdk")}window.addEventListener?window.addEventListener("load",initiateCall,!1):window.attachEvent("load",initiateCall,!1);
</script><script>  function initFreshChat() {    window.fcWidget.init({      token: "WEB_CHAT_TOKEN,      host: "https://wchat.freshchat.com"    });  }  function initialize(i,t){var e;i.getElementById(t)?initFreshChat():((e=i.createElement("script")).id=t,e.async=!0,e.src="https://wchat.freshchat.com/js/widget.js",e.onload=initFreshChat,i.head.appendChild(e))}function initiateCall(){initialize(document,"freshchat-js-sdk")}window.addEventListener?window.addEventListener("load",initiateCall,!1):window.attachEvent("load",initiateCall,!1);</script><script>  function initFreshChat() {    window.fcWidget.init({      token: "WEB_CHAT_TOKEN,      host: "https://wchat.freshchat.com"    });  }  function initialize(i,t){var e;i.getElementById(t)?initFreshChat():((e=i.createElement("script")).id=t,e.async=!0,e.src="https://wchat.freshchat.com/js/widget.js",e.onload=initFreshChat,i.head.appendChild(e))}function initiateCall(){initialize(document,"freshchat-js-sdk")}window.addEventListener?window.addEventListener("load",initiateCall,!1):window.attachEvent("load",initiateCall,!1);</script><script>  function initFreshChat() {    window.fcWidget.init({      token: "WEB_CHAT_TOKEN,      host: "https://wchat.freshchat.com"    });  }  function initialize(i,t){var e;i.getElementById(t)?initFreshChat():((e=i.createElement("script")).id=t,e.async=!0,e.src="https://wchat.freshchat.com/js/widget.js",e.onload=initFreshChat,i.head.appendChild(e))}function initiateCall(){initialize(document,"freshchat-js-sdk")}window.addEventListener?window.addEventListener("load",initiateCall,!1):window.attachEvent("load",initiateCall,!1);</script><script>  function initFreshChat() {    window.fcWidget.init({      token: "WEB_CHAT_TOKEN,      host: "https://wchat.freshchat.com"    });  }  function initialize(i,t){var e;i.getElementById(t)?initFreshChat():((e=i.createElement("script")).id=t,e.async=!0,e.src="https://wchat.freshchat.com/js/widget.js",e.onload=initFreshChat,i.head.appendChild(e))}function initiateCall(){initialize(document,"freshchat-js-sdk")}window.addEventListener?window.addEventListener("load",initiateCall,!1):window.attachEvent("load",initiateCall,!1);</script><script>  function initFreshChat() {    window.fcWidget.init({      token: "WEB_CHAT_TOKEN,      host: "https://wchat.freshchat.com"    });  }  function initialize(i,t){var e;i.getElementById(t)?initFreshChat():((e=i.createElement("script")).id=t,e.async=!0,e.src="https://wchat.freshchat.com/js/widget.js",e.onload=initFreshChat,i.head.appendChild(e))}function initiateCall(){initialize(document,"freshchat-js-sdk")}window.addEventListener?window.addEventListener("load",initiateCall,!1):window.attachEvent("load",initiateCall,!1);</script><script>  function initFreshChat() {    window.fcWidget.init({      token: "WEB_CHAT_TOKEN,      host: "https://wchat.freshchat.com"    });  }  function initialize(i,t){var e;i.getElementById(t)?initFreshChat():((e=i.createElement("script")).id=t,e.async=!0,e.src="https://wchat.freshchat.com/js/widget.js",e.onload=initFreshChat,i.head.appendChild(e))}function initiateCall(){initialize(document,"freshchat-js-sdk")}window.addEventListener?window.addEventListener("load",initiateCall,!1):window.attachEvent("load",initiateCall,!1);</script><script>  function initFreshChat() {    window.fcWidget.init({      token: "WEB_CHAT_TOKEN,      host: "https://wchat.freshchat.com"    });  }  function initialize(i,t){var e;i.getElementById(t)?initFreshChat():((e=i.createElement("script")).id=t,e.async=!0,e.src="https://wchat.freshchat.com/js/widget.js",e.onload=initFreshChat,i.head.appendChild(e))}function initiateCall(){initialize(document,"freshchat-js-sdk")}window.addEventListener?window.addEventListener("load",initiateCall,!1):window.attachEvent("load",initiateCall,!1);</script><script>  function initFreshChat() {    window.fcWidget.init({      token: "WEB_CHAT_TOKEN,      host: "https://wchat.freshchat.com"    });  }  function initialize(i,t){var e;i.getElementById(t)?initFreshChat():((e=i.createElement("script")).id=t,e.async=!0,e.src="https://wchat.freshchat.com/js/widget.js",e.onload=initFreshChat,i.head.appendChild(e))}function initiateCall(){initialize(document,"freshchat-js-sdk")}window.addEventListener?window.addEventListener("load",initiateCall,!1):window.attachEvent("load",initiateCall,!1);</script>

ウェブアプリにFreshchatをインストールする

ログインしたユーザーが別のデバイスやブラウザから会話を開始するたびに、ウェブアプリ上でユーザーの会話を復元することができます。これを行うには、各ユーザーに一意の外部IDとリストアIDを設定する必要があります。

次のコードスニペットを使用して、ログインユーザーを識別し、ブラウザーとデバイス間で会話を復元します。

<!--Body-->
function initFreshChat() {
 window.fcWidget.init({
  token: "WEB_CHAT_TOKEN",
  host: "WEB_CHAT_URL",
  externalId: '1234567',
  restoredId: restoreId? restoreId : null,
   onInit: function() {
     window.fcWidget.on('widget:loaded', function() { 
       window.fcWidget.user.get(function(resp) {
     var status = resp && resp.status,
     data = resp && resp.data;
     if (status !== 200) {
       window.fcWidget.user.setProperties({
       firstName: "John", //user's first name
       lastName: "Doe", //user's last name
       email: "john.doe@gmail.com", //user's email address
       phone: "8668323090", //phone number without country code
       phoneCountryCode: "+1",  // phone's country code
       plan: "Estate",  // user's meta property 1
       status: "Active", // user's meta property 2
      "Last Payment": "12th August" // user's meta property 3
    });
    window.fcWidget.on('user:created', function(resp) {
      var status = resp && resp.status,
      data = resp && resp.data;
      if (status === 200) {
        if (data.restoreId) {
        // Update restoreId in your database
           }
              }
            });
           }
        });
     });
   }
 });
}
function initialize(i,t){var e;i.getElementById(t)?initFreshChat():((e=i.createElement("script")).id=t,e.async=!0,e.src="WEB_CHAT_URL/js/widget.js",e.onload=initFreshChat,i.head.appendChild(e))}function initiateCall(){initialize(document,"freshchat-js-sdk")}window.addEventListener?window.addEventListener("load",initiateCall,!1):window.attachEvent("load",initiateCall,!1);
<!--Body-->

External ID

これは、ログインしたユーザごとにユニークである必要があります。

この情報は、あなた側からFreshchatに渡される必要があります。

例えば、ユーザーのメールIDを外部IDにすることができます。

Restore ID

これは、ログインしたユーザが（あなたのウェブアプリから）初めてFreshchat上で会話を開始したときに、Freshchatによって作成されます。リストアIDも各ユーザーに固有です。このIDは、ユーザ作成コールバック関数でFreshchatからあなたのWebサイトに渡されます。このIDをデータベースに保存する必要があります。

次に同じユーザーが別のブラウザやアプリからFreshchatを通して会話を始める場合、

ユーザーとの会話を復元するために、このRestore IDとExternal IDをあなた側からFreshchatに渡す必要があります。

そうしないと、ユーザーが新しいブラウザセッションで会話を開始するたびに、新しいユーザーが作成され、

会話履歴が失われてしまいます。

注）上記のコードの 'Web Chat Token' を、管理 > ウェブメッセンジャーにあるあなたのFreshchatトークンに置き換えてください。

user の値をプレースホルダーに置き換えます。

Freshchatを表示させたいウェブサイトの各ページにコードスニペットを貼り付けてください。

Freshchatのウェブメッセンジャーのカスタマイズ方法

Freshchatの会話ウィジェット（ウェブメッセンジャー）は、あなたのビジネステーマに合わせて、

ブランド変更することができます。

ステップ１：会社ロゴと名前を追加する

管理画面 > チャット設定 > チャットウィジェット設定に移動します。

ここで、会社ロゴのアップロード、ビジネス（アプリ）名の追加、Web通知のドメイン名の追加ができます。

Preferred Web Notifications Domain Name（ウェブサイトドメイン）」は、ユーザーがあなたからのブラウザ通知を有効にすることを選択した場合に便利です。

ステップ２：メッセンジャーのテーマを選ぶ

管理画面 > ウェブメッセンジャー > 外観のカスタマイズに移動します。

ここでブランドロゴ、色、メッセンジャーヘッダースタイル、背景、Freshchat会話ウィジェット（ウェブメッセンジャー）のサイズを追加することができます。また、トグルを有効にすることで、タイピングインジケーターを表示するかどうかを選択することができます。

メッセンジャー表示オプションでは、表示、非表示、勤務時間内のみ表示（デフォルトの営業時間）を設定できます。

右側には、すべての設定のプレビューが表示されます。

注）メッセンジャーの可視化は、Freshchatアカウントの初回応答時間、オフライン体験、その他のメトリックに影響を与えません。また、現時点ではメッセンジャー可視化でサポートされるのはデフォルトの営業時間のみです。

グループ別の営業時間には適用されません。

Freshchatにチームメンバーを招待する

管理者＞ユーザーと権限＞ユーザーで、チームメンバーをFreshchatに招待し、そこに追加することができます。

エージェントを追加する際、以下のことが可能です。

彼らの役割を定義する - エージェントのFreshchatアカウントへのアクセスは、あなたが彼らに割り当てる役割に基づいて制限されます。
エージェントの負荷レベルを定義する - インテリアサインで設定した負荷レベルに基づいて、エージェントの負荷レベルを定義します。
プリセールス、カスタマーサポート、カスタマーサクセスなど、任意のグループ*にエージェントを追加します。

Freshchatには4つのロールがデフォルトで用意されています。

アカウント管理者/オーナー（Account Admin） は、Freshchatのすべてを行うことができます。
管理者(Administrator) は、アカウント管理者ができることはすべてできますが、課金設定にアクセスすることはできません。
エージェント(Support Agent) は、Freshchatで最も基本的なアクセス権を持っています。顧客との会話や、Peopleセクションへのアクセス、自分のプロフィール情報の編集が可能です。
スーパーユーザー(Support Manager) のアクセス権はエージェントと似ていますが、キャンペーンやFAQの作成・編集も可能です。