JavaScriptを使用してGuideをカスタマイズする

Guideをウェブサイトで使用するには、エンゲージメントを提供したいWebサイトの各ページにGuideを埋め込むだけです。

ただし、ウェブ開発に精通していて、Guideウィジェットの外観や動作をカスタマイズしたい場合は、JavaScriptコードへのAPI アプリケーションプログラミングインターフェイス。 CXone Mpowerシステムを他のソフトウェアに接続することで、特定の機能を自動化できます。コールを使用して行うことができます。 次のようなタイプの変更であればが行えます：

• Guideウィジェットの外観と動作：Guideウィジェットの外観と動作をカスタマイズします。 これには、ウィジェットのサイズの変更、ボタンのサイズの変更、ウィジェットのフルスクリーンモードでの表示などが含まれる。

• Guide ウィジェット で提供される場合のチャット設定： ウィジェットで提供されるときのチャットの外観と動作 をカスタマイズします。 Guide これには、チャットウィンドウの情報の変更、チャットウィンドウの外観の変更、カスタムCSSの設定などが含まれます。

• レポーティング環境設定：Guideがエンゲージメントとコンバージョンを追跡する方法をカスタマイズします。 これらのAPIは、カスタムイベントの定義、訪問者の変数の保存、コンバージョンデータの保存、ウェブタグの割り当てや削除などに使用できます。

Guideの仕組みについての理解

Guideウィジェットは、CXone Mpowerローダーがウェブサイトに読み込むウェブモジュールです。 Webモジュールには、Svelteフレームワークを使用して構築されたJavaScriptアプリケーションが含まれます。 アプリケーションは、Guideの設定、アクティブテンプレート、アクティブチャットのステータス、UIステートなどを追跡する基本ステートストアを使用します。 これらのステートストアの値が、訪問者に表示される内容を駆動します。

WebサイトのページにGuideを埋め込み、訪問者がページを表示すると、Guideはテナント固有の設定をフェッチします。 このリクエストは、ルール、ボタン、エントリーポイント、翻訳、参照された記事、機能フラグに関するJSON結果を返します。 次いで、バンドルされたルールエンジンを使用して、テンプレートやプロアクティブオファーがページに表示されるかどうかのルールおよび条件を処理します。

ページの再読み込みの間に訪問者のデータを管理するために、Guideはローカルストレージとセッションストレージを使用します。 これにより、 Guide 、 クロス・ドメイン・サポート をサポートするブラウザ上で提供することができる。 それは、GuideがブラウザーのCookieを使用しないということでもあります。

JavaScriptコールの追加

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

2. Integrationsをクリックします。 あなたのテナントに特有のJavaScriptコードと共にページが表示されます。

3. Copy code with Guide をクリックしてコードをコピーします。
4. コピーしたコードスニペットをコードまたはテキスト編集プログラムに貼り付けます。

5. 貼り付けたコードの終了する</script>タグのすぐ上に、使用するJavaScriptコールを追加します。 以下の画像例では、コメントは通話を追加する場所を示しています。

   

   使用できるコールの詳細は、Guideウィジェット関連のAPI、チャット関連のAPI、およびレポート関連のAPIを参照してください。

6. 開始と終了<script>タグを含むスクリプト全体をコピーして、Webサイトのページのヘッダーに貼り付けます。

7. 変更されたページにアクセスし、Guideのカスタマイズが意図したとおりに機能することを確認します。

8. 全面的にテストされ、期待通りに動作したら、このGuideカスタマイズを持つはずの各ページのヘッダーにコピーします.

Guide用の使用言語の設定

ブラウザーの言語設定をオーバーライドし、Guideの訪問者に特定の言語でのコンテンツ表示を強制するには、埋め込みスクリプトを変更します。 スクリプトの最後にあるcxone('guide','init');コマンドにlocaleパラメーターを追加し、希望の言語を指定します。 たとえば、次のようにフランス語に設定することができます：

cxone('init','####'); 
cxone('guide','init', {locale: 'fr-fr'});

####を4桁のテナントIDに置き換えます。

プロアクティブオファーで書いたコンテンツは、それでも書かれた言語で表示されることに留意してください。 これは、フランス語用にGuide翻訳文字列を設定していることを前提としています。