Webサイト

LiveDeskでは、WebページにWebサイトチャネルのチャットウィジェットを追加して、訪問者からの問い合わせへの対応、会話の割り当て、Webサイト上でのリアルタイムチャットを提供できます。

リアルタイムチャットウィジェットは、ほとんどの最新ブラウザに対応しています。サポートされているブラウザのバージョンは以下のとおりです。

ブラウザ
Mozilla Firefox: v52以降
Google Chrome: v57以降
Chromium: v57以降
Apple Safari: v14.1以降
Microsoft Edge: v16以降

Webサイトチャネルの追加方法

「チャネルを追加」>「Webサイト」

website.png

設定情報の入力

画面の指示に従ってWebサイトチャネルの基本情報を入力し、「確認」をクリックしてチャネルを作成します。作成後は、「統合」、「設定」、「ウィジェットビルダー」、「会話の割り当て」、「有人エージェント」、「AIエージェント」などのタブで、残りの設定を続けて行うことができます。

画面の指示に従って設定情報を入力し、完了したら「確認」をクリックします。

website_param.png

設定項目 説明
Webサイト名 Webサイトの名前
Webサイトドメイン 顧客情報を受信するドメインアドレスを設定します。例:www.example.com
タイトル メッセージ受信ウィジェットのタイトル
ラベル行 ウェルカムメッセージ
チャネルの挨拶を有効化 顧客がメッセージを送信して会話を開始した際に、挨拶メッセージを自動送信するかどうかを設定します
カスタマーサービスエージェントを追加 割り当てるカスタマーサービスエージェントを指定します

Webサイトへのチャットウィジェットの追加

チャネルの作成後、チャネル詳細設定ページにリダイレクトされます。「統合」タブで生成されたコードスニペットをコピーし、Webサイトに貼り付けることでインストールを完了できます。

現在、以下のインストール方法に対応しています。

インストール方法 説明
専用リンク 独自のドメイン名に基づくバブルリンクを設定できます
バブルコード 標準チャットバブルコードをWebページに埋め込みます。ほとんどのシナリオに適しています
iframeコード iframeを使用してチャットウィンドウを埋め込みます。独立したコンテナが必要なシナリオに適しています
GTMインストール Google Tag Managerを通じてチャットコードをデプロイします

詳細設定

下にスクロールすると、さらに設定を確認できます。ここでは、Webサイトチャネルの統合、基本設定、チャット前フォーム、営業時間、ウィジェットの外観設定を行えます。

統合

「統合」では主に、チャットバブルコードの統合方法と、関連するセキュリティ設定を提供します。

  • Messenger Script

    「バブルコード」、「iframeコード」、「GTMインストール」を切り替え、それぞれのインストールコードをコピーできます。コードには、現在のWebサイトチャネルのwebsiteTokenと、動作に必要なsdk.jsの参照先アドレスが含まれています。

messger.png

  • ユーザー認証

    デフォルトでは無効になっています。有効にすると、認証関連のキー情報がページに表示されます。この情報をコピーしてサーバーで使用し、訪問者の本人確認パラメータを生成することで、識別の信頼性を高めることができます。

identity.png

  • ドメイン許可リスト

    デフォルトでは無効になっています。有効にすると、許可リストに登録されたドメインのみがWebサイトウィジェットを初期化できます。複数のドメインを設定する場合は、1行に1つずつ入力してください。ローカルデバッグではポート番号を含める必要があります。例:localhost:3000または127.0.0.1:8080。

whitelist.png

設定

Webサイトチャネルの基本パラメータ、訪問者とのインタラクション方法、チャット前フォームを設定します。

  • チャネル情報

    現在のWebサイトチャネルの名前を変更できます。

  • チャネルの挨拶を有効化

    デフォルトでは無効になっています。有効にすると、ユーザーが初めて問い合わせを開始した際に、システムがデフォルトの返信メッセージを自動送信します。

  • クイックコマンド

    デフォルトでは無効になっています。有効にすると、チャットウィンドウの入力ボックス上部にクイックコマンドのタイトルが固定表示され、よくある質問をすばやく送信するようユーザーを案内できます。複数のクイックコマンドを追加でき、一般的な質問、問い合わせの入口、ルーティング案内などに使用することをおすすめします。

  • CSATを有効化

    デフォルトでは無効になっています。有効にすると、会話ステータスが「解決済み」に変更された際に満足度調査がユーザーに送信され、サービスに関するフィードバックを収集できます。

