Voiceflow Dialog Management APIを使ってずっとやろうとしてウェブサイトへのチャットボット埋め込みができましたので、ご紹介します。
目次
お約束
- デモ目的で作成したものであり、テストが十分でなかったり、バグがあったりする可能性があります。商用環境で利用する場合は十分なテストおよび必要な場合はご自身で修正をお願いします。
- コードはGitHubでMITライセンスの元、公開しています。ライセンスの範囲内で自由にご利用いただけます。フィードバックやPRもお待ちしております。
- 本プログラム及び手順に関する、質問への回答、サポート、修正、アップデートについては責任を負いかねます。
- 本プログラム及び手順を利用したことによりいかなる損害についても責任を負いかねます。
感謝
以下を使用させていただいています。ありがとうございます。
- chatux(https://github.com/riversun/chatux)
- チャットのフロントエンド部分で利用させていただきました。
- MITライセンス
- Copyright (c) 2017-2019 Tom Misawa Tom Misawa
- いらすとや(https://www.irasutoya.com/)
- チャットのアイコンで使用させていただきました。
- ご利用について | いらすとや
- Copyright © いらすとや. All Rights Reserved.
必要なもの
必要なものは以下です。
- Voiceflowで作成したプロジェクトとAPIキー
- チャットボットを設置したいWebサイト
- Herokuアカウント
順に説明します。
1. Voiceflowで作成したプロジェクトとAPIキー
Voiceflowでプロジェクトを作成しておいてください。プロジェクトタイプは「チャットアシスタント」タイプになります。
会話フローを作成します。期待通りの動きになっているかをテストしておいてください。対話モデルのトレーニングをしておくことをお忘れなく。
作成できたら、APIキーを取得しておきます。
2. チャットボットを設置したいWebサイト
もちろんチャットボットを設置したいWebサイトが必要ですね。ただし、いくつか条件があります。
- HTTPSが有効になっていること(HTTPでは動かない)
- カスタムなHTMLやJavaScriptの埋め込みが可能なこと
レンタルサーバを借りてコンテンツも自分で用意している場合や、自前でサーバを立てて運用してる場合など、ご自身でホストしているようなケースであれば1、2のどちらも問題ないと思います。SSL証明書はLet's Encryptなどを使えばよいでしょう。
問題は2です。
今回のチャットボットを設置するためには<SCRIPT>
タグを埋め込めるようにする必要がありますが、サービスとして提供されているウェブサイトやブログなどでは、これを許可していない・埋め込んでも無効化されるというものが多いようです。また、無料プランではできないが有料プランだとできる、というものもちらほらあるようです。これについてはお使いのサービスの仕様等を確認してください。
今回は、以下のレンタルサーバにWordPressを自分で設置して、これにチャットボットを設置したいと思います。ちなみにWordPressのインストールはレンタルサーバの管理画面からワンクリックで行えました。
3. Herokuアカウント
チャットボットとVoiceflow Dialog Management APIとのやり取りを中継するアプリをHerokuに立てるために必要です。デプロイはHeroku Buttonでほぼワンクリックで終わります。
手順
ではやっていきましょう。
まず最初にブログを見てみましょう。
WordPressで立てたブログです。ほぼデフォルトの状態です。必要なのはブログのドメインです。
このドメインはHerokuにデプロイするアプリのパラメータとして必要になります。
次にHerokuにアプリをデプロイしていきましょう。以下のレポジトリにアクセスしてみてください。
HerokuにデプロイするアプリのGitHubレポジトリです。READMEに「Deploy to Heroku」というボタンがあるのでこれをクリックします。
Herokuへのデプロイを開始するための画面が開きます(ログイン画面が出た場合には先にログインしてください)。いくつか設定項目があるので、順に設定していきます。
最初にアプリ名を設定します。適当なものをつけてください。アプリが公開されたときにこの名前がアプリ名.herokuapp.com
というドメインで公開されます。(このドメインが後で必要になります。)
「Config Vars」にいくつか設定を行います。
FRONTEND_URL
にブログのドメイン、VF_API_KEY
にVoiceflowプロジェクトのAPIキーを入力します。ドメインの最後のスラッシュは不要です。
MAX_AGE
はチャットのセッション保持時間で、最初にアクセスしてからこの設定時間の間はチャットの状態が保存されています。つまりVoiceflow側での永続的な変数などが保持されたままになるということです。デフォルトは3600秒=1時間にしていますので、必要ならば変更してください。
入力したら最後に「Deploy app」をクリックします。
APIサーバがデプロイされますので、しばらく待ちます。
以下のように「Successfully deployed」と表示されればOKです。「Manage App」をクリックするとアプリの管理画面が表示され、「View」をクリックするとアプリにブラウザでアクセスします。アプリのドメインを確認するために「View」をクリックしてみましょう。
エラーになっていますが、気にしなくてOKです。少なくともエラー画面が返ってきているということはアプリは動いているということですね。で、ここで必要なのはこのアプリのドメインです。後ほどチャットボットの設定で必要になるので控えておいてください。
ではブログにチャットボットを設置していきましょう。今回はWordPressを使っているので、WordPressの管理画面を開いてそこでHTML/JavaScritptの埋め込みを行います。
まず管理画面を開きます。
WordPressでカスタムなHTML/JavaScriptの埋め込みを行う方法は色々あると思いますが、今回はヘッダーやフッターにHTMLをかんたんに埋め込めるプラグイン「Insert Headers and Footers by WPBeginner」を使いましょう。
左のメニューから「Plugins」→「Add New」をクリックします。
insert header footer
とかで検索してみてください。
出てきましたね。では「Install Now」をクリックします。
インストールが無事終わったら、以下のような画面になります。「Active」をクリックして有効化します。これでプラグインのインストールは完了です
ではプラグインを利用して、HTML/JavaScriptを埋め込みます。左のメニューから「Settings」をクリックするとさきほどの「Insert Headers and Footers」プラグインの設定が見えますのでこれをクリックします。
「Insert Headers and Footers」プラグインの設定画面が表示されました。ここの入力欄にHTML/JavaScriptを埋め込めば反映されます。ヘッダー・ボディ・フッターのどれでも設定ができますが、今回はフッターに設定しましょう。
下にスクロールしてフッターの入力欄に以下をコピペします。
<script src="https://chatux-kun432.netlify.app/chatux.min.js"></script> <script> const chatux = new ChatUx(); const initParam = { renderMode: 'auto', api: { endpoint: 'https://www.example.com/chat', method: 'POST', dataType: 'json' }, bot: { botPhoto: 'https://vf-web-chatbot-demo.netlify.app/img/robot.png', humanPhoto: 'https://vf-web-chatbot-demo.netlify.app/img/human.png', widget: { sendLabel: '送信', placeHolder: 'なにか入力してみてください' } }, method: { credentials: 'include' }, window: { title: 'チャットボットのデモ', infoUrl: 'https://github.com/kun432/voiceflow-dialog-management-api-sample-webchat' } }; chatux.init(initParam); chatux.start(true); </script>
こんな感じですね。
で、1箇所だけ変更します。上記のendpoint: 〜
となっている部分のURLをHerokuで取得したドメインに変更します。最後の/chat
はそのままにしておいてください。今回の例だとこんな感じ。修正したら「Save」をクリックします。
これで完了です。
ブログの画面を開いてリロードすると、チャット用のウインドウが表示されると思います。
なにか入力してみて、Voiceflowで作成した会話フロー通りのやりとりができれば完了です!
まとめ
設置方法について説明しました。バックエンドはHeroku Buttonを使ってワンクリックで、設置するWebサイト側はHTML/JavaScriptを埋め込むだけにしたので、かなりかんたんに設置できるように工夫してみました。また、今回はWordPressを使いましたが、条件を満たすものであれば(やり方は変わると思いますが)基本的には動くのではないかと思います。
次回はもう少し裏側の話をまとめたいと思います。