顧客チャットインターフェイスをセットアップ

使用を開始する前に、アカウントマネージャーでCustomer chat interfaceを有効にする必要があります。このチャットクライアントは、チャットチャネルの1つの要素にすぎません。コンタクトセンターのチャットの設定はマルチステップのプロセスです。

これらのタスクは、カスタムチャットエクスペリエンスを展開する場合にのみ必要です。V1プロファイルとV2プロファイルのどちらを使用するかを選択します。両方は必要ありません。

チャットプロファイルを作成

特別にカスタマイズされたエクスペリエンスのために複数のチャットプロファイルを作成できますが、customer chat interfaceを設定するために作成する必要があるのは1つだけです。V1またはV2チャットプロファイルを使用するかどうかを決定してから、以下の相関タスクに従います。

V1チャットプロファイルを作成

必要なセキュリティプロファイルの権限チャットプロファイル作成

  1. アプリセレクターをクリックします ACDを選択します。
  2. [連絡先設定]> [チャットプロファイル]に移動します。
  3. 変更するチャットプロファイルを見つけ、クリックして開きます。
  4. 編集をクリックします。
  5. プロファイル名を入力します。
  6. インターフェイスで、ドロップダウンからV1 ASPXを選択します。プロファイルを保存すると、このフィールドは編集できなくなります。
  7. カラースキームを設定します。
  8. プレビュー領域を使用して更新を表示し、チャットウィンドウのスタイル設定を構成します。
  9. プレビュー領域を使用して更新を表示し、チャットダイアログの設定を構成します。エージェントおよび連絡先ダイアログの背景色とフォント色を変更できますが、システムメッセージのフォント色のみを変更できます。システムメッセージは通常、QuemsgなどのStudioアクションによって駆動され、コンテナなしでチャットインターフェイスに表示されます。
  10. プレビュー領域を使用して更新を表示し、チャットステータスインジケータとメッセージの設定を構成します。
  11. 完了をクリックします。

V2チャットプロファイルを作成

必要なセキュリティプロファイルの権限チャットプロファイル作成

  1. アプリセレクターをクリックして、ACDを選択します。
  2. [連絡先設定]> [チャットプロファイル]に移動します。
  3. プロファイルを作成するには、 新規作成をクリックします。
  4. プロファイル名を入力します。
  5. インターフェイスV2(HTML5)を選択します。プロファイルを保存すると、このフィールドは編集できなくなります。
  6. プレビューを使用して更新を表示し、必要に応じて外観フィールドを設定します。
  7. 必要に応じて、事前チャットフォームを有効にして構成します。
    1. Select the Enable Pre-Chat Form checkbox.
    2. Modify the Welcome Message as needed.
    3. Configure the fields as needed by selecting Add Field.

    Contents submitted using this form are passed to the Begin action of your routing script as parameters starting with the entry P0.

  8. 必要に応じて、待機キューウィンドウを有効にして構成します。
    1. Select the Enable Waiting Queue checkbox.
    2. Enter a Waiting Message. このプロファイルに関連付けられたStudioスクリプトがQuemsgアクションを使用して顧客にキュー内の位置を通知する場合、そのメッセージはここで構成したメッセージと交互に表示されます。
    3. If you want to, change the color of the background and tone of the text.
    4. If you want to, add a logo by selecting the Logo checkbox and then doing one of the following:

      • If you already uploaded the logo to CXone for another purpose, select Select Existing. 参照をクリックして、ファイルの選択ウィンドウで画像を見つけます。画像をクリックして選択します。OKをクリックします。
      • If you want to upload a new logo, select Upload New. ファイルを選択をクリックして、アップロードする画像を見つけます。画像をクリックして選択します。開くをクリックします。

    5. If you want to, add a larger image by selecting the Hero image checkbox and then doing one of the following:

      • If you already uploaded the image to CXone for another purpose, select Select Existing. 参照をクリックして、ファイルの選択ウィンドウで画像を見つけます。画像をクリックして選択します。OKをクリックします。
      • If you want to upload a new image, select Upload New. ファイルを選択をクリックして、アップロードする画像を見つけます。画像をクリックして選択します。Click Open.

    CXoneにアップロードする前に、ロゴまたは画像のサイズを変更する必要があります。それ以外の場合、ロゴまたはヒーロー画像は、指定された最大サイズに合わせて引き伸ばされます。Logos and images must be SVG or PNG file types.

  9. プロファイルを作成する場合は、 保存をクリックします。