basicsetting.png

  • メールアドレスの収集

    以下の2つの設定に対応しています。

    • メールアドレス収集フィールド: 会話の開始時にメールアドレス入力欄をユーザーに自動表示しますが、入力は必須ではありません。

    • 会話の継続: ユーザーがオフラインの場合、メールアドレスを使用してユーザーとの会話を継続できます。この機能を使用する前に、関連するメールチャネルの設定を完了する必要があります。

  • ユーザー行動の制御

    「ユーザーが会話を終了」の設定に対応しています。有効にすると、ユーザーはウィジェットで現在の会話を自分で終了でき、システムは会話ステータスを「解決済み」に変更します。

othersetting.png

  • チャット前フォーム

    チャット前フォームは「設定」タブに移動され、統一して設定できるようになりました。有効にすると、ユーザーは正式にチャットを開始する前にフォームへ入力する必要があります。

    以下の設定に対応しています。

    • フォーム本文: フォームの目的を説明するために使用します。例:「こんにちは。ご連絡できるよう、以下の情報をご入力ください。」

    • フォームオプション: 「有効化」、「変数名」、「変数タイプ」、「名前」、「プレースホルダー」、「必須」などのパラメータを含むフォームフィールドを、1つずつ設定できます。

    • システムプリセットフィールド: email、phone、firstname、lastnameなどの一般的なフィールドに対応しています。

    • 会話属性フィールド: 既存の会話属性をチャット前フィールドとして選択できます。送信後、対応する会話属性に書き込まれます。

    • メールアドレスフィールド: 訪問者の識別に使用できるほか、後で有人エージェントへの引き継ぎやオフラインでの連絡にも使用できます。

prechatting.png

  • 営業時間

    デフォルトでは無効になっています。有効にすると、現在のWebサイトチャネルの営業時間、タイムゾーン、営業時間外のメッセージ内容を設定できます。営業時間外には、設定に従ってサービスが現在利用できないことを訪問者に通知し、会話の割り当てルールと連携して有人エージェントによる対応を処理します。

workinghours.png

ウィジェットビルダー

「ウィジェットビルダー」は、訪問者側のチャットコンポーネントの外観と表示内容を設定するために使用します。右側のプレビューエリアには、設定の反映結果がリアルタイムで表示されます。

  • テーマ設定

theme.png

以下のパラメータを設定できます。

  • テーマカラー: ウィジェットのメインカラーを設定します。

  • テキストカラー: タイトルや本文などのテキストの表示色を設定します。

  • 背景画像: ウェルカムエリアの背景画像をアップロードして置き換えることができます。

  • 幅: ウィジェットの幅を設定します。デフォルトは400です。

  • 高さ: ウィジェットの高さを設定します。デフォルトは700です。

  • バブル設定

bubble.png

以下の設定に対応しています。

  • バブルスタイル: 「アイコン」、「アイコン+テキスト」、「テキスト」の3つの表示モードに対応しています。

  • アイコン: デフォルトのアイコンを置き換えることができます。

  • テキスト: 「アイコン+テキスト」または「テキスト」スタイルを選択した場合、バブルテキストを設定できます。テキストの長さは20文字以内にしてください。

  • サイズ: ミニ、小、中、大、特大など、さまざまなサイズに対応しています。

  • バブル位置: 表示位置を設定し、下端および側面からの間隔を設定できます。

  • ウェルカムメッセージ

welcome.png

以下を設定できます。

  • タイトル: ウェルカムエリアのメインタイトルです。

  • コンテンツ: ウェルカムエリアの本文です。

  • ガイドテキスト: 「即時回答」エリアに表示され、ユーザーがすぐに問い合わせを開始できるよう案内します。

  • オンラインエージェントの案内を表示

online.png

デフォルトでは無効になっています。有効にすると、エージェントが返信することを示す案内がバブルのホームページに表示されます。

tips.png

  • オンラインエージェントのアバターのみ表示

icon.png

デフォルトでは無効になっています。無効の場合、オフラインのエージェントを含め、現在のチャネルにいるすべてのエージェントのアバターとステータスが表示されます。有効にすると、現在オンラインのエージェントのみが表示され、AIエージェントも含まれます。すべてのエージェントがオフラインの場合、アバターは表示されません。

icon1.png

  • ソーシャルメディア

sns.png

デフォルトでは無効になっています。有効にすると、ソーシャルプラットフォームまたは連絡先チャネルを設定し、ウィジェットのウェルカムカードに表示できます。

  • チケットを送信

ticket.png

デフォルトでは無効になっています。有効にすると、ウィジェットにチケットへの入口が表示され、ユーザーはチケットの確認や送信を行えるようになります。

  • 外部リンク

url.png

デフォルトでは無効になっています。有効にすると、外部ヘルプセンター、FAQページ、その他のナビゲーション入口を表示する外部リンクカードを追加できます。

Icon Solid Transparent White Qiyu
お問い合わせ