プロアクティブなチャットポップアップをカスタマイズ

プロアクティブチャット用のカスタマイズ可能なポップアップは、基本的なポップアップよりも柔軟性とオプションを提供します。これらのポップアップオプションは、 ライブチャット エージェントとコンタクトがリアルタイムでやり取りすることそしてチャットメッセージング コンタクトが任意のタイミングでチャットメッセージを送信し、返信を待つ非同期チャットチャネル コンタクトがエージェントやボットとやり取りする方法。 チャネルには、音声、Eメール、チャット、ソーシャルメディアなどが含まれます。で利用可能です。以下を指定できます。

• ポップアップが表示されるウェブサイトのページ。
• ポップアップが表示されたとき。ポップアップの表示をトリガーする特定のイベントを構成できます。イベントには、ウェブページの訪問者がページに一定の時間を費やしたり、ショッピングカートに一定数のアイテムを入れたりすることが含まれます。
• ポップアップがどのように見えるか。テキストの色、境界線の色、境界線の画像、ポップアップの場所など、高度なポップアップの外観をカスタマイズするための多くのオプションがあります。

タグマネージャーアプリケーション

カスタマイズ可能なポップアップを使用するには、ウェブサイトにタグ WebサイトのHTMLコードに配置され、タグマネジャーアプリケーションによって使用されるコードのスニペット。 HTMLコードタグやソーシャルメディアコンテキストでのタグとは異なります。マネージャー アプリケーションが必要です。タグマネージャーは、ウェブサイトの訪問者を「監視」し、それに応じてアクションをトリガーできるアプリケーションです。Digital Experienceの場合 、タグマネージャアプリケーションは、訪問者にポップアップを表示します。GoogleタグマネージャーまたはTealiumなどの別のタグマネージャーを使用できます。

タグマネージャで、ウェブサイトの訪問者にポップアップを表示させるイベントと条件を定義します。条件により、ポップアップがいつ表示されるかを非常に具体的にすることができます。たとえば、訪問者がページを下にスクロールするようにイベントを定義する場合、ページをスクロールするすべての訪問者にポップアップを表示したくない場合があります。ページの半分以上下にスクロールした訪問者にのみポップアップを表示したい場合があります。これをページスクロールイベントの条件として設定できます。

Digital Experienceで、定義したタグマネージャーイベントに作業をリンクするトリガーを使用してワークフロー自動化作業を作成します。ポップアップの外観をカスタマイズできるのは仕事です。

これは、ウェブサイトの訪問者が、ポップアップを表示するように構成したウェブページにいるときに発生します。

1. ウェブサイトの訪問者は、タグマネージャーで設定した条件を満たすアクションを実行します。
2. タグマネージャは Digital ExperienceAPI を介して APIを使用すると、組織で使用している他のソフトウェアとCXoneシステムを接続することにより、特定の機能を自動化できます。に連絡します。
3. トリガーされたタグマネージャーイベントにリンクされたワークフロー自動化ジョブが実行され、訪問している ウェブページの訪問者にポップアップが表示されます。

高度なポップアップ要件

高度なプロアクティブチャットポップアップを使用するには、次のものが必要です。

• 組織のウェブサイト：ウェブサイトには、タグ WebサイトのHTMLコードに配置され、タグマネジャーアプリケーションによって使用されるコードのスニペット。 HTMLコードタグやソーシャルメディアコンテキストでのタグとは異なります。マネージャーアプリケーション用のスクリプトとデジタルチャットウィジェットスクリプトが必要です。
• タグマネージャーアプリケーションのアカウント：GoogleタグマネージャーまたはTealiumなどの別のタグマネージャーアプリケーションを使用できます。
• デジタルルーティング システムはルーティングキューを使用して、どのエージェントにケースをルーティングするかを決定します。 システム管理者は、特定のケースがそのタイプに精通したエージェントにルーティングされるように、ルーティングキューを作成します。：のルーティングDigital Experienceは、必要に応じてライブ チャットまたはチャット メッセージング用に設定する必要があります。
• 高度なポップアップを有効化：組織でこの機能を有効にするには、CXoneアカウント担当者に連絡してください。

タグマネージャーの準備

お客様はウェブサイトにデジタルポップアップを表示させるためのイベントと条件を見るためにお使いのタグ WebサイトのHTMLコードに配置され、タグマネジャーアプリケーションによって使用されるコードのスニペット。 HTMLコードタグやソーシャルメディアコンテキストでのタグとは異なります。マネージャーアプリケーションをセットアップする必要があります。タグマネージャで、以下を設定する必要があります。

• トリガーイベント：ウェブサイトを閲覧するときにトリガーが「監視」するイベント発生。タグマネージャは、トリガーが監視できるイベントに対してさまざまなオプションを提供します。たとえば、特定のウェブページの表示、特定のリンクのクリック、ページの特定の部分へのスクロール、またはページで費やされた時間の長さを選択できます。
• トリガー条件：トリガーイベントに関する特定の詳細。これらの詳細は、タグマネージャーが対処する必要のあるオカレンスを決定するのに役立ちます。たとえば、誰かがページを下にスクロールする必要がある距離、訪問者がクリックする必要がある特定のリンク、またはページで費やす必要がある時間を指定できます。
• タグ：タグには、トリガーイベントが発生し、条件が満たされたときにタグマネージャーが行うはずのことに関する情報が含まれています。Digital Experienceプロアクティブ チャット ポップアップの場合、タグ マネージャー アプリケーションが Digital Experienceと通信できるようにするスクリプト コードのスニペットを含むカスタム HTML タグを使用します。カスタム HTML で使用するコードは次のとおりです。