連絡先をチャットプロファイルに追加

必要なセキュリティプロファイルの権限チャットプロファイル編集

  1. アプリセレクターをクリックします ACDを選択します。
  2. [連絡先設定]> [チャットプロファイル]に移動します。
  3. 連絡先に割り当てるチャットプロファイルを見つけ、クリックして開きます。
  4. 連絡先タブをクリックします。
  5. 連絡先を追加表で、チャットプロファイルを割り当てる連絡先に対応するチェックボックスを選択します。このプロファイルをすべての連絡先に割り当てる場合は、このステップをスキップしてください。
  6. 連絡先を追加をクリックします。すべてのアクティブなチャットの連絡先にチャットプロファイルを割り当てるには、すべて追加をクリックします。

ライブチャットV2(HTML5)をWebページに埋め込んでカスタマイズ

  1. アプリセレクターをクリックします ACDを選択します。
  2. 連絡先設定> 連絡先に移動します。
  3. 既存の連絡先を選択するか、新しい連絡先を作成します。
  4. ページの下部にあるコードをコピーします。
  5. Paste the copied text at the end of the <body> section of your webpage.
  6. ウェブサイトに表示されるデフォルトのライブチャットアイコンを置き換える場合は、ウェブサイトに貼り付けたスクリプトに以下を追加します。

    1. Add the following to the script, just below the <script type ="text/javascript"> line:

      function showBadge( i) { var divBadge = document.getElementById("divBadge"); if(i>0) { divBadge.innerHTML=i; divBadge.style.display="block"; divBadge.classList.add('badge2'); } else if(i==0 && divBadge) { divBadge.style.display="none";} }

    2. Add the .badge2 class to your website's CSS and style the badge effects on the custom live chat button how you want them.

    3. Add the following highlighted code to the icPatronChat.init code block:

      icPatronChat.init( { serverHost:'http://home-b2.incontact.com', bus_no:50, poc:'c7744b03-fe43-437f-a464-aec52e56f683', params:['FirstName','Last Name','first.last@company.com',555-555-5555], customChatButton: true }, showBadge);
      

      params is an array of strings that pass to the Studio script at run time. チャット前のフォームフィールドを含め、最大10個のカスタムクエリパラメータを送信できます。

    4. Add the custom button with HTML, just after the </script> tag. The link must include onclick="icPatronChat.setStateWindowToggle()". 次の例を参照してください:

      <a class="button2" onclick="icPatronChat.setStateWindowToggle()"> <span>Live Chat</span><div id="divBadge" class="badge2"></div> </a>

    5. ウェブページを保存してテストします。必要に応じて変更します。
  7. 連絡先が開いたときにウェブサイトのライブチャットウィンドウのサイズと位置をカスタマイズする場合は、ウェブサイトに貼り付けたスクリプトに対して次の操作を実行します。

    1. icPatronChat.init行の上に、次のコードブロックを追加します。

      変数の寸法= {top:20,left:200,height:50,width:600};

    2. Set the top and left settings to the number of pixels from the top and left side of the browser window you want the top left corner of the chat window to be positioned on your website.
    3. Set the height and width settings to the number of pixels high and wide you want the window to be when a contact opens it.
    4. Add the following line just above the </script> tag.

      icPatronChat.setDimension(dimensions);

    5. ウェブページを保存してテストします。必要に応じて変更します。

Customer chat interfaceポップアウトウィンドウをウェブページに追加

これらの手順は、V1(ASPX)とV2(HTML5)の両方のチャットプロファイルで機能します。

  1. アプリセレクターをクリックします ACDを選択します。
  2. [連絡先設定]> [チャットプロファイル]に移動します。
  3. 既存の連絡先を選択するか、新しい連絡先を作成します。
  4. 連絡先URLをコピーします。
  5. これらのコード行をウェブページの<body>セクションの最後に追加します。強調表示されたテキストをURLに置き換えます。

    <script type = "text/javascript"> var popupPatronChat = function() { var url = "https://home-c4.incontact.com/inContact/ChatClient/ChatClient.aspx?poc=815f0de7-f189-4f6a-b272-4ffbcf80c0b&&bu=50&P1=First Name&P2=Last Name&P3=first.last@company.com&P4=555-555-5555; window.open(url, 'icPatronChatWin', 'location=no,height=630,menubar=no,status-no,width=410', true); }; </script>

    URLの後のパラメータは、実行時にStudioスクリプトに渡される文字列の配列です。最大10個含めることができます。