AIエージェント(Advanced)チャットウィジェットをわずか数分でWebサイトに導入し、実行することができます。すぐに最高のカスタマーサポートを提供できます。ウィジェットは、ブランド独自のルックアンドフィールに合わせて高度にカスタマイズ可能で、最適なパフォーマンスを提供するように設計されています。コンパクトなサイズのため、すぐにページを読み込むことができます。
この記事には、以下の用語が頻出します。
- ウィジェットを埋め込む
- ウィジェットを読み込む
- Metadataを取得する
- 会話履歴
- インターナショナリゼーションとローカライゼーション
- UltimateGPTメッセージの設定
- 通知
- 方法
- フォーム
- ローカライゼーション
- データプライバシー
- FAQ
サポート対象のプラットフォーム:
- デスクトップ
- モバイル(Web)
サポート対象のコンテンツタイプ:
- テキストメッセージ(HTML形式を含む)
- UltimateGPTメッセージ
- ボタン
- カードとカルーセル
- リンク
- 画像とGIFのサポート
エスカレーション
- メールのエスカレーション
- チケットの作成(シンプルなAPIインテグレーションが必要)
ウィジェットを埋め込む
ウィジェットを追加するには、スクリプトをWebサイトに埋め込むか、タグマネージャーから埋め込みます。
ボットIDは、必ず固有のAIエージェント識別子とスワップアウトしてください。ボットIDは、https://dashboard.ultimate.ai/bot/{botID}/または https://dashboard.ultimate.ai/ultimategpt/{botID}で確認できます。
スクリプトを埋め込む - HTMLファイル
ボディタグ:</body>
を閉じる前に、スクリプトを挿入する必要があります。
<script type="module"> import UltimateChat from 'https://widget.ultimate.ai/sdk/index.mjs'; const chat = UltimateChat.Initialize({ botId: 'YOUR_BOT_ID_HERE', theme: {
'actions-hover': '#4A48B0',
'actions': '#5D5ADC',
'header-text': '#ECECF9',
'chat-button': '#15142d',
'chat-border-radius': 12px,
'header': '#000'
}, navbar: { avatarUrl: 'https://www.ultimate.ai/hubfs/raw_assets/public/ultimate/favicon/apple-touch-icon-152x152.png', title: 'Ultimate.ai', subtitle: 'Our bot will reply instantly', longSubtitle: 'I\'m an AI agent and here to answer your questions.' }, recoverConversation: true, metadata: [ { key: 'name', value: 'John Doe' }, { key: 'email', value: 'john@ultimate.ai', sanitize: true } ] }); </script>
スクリプトを埋め込む - タグマネージャー(GTMまたは同様のサービス)
<script> function _onUltimateChatLoad() { var chat = UltimateChat.Initialize({ botId: 'YOUR_BOT_ID', theme: {
'actions-hover': '#4A48B0',
'actions': '#5D5ADC',
'header-text': '#ECECF9',
'chat-button': '#15142d',
'chat-border-radius': 12px,
'header': '#000'
}, navbar: { avatarUrl: 'https://www.ultimate.ai/hubfs/raw_assets/public/ultimate/favicon/apple-touch-icon-152x152.png', title: 'Ultimate.ai', subtitle: 'Our bot will reply instantly', longSubtitle: "I'm an AI agent and here to answer your questions." }, recoverConversation: true, metadata: [ { key: 'name', value: 'John Doe' }, { key: 'email', value: 'john@ultimate.ai', sanitize: true } ] }); } </script> <script> (function () { var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = 'https://widget.ultimate.ai/sdk/index.iife.js'; s.onload = _onUltimateChatLoad; var x = document.getElementsByTagName('script')[0]; x.parentNode.insertBefore(s, x); })(); </script>
スタイルのカスタマイズ
ウィジェットスクリプトには、ウィジェットのテーマに合わせたさまざまな色のオプションがあります。
theme: {
'actions-hover': '#4A48B0',
'actions': '#5D5ADC',
'header-text': '#ECECF9',
'chat-button': '#15142d',
'chat-border-radius': 12px,
'header': '#000'
},
アセットの仕様:
アバター - 172x172ピクセル
ウィジェットを読み込む
読み込み時に開く
この設定オプションで、読み込み時のウィジェットの動作を制御できます。true
に設定すると、読み込みが完了するとすぐにウィジェットが自動的に開きます。デフォルトでは、このオプションはfalse
に設定されているため、ユーザーが手動で開くまでチャットウィジェットを閉じています。
ウィジェットを開くには、プログラムで開くか(メソッド - ウィジェットを開くを参照)、openOnLoad
設定オプションを使用します。デフォルトでは、このオプションはfalse
に設定されています。
ウィジェット表示/非表示ボタン
この設定オプションで、ウィジェットの「ウェルカムボタン」の表示を制御できます。true
に設定すると、最初の読み込み時やウィジェットを閉じた後でも、ボタンは表示されません。
チャットの位置
この設定により、画面上のチャットウィジェットの表示位置を制御できます。Bottom-right
やBottom-left
に設定して、ブランドに最適な位置に配置できます。未定義の場合、デフォルトの位置Bottom-right
になります。
Metadataを取得する
Metadataは、AIエージェントに追加のコンテキストを提供するデータです。Metadataを使用して、カスタマー、カスタマーの行動、企業との以前のインタラクションに関する追加情報を提供することで、チャットを充実させることができます。
Metadataを活用することで、AIエージェントはカスタマーによりパーソナライズされた効率的なエクスペリエンスを提供し、顧客満足度とロイヤルティが向上することができます。さらに、Metadataは、サポートチームがサポートプロセスを長期的に分析して改善する上で役立ちます。
Webサイトでは、会話中に使用できるMetadataをいつでも設定および更新できます。
これを行うには、収集する値をウィジェットコードに追加します。
この機能を利用する場合、ウィジェットコードを適応させる方法についてお問い合わせください。
ユースケースの例:
カスタマー情報:Metadataは、名前、メールアドレス、電話番号、所在地、その他の詳細情報などカスタマーに関する情報を提供します。この情報は、AIエージェントが会話をパーソナライズし、より関連性の高いサポートを提供する上で役立ちます。
購入履歴:カスタマーが以前にその企業から製品を購入したことがある場合、Metadataは、購入製品、購入日、購入価格など購入履歴に関する情報を提供します。この情報は、AIエージェントがカスタマーのニーズを理解し、ターゲットを絞ったサポートを提供する上で役立ちます。
インタラクション履歴:Metadataは、以前のチャット、メール、電話など、カスタマーと企業との以前のインタラクションに関する情報も提供できます。この情報は、AIエージェントが現在の会話のコンテキストを理解し、よりシームレスなエクスペリエンスをカスタマーに提供する上で役立ちます。
デバイス情報:Metadataは、デバイスのタイプ、オペレーティングシステム、ブラウザなど、カスタマーがチャットに使用しているデバイスに関する情報を提供します。この情報は、AIエージェントが技術的な問題をトラブルシューティングし、よりターゲットを絞ったサポートを提供する上で役立ちます。
Metadata
AIエージェントが使用するコンテキストを追加する手順:
setMetadata(Array<{
key: string;
value: string;
sanitize: boolean;
}> metadata)
sanitize
がtrue
に設定されている場合、値は会話ログに記録されず、プレースホルダとともに表示されます。
例:
setTimeout(() => { chat.setMetadata([ { key: 'orderName', value: 'Jane Doe' }, { key: 'orderEmail', value: 'jane@ultimate.ai', sanitize: true } ]); }, 2000);
自動Metadata収集
Ultimateチャットウィジェットは、ユーザーのデバイスに関連するMetadataを自動的に収集できます。
設定方法
この機能はデフォルトでアクティブです。
非アクティブにするには、autoMetadataCollection
をfalse
に設定します。
収集されたMetadataの詳細
この機能はデバイスの設定に基づいて動作し、CookieとユーザーIPを正しく機能させる必要はありません。
Metadata | 説明 |
言語{{systemLanguage}}
|
ユーザーのデバイスのデフォルトの言語 例: 言語コードの全リストは、こちらで確認できます。 (標準のBCP 47を使用) |
タイムゾーン{{systemTimezone}}
|
現在、ユーザーがいるタイムゾーン/地域 例: タイムゾーンの全リストについては、こちらのゾーンID列を参照してください。 |
デバイスのタイプ{{deviceName}}
|
ユーザーが使用しているデバイスのタイプ検出可能なデバイスを以下に示します。 モバイルデバイス: デスクトップデバイス: |
開始URL
|
ユーザーがウィジェットを開いたページのURL 例: |
ブラウザ名{{browserName}}
|
ユーザーのブラウザの名前 例: |
ブラウザ/バージョン{{browserVersion}}
|
ユーザーのブラウザのバージョン 例: |
会話履歴
ウィジェットとのすべての会話は、会話ログに直接保存されます。
シームレスな会話のために、チャット履歴を有効にすることをお勧めします。これにより、ユーザーはページを再読み込みしたり、ブラウザタブを再度開いた後でも、中断したところから再開できます。
そのために、ブラウザのローカルストレージを使用して会話IDを保存します。これにより、必要に応じていつでも会話データを取得することができます。
アクティベーション
以前の会話を取得するには、recoverConversation
パラメータをtrue
に変更します。
非アクティブ化
会話履歴を非アクティブにすると(recoverConversation
パラメータをfalse
に変更)、lastReadMessageId_{botId}
とplatformConversationId_{botId}
はユーザーのブラウザのローカルストレージ(LS)から削除されます。ローカルストレージの使用方法の詳細については、こちらを参照してください。
recoverConversation
was previously namedisConversationPersistanceEnabled
UltimateGPTメッセージの設定
AI回答ラベル
今後は、AIが生成したすべての回答の上にラベルが表示されます。つまり、ユーザーはAIが生成したコンテンツとその他のメッセージ入力を簡単に区別できます。これは、ユーザーエクスペリエンスをより明確にし、情報に基づくものにするためのステップであり、ユーザーが扱うコンテンツの性質を常に把握することができます。
設定:
情報アイコンmessageGeneratedAdditionalInfo
の表示/非表示(デフォルトfalse
)
メッセージのソース
AIが生成したすべてのレスポンスに情報のソースが表示され、レスポンスのソースを追跡できます。これにより、信頼性が高まるだけでなく、ユーザーがすぐに信頼できる参照を使用してトピックをさらに詳しく調べることができます。
設定:
パラメータshowLlmSources
を使用したAIソースの表示/非表(デフォルトtrue
)
通知
ビジュアル通知
通知音
- エージェントのエスカレーション:エージェントがエスカレーションリクエストに参加したとき
- バックグラウンドタブアラート:ユーザーがブラウザの別のタブを表示している状態でメッセージが届いたとき
- ウィジェット最小化アラート:ウィジェットが最小化されているときに新しいメッセージが届いたとき
通知音の有効/無効 クライアントは、ウィジェットスクリプト内の
allowSoundNotifications
オプションを使用して、通知音のデフォルト状態を設定できます。- 通知音をデフォルトで有効にするには、
allowSoundNotifications
をtrue
に設定します。 - 通知音をデフォルトで無効にするには、
allowSoundNotifications
をfalse
に設定します。
ウィジェットを開く/閉じる
以下の簡単なコマンドを使用して、Webサイトの任意の場所からウィジェットを簡単に制御できます。
-
ウィジェットを表示するには、
openWidget()
を使用します。 - ウィジェットを非表示にするには、
closeWidget()
を使用します。
ウィジェットを削除する
ユースケースの例:
ログインしているユーザーのみウィジェットへのアクセスを許可し、ユーザーがログアウトした後は必ずウィジェットを閉じてください。
実装:
メソッド呼び出しdestroy()
挙動:
-
DOM(ドキュメントオブジェクトモデル)から、チャットウィジェットIframeを削除します。
-
WebSocketの接続を解除します。
フォーム
フォームメッセージは構造化されたメッセージの一種で、テキスト入力と選択ドロップダウンを含むフォームを表示することで、会話中のユーザーデータを取得することができます。
AIエージェント(Advanced)でのフォームの使用
フォームは、AIエージェントに複数の質問をさせることなく、カスタマーデータを収集する優れた方法です。一般的なユースケースには、セキュリティ、本人確認のための質問、データ変更リクエストなどがあります。
フォームを作成するには、Settings / Ultimate Chat Widget / Forms
に移動し、ページの指示に従ってフォームを作成します。
次のようなフォームフィールドを作成できます。
- テキスト
- メールアドレス
- 選択
フォームを作成したら、フォームを追加する各ダイアログに移動し、以下の手順に従ってください。
手順:
- フォームをキャプチャして挿入する簡易コードを含む、AIエージェントのメッセージを追加します。以下の図では、lead_captureフォームを追加しています。ただし、以下のスニペットでは、「template:」と「))%」の間にフォーム名を追加します。
%((template: nameOfTemplate))%
-
AIエージェントのメッセージの直後に訪問者メッセージ(フリーテキスト形式)ブロックを追加します。これは、ユーザーのレスポンスを取得します。
- カスタマーがフォームを入力したことを知らせる何らかの通知(感謝など)を含む、別のAIエージェントメッセージブロックを、訪問者のメッセージの後に追加します。
-
ユーザーの回答はMetadataでロックされています。後でチャットで使用する場合は取得する必要がありますが、任意です。これはアクションで行います。
カスタマーのレスポンスのサニタイズ
レスポンスのサニタイズは、カスタマーにPIIデータを要求する場合に行います。レスポンスのサニタイズは、コンテンツエンティティでよくお分かりと思いますが、例えば、ZendeskではデフォルトでメールアドレスとIBAN番号をサニタイズしています。サニタイズの詳細については、以下の記事を参照してください。
レシピ:コンテンツエンティティを使用した個人を特定できる情報(PII)データのサニタイズ
フォームデータのサニタイズ方法
フォームのユースケースに応じて、情報をサニタイズします。サニタイズは簡単に実行できます。
- 「if...」と表示されている青色のバーをクリックして、詳細パネルを開きます。
- 「ユーザーの回答をサニタイズ」ボックスをクリックして、AIエージェント(Advanced)内の詳細を非表示にします。
AIエージェント(Advanced)内の会話は次のようになります。
ローカライゼーション
ウィジェットのロケールは、実行時に調整できます。ウィジェットコールメソッドのローカライゼーションを変更する手順:setLocale(<string>)
デフォルト値:en_US
その他のサポート対象の言語:nl_NL
ローカライゼーションのテスト
testパラメータを使用して、ウィジェットの言語を切り替えます。https://widget.ultimate.ai/demo/?botId={Your.Bot.ID}&locale={Your.Locale}
例:https://widget.ultimate.ai/demo/?botId=65da6df65ab8b465b87222586&locale=nl_NL
ユースケースの例:ウィジェットインターフェイスの言語をWebサイトの言語と同期します。Webサイトの言語が変更されたときにウィジェットの言語を更新するメソッドを呼び出します。
データプライバシー
Zendeskのウィジェットは、SOC2およびGDPRに準拠しています。
- Cookieは使用しません。
- ローカルストレージは、最高の会話エクスペリエンスを提供するために使用されます。
カスタムプライバシーポリシーURL
ウィジェットからアクセスできる独自のプライバシーポリシーを、ナビゲーションバーセクションに追加できます。
privacyPolicyUrl: URL
例:プライバシーポリシーのURL:https://www.ultimate.ai/security-privacy
ローカルストレージ
Zendeskのウィジェットは、ユーザーのデバイスにCookieを保存しませんが、ウィジェットの機能をサポートするためにユーザー側のストレージが必要です。以下に概要を示します。
パラメータ名 | 説明 |
platformConversationId_{botId} |
会話IDは、ページの再読み込み時に会話を復元するために保存されます(非アクティブにできます。このセクションを参照)。 |
lastReadMessageId_{botId} |
ユーザーが最後に読んだメッセージのIDを保存します。後で、通知カウンタの計算に使用されます。 |
FAQ
-
ウィジェットをテストするにはCRMに接続する必要がありますか?いいえ、CRMに接続する必要はありません。ウィジェットはサンドボックス(Webサイト)に実装することができます。実装できない場合は、環境を提供するよう当社に依頼してください。
テストAIエージェント機能を補完するために、ウィジェットをプラットフォームに追加する予定です。 -
リンクのクリックを追跡できますか?申し訳ございませんが、現時点では追跡できません。今後、この機能の追加を検討いたします。
-
DLBにHTML形式はありますか?申し訳ございませんが、現時点ではありません。HTML5エディタ(無料のオンラインコンテンツコンポーザー)など、オンラインエディタを使用してください。
-
複数の会話を行えますか?この機能は現在サポートされていません。
- UltimateチャットウィジェットはCookieを使用しますか?いいえ、当社のウィジェットはユーザーのデバイスにCookieを保存しません。クライアント側のストレージ要件の詳細については、上記を参照してください。