LoginSignup
0

More than 1 year has passed since last update.

Dialogflowで独自に販売のチャットボットを作成する -(第五部)Webサイトに統合する

Last updated at Posted at 2021-07-28

Webサイトに統合する

第四部はこちら  第六部はこちら

前の部分では、独自のチャットボットを作成する方法をガイドして、子供の粉ミルクについてアドバイスというチャットボットを一緒に作成しましたね。そして、この部分ではWebサイトにチャットボットを簡単に統合する方法を紹介します。

まず、右側のメニューで「Intergrations」項目を選択し、「Text based」というセクションでDialogflow Messengerをアクティブにします。次に、チャットボットを表示したいWebサイトに以下のように生成されたコードを埋め込みます。

<script src="https://www.gstatic.com/dialogflow-console/fast/messenger/bootstrap.js?v=1"></script>
<df-messenger
  chat-icon="https://cdn.onlinewebfonts.com/svg/img_382824.png"
  chat-title="BabyShop"
  agent-id="54da5741-13a0-402e-b25a-c2408e79afa3"
  language-code="en"
></df-messenger>

デフォルトでは、チャットボット名はDialogflowで作成されたエージェントの名前ですが、「chat-title」というアトリビュート通りチャットボット名を変更できます。「chat-icon」というアトリビュート通りデフォルトのDialogflowアイコンも変更できます。

その他、事前定義されたCSS変数でチャットフレーム、メッセージなどの色を変更できます。以下のリンクはチャットボットの変更オプションの参考になります。https://cloud.google.com/dialogflow/es/docs/integrations/dialogflow-messenger

これで、Webサイトに統合するための完全に無料のチャットボットがあります。 無料ですが、非常に有益です。さらに、需要に応えるチャットボットを作成するのはそれほど複雑ではありませんね。😉

カスタマーケアのアドバイス用チャットボットのみなら、これで十分です。然し、プログラミングスキルがあり、以下のイメージの通り製品を売れるようにするチャットボットをアップグレードしたい場合、ユーザーの情報(名前、電話番号、住所など)を収集して注文を自動的に対応するプログラムの方法をを次の部分に引き続き研究しましょう!

第四部はこちら    第六部はこちら

(株式会社INTS 開発部 リン・ジャン)

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
0