統合を使用すると、エンドユーザー インタラクションが自動的に処理されます。エージェントを構築して、必要に応じて Webhook を実装し、統合を構成するだけです。
このガイドでは、Dialogflow CX Messenger 統合を使用して、エージェント用にシンプルなテキスト チャット ユーザー インターフェースを提供する方法を説明します。
始める前に
統合を使用しない場合は、このクイックスタートをスキップできます。
このガイドを読む前に、次の手順を行ってください。
- フローの基本をご覧ください。
- 手順に沿って設定してください。
- フローを使用してエージェントを作成するクイックスタート ガイドの手順で操作します。同じエージェントで次の手順を続行します。現在そのエージェントがない場合は、エージェントをダウンロードして復元できます。
設定
Dialogflow CX Messenger エージェントへの未認証アクセスを設定するには:
- Dialogflow CX コンソールに移動
- ご自身の Google Cloud プロジェクトを選択します。
- エージェントを選択します。
- [Manage] タブを選択します。
- 左側のサイドバー メニューで [Integrations] をクリックします。
- Dialogflow CX Messenger で [接続] をクリックします。
- 構成ダイアログが開きます。
- このエージェントに対して以前に統合が設定されている場合、埋め込み可能な HTML コードが表示されます。認証と非認証のどちらを行うかに関係なく、ダイアログの下部にある [無効にする...] ボタンをクリックして、設定を次の手順で再構成します。
- 環境を選択します。
- [未認証の API] を選択します。
- スタイルを選択します。
- 必要に応じて、ドメイン アクセスを制限します。
- [未認証の API を有効化する] をクリックします。
- ダイアログに、ウェブサイトに埋め込むことができる埋め込み可能な HTML コードが表示されます。そのコードをコピーします。
- [完了] をクリックします。
埋め込み
上記でコピーした埋め込みコードをウェブサイトのウェブページに貼り付けます。<script> と <df-messenger> HTML 要素をページの <body> 要素に含める必要があります。
認証済みの統合を使用している場合は、<df-messenger> の oauth-client-id 属性を OAuth クライアント ID に設定します。
更新が必要なその他の属性を更新します。
レスポンシブ レイアウトにするには、以下のものも <head> 要素に追加します。
<meta name="viewport" content="width=device-width, initial-scale=1">
埋め込んだら、右下のチャット アイコンをクリックすると、ウェブページを介してエージェントを操作できます。
カスタマイズ
このユーザー インターフェースの外観と動作は、さまざまな方法でカスタマイズできます。 詳細については、Dialogflow CX Messenger のドキュメントをご覧ください。