統合による操作

統合を使用すると、エンドユーザー インタラクションが自動的に処理されます。エージェントを構築して、必要に応じて Webhook を実装し、統合を構成するだけです。

このガイドでは、Dialogflow CX Messenger 統合を使用して、エージェント用にシンプルなテキスト チャット ユーザー インターフェースを提供する方法を説明します。

始める前に

統合を使用しない場合は、このクイックスタートをスキップできます。

このガイドを読む前に、次の手順を行ってください。

  1. フローの基本をご覧ください。
  2. 手順に沿って設定してください。
  3. フローを使用してエージェントを作成するクイックスタート ガイドの手順で操作します。同じエージェントで次の手順を続行します。現在そのエージェントがない場合は、エージェントをダウンロードして復元できます。

設定

Dialogflow CX Messenger エージェントへの未認証アクセスを設定するには:

  1. Dialogflow CX コンソールに移動
  2. ご自身の Google Cloud プロジェクトを選択します。
  3. エージェントを選択します。
  4. [Manage] タブを選択します。
  5. 左側のサイドバー メニューで [Integrations] をクリックします。
  6. Dialogflow CX Messenger で [接続] をクリックします。
  7. 構成ダイアログが開きます。
  8. このエージェントに対して以前に統合が設定されている場合、埋め込み可能な HTML コードが表示されます。認証と非認証のどちらを行うかに関係なく、ダイアログの下部にある [無効にする...] ボタンをクリックして、設定を次の手順で再構成します。
  9. 環境を選択します。
  10. [未認証の API] を選択します。
  11. スタイルを選択します。
  12. 必要に応じて、ドメイン アクセスを制限します。
  13. [未認証の API を有効化する] をクリックします。
  14. ダイアログに、ウェブサイトに埋め込むことができる埋め込み可能な HTML コードが表示されます。そのコードをコピーします。
  15. [完了] をクリックします。

埋め込み

上記でコピーした埋め込みコードをウェブサイトのウェブページに貼り付けます。<script> と <df-messenger> HTML 要素をページの <body> 要素に含める必要があります。

認証済みの統合を使用している場合は、<df-messenger> の oauth-client-id 属性を OAuth クライアント ID に設定します。

更新が必要なその他の属性を更新します。

レスポンシブ レイアウトにするには、以下のものも <head> 要素に追加します。

<meta name="viewport" content="width=device-width, initial-scale=1">

埋め込んだら、右下のチャット アイコンをクリックすると、ウェブページを介してエージェントを操作できます。

Messenger インターフェースのスクリーンショット

カスタマイズ

このユーザー インターフェースの外観と動作は、さまざまな方法でカスタマイズできます。 詳細については、Dialogflow CX Messenger のドキュメントをご覧ください。

前へ
Webhook を作成する
次へ
API によるインタラクション