ここで[トリガーID]は、作成するワークフロー自動化トリガーのID番号です。Digital Experienceで編集モードで表示しているときに、トリガーのURLでIDを見つけることができます。 .

ワークフロー自動化ポップアップジョブを作成

このジョブのステップに従うと、テンプレートに基づいてチャットポップアップをカスタマイズすることができます。

1. アプリセレクターをクリックして、次を選択します：ACD.

2. デジタル > 自動化ジョブに移動します。

3. 追加をクリックします。
4. ジョブの機能を説明する名前を入力します。
5. アクションドロップダウンから、チャットポップアップボックスを選択します。
6. ポップアップボックス名を入力します。
7. ポップアップボックスのレイアウトに使用するテンプレートを選択します。各テンプレートの例は、テンプレートドロップダウンリストの下に表示されます。

8. 。テキストフィールドで、プレーンなテキストを入力するか、カスタムフィールドを使用するためにフォーマットされた入力値を入力します。カスタムフィールドを使うと、お客様の体験をパーソナライズするのに役立ちます。

   プレーンテキスト入力例

   お客様、5％の特別割引を提供させていただきます。

   カスタムフィールドの入力例

   {{customer.firstName}}様、{{customer.customField.discountValue}}の特別割引を提供させていただきます。

   カスタムフィールドを使用する場合は、カスタムフィールドが失敗した場合に備えて、フォールバック値を含めるとよいでしょう。そのためには、次のような書式で本文に1行追加します：

   {{fallbackMessage|Dear customer, we would like to offer you a special discount of 5%.}}

   |の後ろにあるテキストは、フォールバックメッセージとみなされます。

9. アクションの呼び出しセクションで、選択したテンプレートがアクションの呼び出しに対応し、このポップアップにそれを含める場合は、アクションの呼び出しの表示ドロップダウンから有効にするを選択します。アクションの呼び出しテキストを入力します。
10. デザインのカスタマイズセクションで、ポップアップのサイズ、背景、境界線、およびテキストの外観を構成します。色を含める場合は、background-colorなどのCSSタグを含める必要はありません。色名、HEX番号（番号記号（＃）を含む）のみを含める必要があります。RGB設定、またはその他のCSSでサポートされている色の定義方法。
11. 位置セクションで、ページ上の場所を位置のドロップダウンから選択します。オフセットXおよびオフセットYテキストボックスにピクセル数を入力して、ポップアップの場所をさらに変更できます。
12. ハンドオーバーセクションで、カスタムフィールドを3つまで選択します。
13. 保存をクリックします。

HTMLポップアップのジョブの作成

このジョブのステップに従うと、テンプレートに制限されない独自のポップアップを作成できます。ボタン、フォーム、リンクなど、カスタマイズした要素をさらに追加できます。

1. アプリセレクターをクリックして、次を選択します：ACD.

2. デジタル > 自動化ジョブに移動します。

3. 追加をクリックします。
4. ジョブの機能を説明する名前を入力します。
5. アクションドロップダウンから、チャットポップアップボックスHtmlを選択します。
6. ポップアップボックス名、カスタムデザイン、カスタムJSを入力します。
7. 位置セクションで、ページ上の場所を位置のドロップダウンから選択します。オフセットXおよびオフセットYテキストボックスにピクセル数を入力して、ポップアップの場所をさらに変更できます。
8. 保存をクリックします。

ポップアップを使用したウェルカムメッセージのジョブの作成

このジョブの機能は他のジョブとは若干異なります。このジョブでは、ポップアップではなく、チャットウィンドウも開いて、ウェルカムメッセージが表示されます。

1. アプリセレクターをクリックして、次を選択します：ACD.

2. デジタル > 自動化ジョブに移動します。

3. 追加をクリックします。
4. ジョブの機能を説明する名前を入力します。
5. アクションドロップダウンから、チャットウェルカムメッセージを選択します。
6. ウェルカムメッセージ名と本文テキストを入力します。カスタムフィールドを最大3つまで選択します。
7. 保存をクリックします。

ワークフロー自動化トリガーを作成

1. アプリセレクターをクリックして、次を選択します：ACD.

2. デジタル > 自動化トリガーに移動します。

3. トリガーの追加をクリックします。
4. トリガーの名前を入力します。
5. イベントとしてAPIによってトリガーを選択します。
6. データタイプドロップダウンリストから、チャットウィンドウを選択します。
7. 遅延実行フィールドに、選択したイベントが発生してからトリガーを起動するまでデジタルエンゲージメントが待機する秒数を入力します。すぐに実行する場合は、0を入力します。
8. トリガーを整理するフォルダーがある場合、ドロップダウンからこのトリガーをどのフォルダーに配置するのかを選択できます。
9. 保存をクリックします。

条件を追加

1. 詳細ページから、条件を追加をクリックします。
2. ドロップダウンを使用して、希望のジョブを選択します。作成したばかりのもので利用可能な条件のリストは、以下のテーブルを参照してください。
3. 選択をクリックします
4. 条件によっては追加設定が必要です。下のテーブルを参照しながら、操作してください。

ジョブを追加する

1. このトリガーの詳細ページから、既存のジョブを追加をクリックします。
2. ドロップダウンを使用してジョブを選択します。ドロップダウンには、ジョブの アクション ではなく、ジョブにつけた名前 が表示されます。
3. 追加をクリックします。
4. アクティブ化をクリックします。

トリガーが条件とジョブで完全に構成されたら、アクティブ化をクリックします。カスタムHTMLタグへのスクリプトの追加を含め、タグマネージャーが完全に構成されていることを確認してください。