顧客チャットインターフェイスを設定

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

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

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

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

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

必須の権限：チャットプロファイルの作成

アプリセレクターをクリックして、選択 ACD 。
[連絡先設定]> [チャットプロファイル]に移動します。
変更するチャットプロファイルを見つけ、クリックして開きます。
編集をクリックします。
プロファイル名を入力します。
インターフェースで、ドロップダウンからV1 ASPXを選択します。プロファイルを保存すると、このフィールドは編集できなくなります。

カラースキームを設定します。

配色の詳細

フィールド	詳細
配色	使用中のシステムの配色。次のテンプレートのいずれかをそのまま使用することも、会社のニーズに合わせて変更することもできます。デフォルト — 青と白とグレー。配色1 —白と青。配色2 —黄色と白とオレンジ。カラースキーム3 —赤とグレーと白。

プレビュー領域を使用して更新を表示し、チャットウィンドウのスタイル設定を構成します。

ロゴイメージ詳細

フィールド	詳細
ロゴイメージ	ロゴを既存のチャットプロファイルに追加できません。ロゴなしでチャットプロファイルを作成し、後で顧客チャットインターフェースにロゴを含めることにした場合、新しいチャットプロファイルを作成し、適切な連絡先にそれを割り当てる必要があります。

プレビュー領域を使用して更新を表示し、チャットダイアログの設定を構成します。エージェントおよび連絡先ダイアログの背景色とフォント色を変更できますが、システムメッセージのフォント色のみを変更できます。システムメッセージは通常、QuemsgなどのStudioアクションによって駆動され、コンテナなしでチャットインターフェースに表示されます。
プレビュー領域を使用して更新を表示し、チャットステータスインジケータとメッセージの設定を構成します。
完了をクリックします。

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

必須の権限：チャットプロファイルの作成

アプリセレクターをクリックして、選択 ACD 。
[連絡先設定]> [チャットプロファイル]に移動します。
プロファイルを作成するには、新規作成をクリックします。
プロファイル名を入力します。
インターフェースでV2（HTML5）を選択します。プロファイルを保存すると、このフィールドは編集できなくなります。
プレビューを使用して更新を表示し、必要に応じて外観フィールドを設定します。
画像の表示
必要に応じて、事前チャットフォームを有効にして構成します。
画像の表示
1. プレチャットフォームを有効にするチェックボックスを選択します。
2. 必要に応じてウェルカムメッセージを変更します。
3. フィールドを追加するを選択して、必要に応じてフィールドを設定します。
このフォームを使い送信するコンテンツは、エントリーP0で始まるパラメーターとしてルーティングするスクリプトの開始アクションに渡されます。
必要に応じて、待機キューウィンドウを有効にして構成します。
画像の表示
1. 待機キューを有効化チェックボックスを選択します。
2. 待機メッセージを入力します。このプロファイルに関連付けられたStudioスクリプトがQuemsgアクションを使用して顧客にキュー内の位置を通知する場合、そのメッセージはここで構成したメッセージと交互に表示されます。
3. 必要であれば、背景の色や文字のトーンも変えてみましょう。
4. 必要があれば、ロゴのチェックボックスを選び、以下のうち一つを選ぶことにより、ロゴを追加します：
  - 別の目的のためにすでにロゴをCXoneへアップロードした場合、既存を選択を選択します。参照をクリックして、ファイルの選択ウィンドウで画像を見つけます。画像をクリックして選択します。OKをクリックします。
  - 新しいロゴをアップロードする場合、今すぐアップロードを選択します。ファイルを選択をクリックして、アップロードする画像を見つけます。画像をクリックして選択します。開くをクリックします。
5. 必要があれば、ヒーロー画像のチェックボックスを選び、以下のうち一つを選ぶことにより、大きな画像を追加します：
  - 別の目的のためにすでに画像をCXoneへアップロードしていたならば、既存を選択を選択します。参照をクリックして、ファイルの選択ウィンドウで画像を見つけます。画像をクリックして選択します。OKをクリックします。
  - 新規画像をアップロードする場合は、新規画像のアップロードを選択する。ファイルを選択をクリックして、アップロードする画像を見つけます。画像をクリックして選択します。開くをクリックします。
CXoneにアップロードする前に、ロゴまたは画像のサイズを変更する必要があります。それ以外の場合、ロゴまたはヒーロー画像は、指定された最大サイズに合わせて引き伸ばされます。ロゴと画像は、SVGまたはPNGファイルタイプである必要があります。
プロファイルを作成する場合は、保存をクリックします。

ポイントオブコンタクト(PoC)をチャットプロファイルに追加

必須の権限：チャットプロファイルの編集

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

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

アプリセレクターをクリックして、選択 ACD 。
ポイントオブコンタクト(PoC)設定> ポイントオブコンタクト(PoC)に移動します。
既存の連絡先を選択するか、新しい連絡先を作成します。
ページの下部にあるコードをコピーします。
ウェブページの <body> セクションの終わりにコピーしたテキストに貼り付けます。
ウェブサイトに表示されるデフォルトのライブチャットアイコンを置き換える場合は、ウェブサイトに貼り付けたスクリプトに以下を追加します。

デフォルトのライブチャットアイコンを表示
1. <script type ="text/javascript">の行の下に、スクリプトに以下を追加します：
```
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. .badge2クラスをウェブサイトのCSSを追加し、カスタムライブチャットボタン上のバッジ効果を好きなようにスタイルします。
3. 以下のハイライトされたコードを icPatronChat.initコードブロックに追加します：
```
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は、実行時にStudioスクリプトに渡される文字列の配列です。チャット前のフォームフィールドを含め、最大10個のカスタムクエリパラメータを送信できます。
4. HTMLの付いたカスタムボタンを、</script>タグの真後ろに追加します。リンクには onclick="icPatronChat.setStateWindowToggle()" を含める必要があります。次の例を参照してください：
```
<a class="button2" onclick="icPatronChat.setStateWindowToggle()"> <span>Live Chat</span><div id="divBadge" class="badge2"></div> </a>
```
5. ウェブページを保存してテストします。必要に応じて変更します。
連絡先が開いたときにウェブサイトのライブチャットウィンドウのサイズと位置をカスタマイズする場合は、ウェブサイトに貼り付けたスクリプトに対して次の操作を実行します。

デフォルトのライブチャットウィンドウサイズを表示
1. icPatronChat.init行の上に、次のコードブロックを追加します。
```
var dimensions = {top:20,left:200,height:50,width:600};
```
2. topとleftの設定は、チャットウィンドウの左上をウェブサイト上に配置したいブラウザウィンドウの上端と左端からのピクセル数に設定します。
3. heightとwidthの設定は、コンタクトがウィンドウを開いたときに表示させたい縦横のピクセル数に設定します。
4. </script>の真上に以下の行を追加します。
```
icPatronChat.setDimension(dimensions);
```
5. ウェブページを保存してテストします。必要に応じて変更します。

顧客チャットインターフェイスポップアウトウィンドウをWebページに追加

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

アプリセレクターをクリックして、選択 ACD 。
[連絡先設定]> [チャットプロファイル]に移動します。
既存の連絡先を選択するか、新しい連絡先を作成します。
ポイントオブコンタクト(PoC)URLをコピーします。

これらのコード行をウェブページの<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個含めることができます。