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

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

ただし、ウェブ開発に精通していて、Guideウィジェットの外観や動作をカスタマイズしたい場合は、JavaScriptコードへのAPIClosed アプリケーションプログラミングインターフェイス。 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を使用しないということでもあります。

実稼働環境にリリースする前に、Guideのカスタマイズをテスト環境でセットアップします。 これにより、Webサイトの訪問者への影響を最小限に抑えることができます。 また、カスタマイズが意図したとおりに機能することを確認するのにも役立ちます。

JavaScriptコールの追加

  1. アプリセレクターアプリセレクターのアイコンをクリックして、次を選択します:Guide
  2. Integrationsをクリックします。 あなたのテナントに特有のJavaScriptコードと共にページが表示されます。

  3. Copy code with Guide をクリックしてコードをコピーします。
  4. コピーしたコードスニペットをコードまたはテキスト編集プログラムに貼り付けます。
  5. 貼り付けたコードの終了する</script>タグのすぐ上に、使用するJavaScriptコールを追加します。 以下の画像例では、コメントは通話を追加する場所を示しています。

    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翻訳文字列を設定していることを前提としています。