この統合により、ウェブサイトに埋め込むことができるエージェント用のカスタマイズ可能なチャット ダイアログが提供されます。
設定
この統合では、認証済みまたは未認証のエンドユーザー エージェント クエリアクセスを許可できます。
未認証の設定
Dialogflow Messenger エージェントへの未認証アクセスを設定するには:
- Dialogflow CX コンソールに移動
- ご自身の Google Cloud プロジェクトを選択します。
- エージェントを選択します。
- [Manage] タブを選択します。
- 左側のサイドバー メニューで [Integrations] をクリックします。
- Dialogflow Messenger で [接続] をクリックします。
- 構成ダイアログが開きます。
- このエージェントに対して以前に統合が設定されている場合、埋め込み可能な HTML コードが表示されます。認証と非認証のどちらを行うかに関係なく、ダイアログの下部にある [無効にする...] ボタンをクリックして、設定を次の手順で再構成します。
- 環境を選択します。
- [未認証の API] を選択します。
- スタイルを選択します。
- 必要に応じて、ドメイン アクセスを制限します。
- [未認証の API を有効化する] をクリックします。
- ダイアログに、ウェブサイトに埋め込むことができる埋め込み可能な HTML コードが表示されます。そのコードをコピーします。
- [完了] をクリックします。
認証済みの設定
Dialogflow Messenger エージェントへの認証済みアクセスを設定するには:
- Dialogflow CX コンソールに移動
- ご自身の Google Cloud プロジェクトを選択します。
- エージェントを選択します。
- [Manage] タブを選択します。
- 左側のサイドバー メニューで [Integrations] をクリックします。
- Dialogflow Messenger で [接続] をクリックします。
- 構成ダイアログが開きます。
- このエージェントに対して以前に統合が設定されている場合、埋め込み可能な HTML コードが表示されます。認証と非認証のどちらを行うかに関係なく、ダイアログの下部にある [無効にする...] ボタンをクリックして、設定を次の手順で再構成します。
- 環境を選択します。
- [Authorized API] を選択します。
- スタイルを選択します。
- 必要に応じて、ドメイン アクセスを制限します。
- [認証済み API を有効にする] をクリックします。
- ダイアログに、ウェブサイトに埋め込むことができる埋め込み可能な HTML コードが表示されます。そのコードをコピーします。
- [完了] をクリックします。
- OAuth クライアントを設定します。
- 組織のOAuth 同意画面を作成します。
必要なスコープとして
./auth/cloud-platformを追加します。 - OAuth クライアント ID を作成します。[承認済みの JavaScript オリジン] で、エージェントのホストとクエリを許可する HTTP オリジンを指定します。
例:
https://your-company.com - エージェントに対してクエリを実行する権限をエンドユーザーに付与します。 各エンドユーザーまたはグループを Dialogflow API Client のロールを持つプリンシパルとして追加します。
- 組織のOAuth 同意画面を作成します。
必要なスコープとして
Embed
上記でコピーした埋め込みコードをウェブサイトのウェブページに貼り付けます。<script> と <df-messenger> HTML 要素をページの <body> 要素に含める必要があります。
認証済みの統合を使用している場合は、<df-messenger> の oauth-client-id 属性を OAuth クライアント ID に設定します。
更新が必要なその他の属性を更新します。
レスポンシブ レイアウトにするには、以下のものも <head> 要素に追加します。
<meta name="viewport" content="width=device-width, initial-scale=1">
カスタマイズ
適用することでチャット ダイアログの外観と動作に影響を与えられる HTML のカスタマイズと CSS のカスタマイズが数多くあります。
JavaScript
チャット ダイアログを操作するために使用できる JavaScript イベントと JavaScript 関数は多数あります。
例
次の例は、HTML のカスタマイズ、CSS のカスタマイズ、JavaScript イベント処理を示しています。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<title>My chat</title>
<style>
df-messenger {
/*
* Customize as required. df-messenger will fill the
* space that is provided.
*/
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 320px;
}
</style>
<script src="https://www.gstatic.com/dialogflow-console/fast/df-messenger/prod/v1/df-messenger.js"></script>
</head>
<body>
<df-messenger
location="global" <!-- TODO: update agent location as needed -->
project-id="my-project-id" <!-- TODO: update project ID -->
agent-id="my-agent-id" <!-- TODO: update agent ID -->
language-code="en" <!-- TODO: update agent language as needed -->
>
<df-messenger-chat
chat-title="Agent Name" <!-- TODO: update dialog title as needed -->
></df-messenger-chat>
</df-messenger>
<script>
// An example of handling events: Navigate to the first suggested URL.
document.addEventListener('df-url-suggested', (event) => {
if (Array.isArray(event.detail.suggestedUrls) &&
event.detail.suggestedUrls.length) {
window.location.href = event.detail.suggestedUrls[0];
}
});
</script>
</body>
</html>
Amanda Blanchard 氏
エージェント レスポンスに使用できるフルフィルメント レスポンス タイプは多数あります。
回答に対するフィードバック
[回答に対するフィードバック] が有効になっている場合、チャット ダイアログはデフォルトで高評価 ボタンと低評価 ボタンをユーザー インターフェースに追加します。会話中にエンドユーザーは、これらのボタンをクリックしてエージェントのレスポンスに関するフィードバックを提供できます。 ユーザーが低評価を選択した場合は、否定的なフィードバックの理由を必要に応じて提供できます。
カスタム フィードバック コンポーネント
カスタム フィードバック要素を指定するには、ウェブサイトで新しいカスタム要素を定義する必要があります。フィードバックを送信するには、要素が df-custom-submit-feedback-clicked イベントを出力する必要があります。含まれる detail フィールドは文字列である必要があります。
class CustomFeedbackElement extends HTMLElement {
constructor() {
super();
// It is not strictly required but recommended to contain the custom
// element in a shadow root.
this.renderRoot = this.attachShadow({mode: 'open'});
}
// Web component Lifecycle method.
connectedCallback() {
const wrapper = document.createElement('div');
// Build the component as required.
const button = document.createElement('button');
button.innerText = 'Submit';
button.addEventListener('click', () => {
this._onSubmitClick();
});
wrapper.appendChild(button);
this.renderRoot.appendChild(wrapper);
}
// Called when Submit button is clicked.
_onSubmitClick() {
const event = new CustomEvent("df-custom-submit-feedback-clicked", {
// `detail` may be any string,
// this will be sent to the backend to be stored.
detail: JSON.stringify({
"usefulness": 2,
"accuracy": 3,
}),
// Required to propagate up the DOM tree
// https://developer.mozilla.org/en-US/docs/Web/API/Event/bubbles
bubbles: true,
// Required to propagate across ShadowDOM
// https://developer.mozilla.org/en-US/docs/Web/API/Event/composed
composed: true,
});
this.dispatchEvent(event);
}
}
(function() {
// Registers the element. This name must be "df-external-custom-feedback".
customElements.define('df-external-custom-feedback', CustomFeedbackElement);
})();
デバッグ
Dialogflow Messenger を使用してエージェントをローカルでテストするには:
- 上記のように、Dialogflow Messenger の要素をページに埋め込みます。
- そのページのローカル HTTP サーバーを特定のポートで起動します。
http://localhost:port_numberでそのページにアクセスします。