チャットでのプロアクティブオファーの設定方法
プロアクティブオファーとは、ライブエージェントへのコールやチャットを提案するポップアップ式のWebチャットウィジェットです。通常のサービス対話では顧客が会話を開始する必要がありますが、プロアクティブオファーはコンタクトセンター側から開始されるため、「プロアクティブ」と呼ばれています。
プロアクティブオファーを使用することで、即座のヘルプの提供、販売や割引の促進、顧客のサイト離脱防止など、さまざまな用途にご使用いただけます。Bright Pattern Contact Centerでは、指定された条件が満たされた際にプロアクティブオファーが起動するよう設定されています。なお、プロアクティブオファーは、Webチャットと同じページに配置することも、単独で配置することも可能です。
この記事では、Webサイト上でプロアクティブオファーを表示するために、チャットシナリオ、チャットサービス、チャットシナリオエントリー、およびプロアクティブオファーの条件を連携させて設定する方法について解説します。
手順
ステップ 1：チャットシナリオの作成または選択
既存のチャットシナリオを選択して使用することも、新規のチャットシナリオを作成することもできます。詳細については、『コンタクトセンター管理者ガイド』のセクション 「チャットシナリオ」をご参照ください。
ステップ 2: チャットサービスの作成または選択
どのような種類のチャットを開始する場合でも、まずチャットサービスを設定しておく必要があります。詳細については、チュートリアル 「チャットサービスの設定」をご参照ください。
ステップ 3：メッセージ送信/チャットシナリオエントリーの作成または選択
また、メッセージ送信/チャットシナリオエントリーを作成するか、既存のものを選択する必要があります。詳細については、『コンタクトセンター管理者ガイド』のセクション 「メッセージ送信/チャットシナリオエントリー」をご参照ください。
ステップ 4: プロアクティブオファーの追加
Contact Center Administrator アプリケーションの「シナリオエントリー > メッセージ送信/チャット > チャットウィジェット」タブにある「プロアクティブオファー」の下で、［追加］をクリックしてください。
「チャットウィジェット設定エディタ」が開くと、以下のエリアが表示されます：
- 名前 - ウィジェットの名前（任意の名前）を入力する必要があります。
- タブ - 画面の左側にある各タブをクリックして、プロアクティブオファーウィジェットの特定のプロパティを編集します。
- プレビュー URL - 必要に応じて、このウィジェットが表示されるウェブページの URL を入力してください。これにより、プレビューペイン内でプロアクティブオファーウィジェットの背景としてそのページが表示されます。プレビューペインに正しく表示されるためには、ウェブページが公開（ホスト）されている必要がありますのでご注意ください。
- プレビューペイン - 設定されたウィジェットのプレビュー画像が表示されます。プレビューURLを入力した場合は、そのウェブページを背景として、設定された位置やスタイルのままウィジェットが表示されます。
ステップ 5：プロアクティブオファーを有効にし、連絡先オプションを設定する
［プロアクティブオファー］タブでは、ウィジェットを有効にし、チャットや音声通話、あるいはその両方など、顧客に提供するコミュニケーションチャネルを決定します。
以下の設定を行ってください：
- 有効 - チェックボックスを選択して、プロアクティブオファーウィジェットを有効にします。これが最も重要な設定です。「有効」を選択しない場合、プロアクティブオファーはウェブサイトに表示されません。
- HTML コンテンツ - 既定では、表示される HTML は「<h1 style="text-align: center">何かヘルプが必要ですか？」となります。適切なHTMLタグを使用している限り、コードは自由にカスタマイズできます。たとえば、テキストのフォーマットや表示を変更したり、プロアクティブオファーウィジェットに画像への参照を挿入したりすることができます。
例：
<h1 style="text-align: center">ヘッダーテキスト<br><img src="https://<domain>/image.jpg" alt="画像の代替テキスト" width="300" height="180">
なお、プロアクティブオファーのスタイル（テキストの色、背景色、ボタンの色など）は、チャット全体のスタイルによって制御されており、プロアクティブオファーの「HTML コンテンツ」フィールドでは上書きすることはできません。このようなスタイルの変更を行うには、Contact Center Administrator アプリケーションの「シナリオエントリー > メッセージ送信/チャット > チャットウィジェット タブ > チャットのスタイル設定」に移動し、［編集］をクリックしてください。詳細については、『チャットウィジェット設定ガイド』のセクション 「チャットウィジェットのスタイル設定」をご参照ください。
連絡オプション
「プロアクティブオファー」タブ内には、連絡先オプションがあります。これらは、コンタクトセンターに連絡するためのクリック可能な手段です。コールとチャットの両方のオプションを設定する必要はありません。どちらか一方、または両方を選択してください。
以下の連絡先オプションはすべて、必要に応じて設定してください：
- チャットボタンを有効にする - 顧客がプロアクティブオファーウィジェットからウェブチャットを開始できるようにする場合は、このチェックボックスを選択してください。
- チャットボタンのテキスト - チャットボタンに表示されるラベルです。既定では「チャット」となっています
- 電話ボタンを有効にする - 顧客がプロアクティブオファーウィジェットから音声通話を開始できるようにする場合は、このチェックボックスを選択してください。
- 電話ボタンのテキスト - 「電話」ボタンの表示ラベルです。既定では「電話」となっています。
- キャンセルボタンのテキスト - キャンセルボタンに表示されるラベルです。既定では「キャンセル」となります
- 閉じるボタン - プロアクティブオファーウィジェットに「X」の閉じるボタンを表示したい場合は、このチェックボックスを選択してください。これはオプションですが、推奨されます。
ステップ 6：プロアクティブオファーウィジェットのスタイルを設定する
「プロアクティブオファーのスタイル設定」では、ウィジェット自体の外観や雰囲気を決定できます。変更を行わない場合、ウィジェットのスタイルは表示されている既定（デフォルト）設定のままとなります。
スタイルをカスタマイズするには、必要に応じて以下を設定してください：
- 幅 - ウィジェットの幅（ピクセル単位）
- 高さ - ウィジェットの高さ（ピクセル単位）
- 表示時のアニメーション - プロアクティブチャットウィジェットが画面上を移動したり、画面に表示されたりする様子
- 非表示時のアニメーション - プロアクティブチャットウィジェットが画面外へ移動する様子
- 位置 - チャットウィジェットをウェブページ上のどこに配置するか（例：右上、右中央、右下など）
ステップ 7：プロアクティブオファーの条件を設定する
「プロアクティブオファーの条件」で「追加」をクリックし、ウェブサイト訪問者にプロアクティブチャットを表示するために満たすべき要件を設定します。これらの要件は「条件」と呼ばれ、条件を設定することで、プロアクティブオファーを独創的かつご利用のユースケースに合わせて具体的にカスタマイズできます。条件はいくつでも追加できます。
多くの 条件が利用可能ですが、最も一般的な条件には次のようなものがあります：
- 退出直前（マウスの動き） - この条件は、顧客のカーソルがページ上で動き、まるでページを退出するか、別の場所へ移動しようとしているかのように見える際に、プロアクティブオファーのポップアップをトリガーします。プロアクティブオファーを使用することで、顧客の注意を引き、ページに長く留まってもらうことができます。
- 参照元URL - この条件は、顧客が特定のURL（販売オファーで提供されたものなど）を経由して特定のページにアクセスした際に、プロアクティブオファーをポップアップ表示させます。
例えば、メールマガジンで夏のプロモーションが告知され、「＜ここをクリック＞」するだけで特別割引が受けられる場合を考えましょう。ここで、「＜ここをクリック＞」は次のURLを指します：https://mycompany.com/2020/06/?utm_medium=&utm_source=newsletter&utm_campaign=20200617-enews-&utm_content=summerdiscount
この例の場合、図のようにそのURLをテキストフィールドに貼り付けて、「参照元URL」条件を設定します：
ステップ 8：オプションで、チャット前のフォームを設定する
このステップは任意であり、プロアクティブオファーでチャットを有効にし、かつエージェントに接続される前に顧客から情報を収集したい場合にのみ実行してください。
［チャット前フォームの設定］タブで、［有効］のチェックボックスを選択し、 プレチャットフォームのプロパティを設定します。「有効」を選択しない場合、顧客にはプレチャットフォームは表示されません。
ステップ 9: Web ページの URL を追加する
- 変更内容を保存し、チャットウィジェット設定エディタを閉じてください。
- 「チャットウィジェット」タブに戻り、プロアクティブオファーの下にある［URLを追加］をクリックします。
ページ上でプロアクティブオファーが起動するように、URLを追加してください - プロアクティブオファーが表示されるウェブページのURLを入力してください。これを行わない場合、プロアクティブオファーは起動しません。
プロアクティブオファーにURLを追加すると、そのURLが表示されます - 下部にある［適用］をクリックして、変更を保存してください。
ステップ 10：HTML を取得する
プロアクティブチャットウィジェットのコードをコピーし、ウェブページに貼り付けてください。詳しくは 「Web用HTMLスニペットの使用方法」をご参照ください。
ステップ 11: プロアクティブオファーのテスト
このプロセスの最後のステップとして、指定した条件でプロアクティブオファーが起動できるかテストしてください：
- チャットサービスに割り当てられたチームのエージェントとしてエージェントデスクトップにログインし、エージェントの状態を「受付可能」に設定してください。
- 別のウェブブラウザ（シークレットモードでも構いません）で、HTMLチャットスニペットが配置されているウェブページにアクセスしてください。
- 設定で指定したすべてのプロアクティブオファーの条件をトリガーしてください。たとえば、「退出直前（マウスの動き）」という条件を指定した場合は、そのページに数分間留まった後、ブラウザのタブまたはウィンドウを閉じるよう試みてください。その動きによって、ページ上にプロアクティブオファーが表示されるはずです。
実際のページでのプロアクティブオファーの例 - プロアクティブオファーが表示されない場合は、この手順をもう一度確認し、すべてのステップを正しく実行したかご確認ください。
これでプロアクティブオファーの設定は完了です。チャットウィジェットの設定に関する詳細については、 『チャットウィジェット設定ガイド』をご参照ください。