Webサイトのライブチャット

Webサイトにチャットボタンを追加すると、訪問者は電話番号もアプリもなしで、すぐに質問できるようになります。ライブチャットウィジェットからのメッセージは、ほかのチャネルといっしょにCRMチャットに届き、キーワードやAIエージェントで自動返信することもできます。

ウィジェット1つ＝チャットボタン1つで、それぞれに名前、写真、FAQ、返信の設定があります。たとえばオンラインストア用とサービス紹介ページ用など、プランの上限まで複数のウィジェットを作成できます。

ウィジェット一覧

サイドバーでWhatsAppを接続を開き、Webサイトのライブチャットタブを選びます。

まだ何もない状態の「ライブチャットWeb」ページ。各ウィジェットはWebサイトに埋め込めて、3つの自動返信モードに対応しているという説明、「ウィジェット名で検索...」の入力欄、右上の「ウィジェットを追加」ボタン、中央に「ウィジェットを追加」ボタン付きの「まだLiveChatウィジェットがありません」パネルがあります。

ウィジェットを作成すると、一覧には写真、ウィジェット名、タイプ（返信モードに応じてチャットボット、AI、すべてのバッジ）、編集や削除のための操作が表示されます。

ウィジェットが1つある「ライブチャットWeb」の一覧。「ウィジェット名で検索...」の入力欄、「ウィジェットを追加」ボタン、写真・ウィジェット名・タイプ・操作の列がある表があります。行にはサンプルのウィジェット「Contoh Widget Website」（インドネシア語のサンプルデータ）が説明、チャットボットのバッジ、鉛筆（編集）とゴミ箱（削除）のアイコン付きで表示されています。

鉛筆アイコンをクリックするとウィジェットの設定が開きます。ゴミ箱アイコンはウィジェットを削除します。すでに会話履歴がある場合は、cshubがまずその履歴を移動するか一緒に削除するかを確認します（チャネルについてを参照）。

ウィジェットを作成する

ウィジェットを追加をクリックします。

「LiveChatウィジェットを追加」フォーム。ウィジェット識別情報（ウィジェット名、説明（任意）、「写真を選択」ボタン付きのウィジェット写真）、キーワード返信／AIエージェント／まずキーワード、次にAIとAIエージェントの選択欄がある自動返信モード、「このチャネルのチャットに返信できるCS」のセクション、エスカレーション（SLA）とエージェント割り当て方法、「質問を追加」ボタン付きのFAQ、「ソーシャルメディアを追加」ボタン付きのソーシャルメディアリンク、キャンセルと「ウィジェットを作成」ボタンがあります。

ウィジェット識別情報

項目	補足
ウィジェット名 *	ウィジェットの名前です（例：ショップライブチャット、Webサポート）
説明（任意）	ウィジェットのヘッダーに表示される短い説明です
ウィジェット写真（ロゴ／アバター）	ヘッダーに表示されるロゴやCSの写真です。最大2 MBで、JPG／PNG／WebPに対応しています。200×200 px以上の正方形（1:1）にするといちばんきれいに表示されます

自動返信モード

モード	動き
キーワード返信	メッセージがキーワードに一致すると自動で返信します。それ以外はCSチームに回ります。詳しくはキーワード返信
AIエージェント	AIエージェントがビジネスのナレッジを使ってすべてのチャットに返信します
まずキーワード、次にAI	キーワードに一致したものには決まった返信をし、それ以外はAIエージェントが返信します

後ろの2つのモードでは、AIエージェントを選びます。「AIエージェントがまだありません」と表示された場合は、先にAIエージェントで作成してください。

チーム、エスカレーション、割り当て

セクション	補足
このチャネルのチャットに返信できるCS	このウィジェットからの会話を担当するチームメンバーです。あなたのアカウントは、すべてのチャットを見られる状態で自動的に追加されます
エスカレーション（SLA）	チャットが人間の返信を長く待っているときにエージェントに通知します。詳しくはチームへのエスカレーション
エージェント割り当て方法	自動割り当てなし、ラウンドロビン、シーケンシャル（優先）、ランダムから選びます。詳しくはチャネルについて

