メインコンテンツにスキップ
Skip to article
  • Customer Experience
    Customer Experience
  • Employee Experience
    Employee Experience
  • Brand Experience
    Brand Experience
  • Core XM
    Core XM
  • Design XM
    Design XM

ライブチャットの導入 (QSC)

Was this helpful?


This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

The feedback you submit here is used only to help improve this page.

That’s great! Thank you for your feedback!

Thank you for your feedback!

ライブチャットの実装について

ライブチャットは、ウェブサイトにライブチャットサービスを追加できるQualtrics Social Connect機能です。顧客がこのチャットボットをクリックすると、エージェントが実行するためのメンションが Social Connect アカウントに作成されます。エージェントがこの説明を返信すると、チャットボットから返信が届き、シームレスな会話体験が顧客に提供されます。
Web サイトのライブチャットウィンドウ

注意: この機能を使用するには、IT チームと協力して Web サイトを変更する必要があります。カスタムコーディング機能はそのまま提供され、実装にはプログラミングの知識が必要です。Qualtricsサポートでは、カスタムコーディングに関するサポートやコンサルティングを提供していません。ただし、 コミュニティの経験豊かなユーザー（英語） に尋ねてみることは可能です。カスタムコーディングサービスの詳細については、クアルトリクスの営業担当にお問い合わせください。

ライブチャット入門

ライブチャットは、クアルトリクスライセンスのアドオンです。ライブチャットの使用を開始するには、営業担当に連絡してください。ライブチャットがアカウントに追加されると、一意の統合 ID とアプリケーション ID が提供されます。これらの ID は、後で使用するために保存します。

ライブチャットのカスタマイズ

アカウントに対してライブチャットが有効化されると、次の場所で見つけることができます。 プロファイルマネージャ。ここでは、以下のようなライブチャットの側面をカスタマイズできます。

  • チャットウィンドウのルックアンドフィール (色とロゴ)。
  • チャットウィンドウが表示される Web サイトドメインを追加します。
  • 顧客が初期メッセージを送信したときに開始されるフローを選択します。
  • すべての送信メッセージにクイック返信を添付します。

詳細については、ライブチャットプロファイルページを参照してください。

Web サイトへのライブチャットの追加

While in the プロファイルマネージャプレビューをクリックして、ライブチャットのコードスニペットを表示します。 右下隅にある［プレビュー］ボタン

このコードをコピーして、IT チームに渡します。ユーザは、ライブチャットを表示する Web サイトのヘッダまたは本文にコードを追加する必要があります。
ライブチャットのコード

追加すると、ウェブサイトの右下隅にライブチャットが表示されます。その後、CSS を調整することで、ライブチャットをさらにカスタマイズすることができます。CSSとのライブチャットのカスタマイズの詳細については、この外部サポートページを参照してください。

ヒント：プレビューページでは、ライブチャットのルックアンドフィールをプレビューできます。右下隅にある［ライブチャット］ボタンをクリックするだけです。

自動ケース作成

ライブチャット
を使用する場合は、自動ケース作成を有効化することを強くお奨めします。これにより、各メッセージが個別のメンションとして追加されるのではなく、同じメッセージのやり取りからのメッセージが自動的にスレッドにグループ化されます。

Web ページ追跡

