反応JSは、ユーザーインターフェイスを作成するための人気のWebフレームワークです.Facebookが所有するフレームワークは、開発者の間で非常に人気が高まっている.理由は-偉大なドキュメント、開発者の友好性、それは角度などの同様のフレームワークのほとんどよりも速いです.
このポストでは、我々は反応のJSのウェブサイトにダイアログをボットの統合の手順を介して行く予定です.

必要条件

開始するには、ダイアログフローボットや対話の知識を必要とするダイアログや反応JS.Charbotsを反応JSと統合するために、あなたはAを必要としますKommunicate アカウント.すべての上記のツールを試して無料です.さらに、ノードをシステムにインストールする必要があります.

ステップは、反応JSウェブサイトでダイアログフローボットを加える

私はどのように私はダイアログを接続し、Kommunicateの助けを借りてJSの反応を説明するつもりです.

注：それは非常にシンプルかつストレートこのチュートリアルでは、本当に基本的でプレーンなコード開発を説明してください。また、言及するには、このプロジェクトはGithubで見つけることができます。

ステップ1：ダイアログを作成ボット

開始するには、簡単にダイアログでチャットボットを作成することができます.これは非常に直感的で強力なchatbot構築ツールです.ここでは、あなたのダイアログフローボットから始めるのを助けるために利用できるサンプルは、ここにあります.さらに移動するには、独自の意図＆エンティティを作成することができます.

ステップ2：統合されたダイアログをチャット

Kommunicateであなたのダイアログフローボットを統合するには、あなたのCommunicateダッシュボードにログインし、ボットのセクションに移動します.アカウントがない場合は、ここで作成できます.ダイアログボックスのセクションをクリックして統合ボットをクリックします.

さて、ダイアログボックスに移動し、サービスアカウントキーファイルをダウンロードします.以下にファイルを見つける手順を示します.

左側パネルのドロップダウンからエージェントを選択します.

設定ボタンをクリックします.エージェントの設定ページを開きます.

Googleプロジェクトの一般的なタブを検索し、サービスアカウントをクリックします.

あなたのサービスアカウントにリダイレクトされた後、アクションセクションからプロジェクトのJSON形式でキーを作成し、それが自動的にダウンロードされます.

キーファイルをアップロードします.

ボットのプロファイルセクションでは、あなたのボットの名前を与えることができます.この名前は、ボットと対話するたびにユーザーに表示されます.さらに処理し、詳細を入力します.
最後のステップでは、人間のハンドオフにChatbotを有効または無効にするように求められます.有効になっている場合、会話は、チャットボットが質問に答えることができない場合には、人間に渡されます.
セットアップを完了し、2つの場所で新しく作成されたボットをチェックし、テストすることができます
ダッシュボード→ボット統合→ 管理ボット:ここですべての統合ボットをチェックすることができます
ダッシュボード→ ボットの統合:あなたのダイアログフローのアイコンが正常に統合されているボットの数を緑にする必要があります.また、ここで新しく作成されたボットをテストするオプションがあります.(下記の画像を参照)

ステップ3：反応アプリを作成します

コマンドを使用して、新しい反応アプリを作成します.
NPXの作成反応アプリ私のアプリ

Step 4 :今、私のアプリケーションフォルダに移動

cd my-app

ステップ5：新しいファイルのチャットを作成します。srcフォルダ内

したら、チャットを作成します.JSは、コンポーネントのマウントに以下のコードを追加します.以下のコードは、統合された対話のボットとあなたのウェブサイト上のチャットウィジェットを起動します.あなたのCommunicateアプリケーションIDで置き換えることを確認します.
このコードはinstall section Kommunicateのも.

(function(d, m){
        var kommunicateSettings = {"appId":"<YOUR APP_ID>","popupWidget":true,"automaticChatOpenOnNavigation":true};
        var s = document.createElement("script"); s.type = "text/javascript"; s.async = true;
        s.src = "https://widget.kommunicate.io/v2/kommunicate.app";
        var h = document.getElementsByTagName("head")[0]; h.appendChild(s);
        window.kommunicate = m; m._globals = kommunicateSettings;
      })(document, window.kommunicate || {});

以下に私のコードエディタのスクリーンショットを示します.

ステップ6：インポートomomateThatコンポーネントのアプリで。js

インポートomomateThatコンポーネントをあなたのアプリケーションです.jsファイル.以下はコードエディタのスクリーンショットです.

ステップ7：ローカルアプリを起動します

インストールされたダイアログフローボットで新しく作成されたウェブサイトを起動するには、次のコマンドを使用します.

npm start

Voila!どのように簡単だった?これらのいくつかの簡単な手順では、反応JSのウェブサイトでダイアログをボットを統合することができます.これはチャットウィジェットがウェブサイトをどのように見ているかです.

ラッピング

それはあなたの反応JSのウェブサイトで対話的なテキストチャットダイアログを使用してチャットウィジェットを有効にすることはかなり簡単です.さらに、あなたのウェブサイトの色やテーマに一致するようにチャットウィジェットをカスタマイズすることができます.
Kommunicateでは、カスタマーサポートの新時代を担う世界的な顧客サポートソリューションを想像しています.私たちはあなたのボードにKommunicateの最初の手の経験を持っていることを愛する.あなたはサインアップできますhere そしてすぐにお客様を喜ばせる.
もともと投稿https://www.kommunicate.io/blog/integrate-dialogflow-bot-react-js/