FAQ

ウィジェットに表示されるよくある質問の一覧です。訪問者はよくある質問をタップするだけで、すぐに答えを確認できます。質問を追加をクリックして入力します（例：営業時間は何時ですか？）。空欄のままでもかまいません。

ソーシャルメディアリンク

ウィジェットのヘッダーに表示されるSNSのリンクです。リンクごとにソーシャルメディアを追加をクリックします。

項目	例
URL	https://wa.me/628123...
ラベル	WhatsApp
アイコンクラス	fab fa-whatsapp（FontAwesomeのfab fa-XまたはBoxiconsのbx bxl-Xのアイコン）

ウィジェットを作成をクリックします。

Webサイトにウィジェットを設置する

ウィジェットを作成したら、編集ページを開いて埋め込みコードのセクションまでスクロールします。

下までスクロールしたウィジェットの編集ページ。「質問を追加」ボタン付きのFAQのセクション（まだ空）、「ソーシャルメディアを追加」ボタン付きのソーシャルメディアリンク、その下に「埋め込みコード」のセクションがあり、コードを </body> タグの前に貼り付けるという説明とウィジェットのスクリプトが表示されています。

1. 埋め込みコードをコピーをクリックします。
2. Webサイトの設定を開き、ページの一番下にコードを追加する場所を探します（フッターコード、カスタムコード、トラッキングコードなどと呼ばれていることが多いです）。
3. ウィジェットを表示したいすべてのページで、</body>タグの前にコードを貼り付けます。
4. 保存してWebサイトを開くと、ページの隅にチャットボタンが表示されます。

Webサイト作成ツールを使っている場合

WordPress、Shopify、Wixなどには、たいていフッターや</body>の前にコードを追加する設定があります。Webサイトを開発者に作ってもらった場合は、このコードを送ってください。

ウィジェット1つにつきコード1つ

ウィジェットごとに専用のコードがあります。同じページに2つのウィジェットのコードを貼り付けないでください。

ウィジェットを編集する

ウィジェット一覧の編集アイコンをクリックします。

「Contoh Widget Website」の「LiveChatウィジェットを編集」フォーム。名前と説明の入力欄、「写真を変更」ボタン付きのデフォルトのウィジェット写真、「キーワード返信」が選ばれた自動返信モードがあります。

編集フォームは追加フォームと同じですが、一番下に埋め込みコードのセクションがあります。エージェントや写真の変更は、変更を保存をクリックした時点で反映されます。Webサイトにコードを設置し直す必要はありません。

「LiveChatウィジェットを編集」ページ全体。ウィジェット識別情報、自動返信モード、エージェント、エスカレーションと割り当て、FAQ、ソーシャルメディアリンク、埋め込みコードのセクション、「変更を保存」ボタンがあります。

ウィジェットを削除する

ウィジェット一覧の削除アイコンをクリックします。

• 会話履歴がまだない場合 — ウィジェットは写真ごとすぐに削除できます。
• 履歴がある場合 — 別のウィジェットに移動（何も失われません）か完全削除を選びます。完全削除では、確認のためにHAPUSと入力します（画面の案内に表示される単語です）。

ウィジェットを削除したら、Webサイトからそのコードも忘れずに外してください。

ヒント

• FAQには、よく聞かれる質問を3〜5個入れましょう。 送料、営業時間、支払い方法などです。訪問者がより早く答えにたどり着けます。
• 「まずキーワード、次にAI」を使いましょう。 定番の質問には決まった答えを返し、それ以外はAIに任せられます。
• Webサイトを複数運営しているなら、サイトごとにウィジェットを分けましょう。 CRMチャットで、訪問者がどのサイトから来たのかがはっきりわかります。

そのほかの問題についてはトラブルシューティングで説明しています。