複数の Web ページにライブチャットがある場合は、Web ページ追跡を追加することをお奨めします。これにより、エージェントは顧客がチャットしている Web ページを確認することができます。Web ページ追跡を追加するには、ライブチャットのコードスニペットにコードを追加する必要があります。

  1. 既存のコードスニペットで、以下のコード行を見つけます。 
    ClarabridgeChat.init({ appId: 'integration-id' }).then(() => {
  2. 改行を挿入します。
  3. 新規行に以下のコードブロックを追加します。 
    ClarabridgeChat.setDelegate({

 beforeSend(message) {

 message.metadata = {

 ...message.metadata,

 originTitle: document.title,

 originUrl: window.location.href

 };

 return message;

 }

 });
  4. 言及に、顧客がチャットした Web ページが表示されるようになります。

アイスブレーカ

アイブレーカは、Web サイトのライブチャットアイコンの横に表示される短いメッセージです。質問がある場合は、多くの場合、ライブチャットをリソースとして顧客の注意を引くためのプロンプトとして機能します。以下の例では、「お手伝いできることはありますか？」は氷のブレーカーです。

アイブレーカを追加するには、ライブチャットのコードスニペットにコードを追加する必要があります。

  1. 既存のコードスニペットで以下のコード行を見つけます。 
    ClarabridgeChat.init({

 // integrationId: 'your_integration_id', // この OR または appId

 appId を使用: '', // この OR integrationId を使用
  2. 改行を挿入します。
  3. 新規行に以下のコードブロックを追加します。 
    ticleaker : {

 delay: 1000,

 text: 'Can we help you?',

 スタイル: {

 backgroundColor: '#9FFF04',

 textColor: '#F420F5',

 borderWidth: '1px', //

 borderColor: '#EAFD10',

 width: '150px', //

 height: '40px' //

 }

 },
  4. 上記のコードスニペットでは、太字の値を調整して、アイブレーカをカスタマイズできます。IT チームにサポートを依頼する必要がある場合があります。各項目のヒントを以下に示します。
    • 遅延: アイスブレイカーが表示される前に、顧客がページに費やす必要がある時間。遅延期間をミリ秒単位で入力します。
    • テキスト: アイスブレーカメッセージを入力します。
    • スタイル: アイスブレーカの外観をカスタマイズするための追加の CSS プロパティです。必須なものもあれば、任意であるものもあります。各プロパティの詳細については、引き続き参照してください。
    • backgroundColor: 背景色。HEX 色コードを入力してください。このプロパティは必須です。
    • textColor: テキストの色。HEX 色コードを入力してください。このプロパティは必須です。
    • borderWidth: メッセージを表示する吹き出しの枠線の幅。幅をピクセル単位で入力します。このプロパティはオプションです。除外すると、アイブレーカは境界線を持ちません。
    • borderColor: 境界線の色。HEX 色コードを入力してください。borderWidth を使用する場合、このプロパティは必須です。
    • width: アイブレーカーブルの幅。幅をピクセル単位で入力します。このプロパティはオプションです。除外すると、アイブレーカのデフォルト幅は 150 ピクセルになります。
    • height: アイスブレーカーバブルの高さ。高さをピクセル単位で入力します。このプロパティはオプションです。除外すると、アイブレーカはデフォルトの高さ 50 ピクセルになります。
  5. ライブチャットアイコンの横にアイブレーカメッセージが表示されるようになります。

フロー

ライブチャットにフローを追加して
、ライブチャットを介して応答を自動化することができます。フロー作成の詳細については、リンク先のページを参照してください。このセクションでは、ライブチャットにフローを追加する方法について説明します。

  1. 元のライブチャットコードスニペットの後に以下のコードブロックをペーストします。 
    ClarabridgeChat.on('widget:opened', () => {

 ClarabridgeChat.createConversation();

 });
  2. 以下にナビゲートします。 プロファイルマネージャ [Send Flow on Start] ドロップダウンを使用して、フローを選択します。
  3. 3 つの追加フローを選択して、カスタマにさまざまなオプション (チャットオーバーの開始やサポート言語の変更など) を提供する各送信メッセージに添付することができます。

業務時間とエージェント可用性

ライブチャット
は、営業時間中およびエージェントがオンラインおよび対応可能である場合にのみ利用可能になるように制限することができます。これには、ライブチャットをQualtricsSocial Connect APIと統合する必要があります。業務時間スケジュールも登録する必要があります。

  1. ウェブサイトをQualtrics Social Connect APIと統合するには、このガイドに従ってください。
  2. 業務時間 ID を取得するには、このエンドポイントを呼び出します。
  3. ビジネス ID を使用し、このエンドポイントを使用して業務時間スケジュールを取得します。
  4. 以下のような結果が表示されます。 
    {"name":"My schedule","periods","dayofweek":00"00"dayofweek":1,"start":"1900","0900","終了":"1900","週","開始","1800:00","週","終了":{"週","開始{","1800":"週","終了":{"
  5. この情報を使用して、勤務時間中にのみライブチャットを有効化することができます。
  6. 同じ API コールを使用して利用可能なエージェントに関する情報を取得し、利用可能なエージェントがない場合はライブチャットを無効化することもできます。

当サポートサイトの日本語のコンテンツは英語原文より機械翻訳されており、補助的な参照を目的としています。機械翻訳の精度は十分な注意を払っていますが、もし、英語・日本語翻訳が異なる場合は英語版が正となります。英語原文と機械翻訳の間に矛盾があっても、法的拘束力はありません。