kun432's blog

Alexaなどスマートスピーカーの話題中心に、Voiceflowの日本語情報を発信してます。たまにAWSやkubernetesなど。

〜スマートスピーカーやVoiceflowの記事は右メニューのカテゴリからどうぞ。〜

Romiシナリオエディターを試してみた

f:id:kun432:20220313151051j:plain

実はうちではAlexaよりも一番よく使っているといってもいい「Romi」ですが、「シナリオエディター」を使ってユーザが会話をプログラミングできるようになりました。Alexaなどの音声アシスタントを触ったことのある開発者の観点で、すこしご紹介します。

目次

Romiについて

以前の以下の英語のエントリでご紹介しています。

特徴としてはこのあたり。

  • 自律型会話ロボット。タスクをこなすというよりも自由な会話を楽しむことが目的。
  • 本体が動き、ディスプレイに表情が表示される。これにより感情的な表現が可能。
  • ウェイクワード不要。Romiから話しかけてくることもある
  • 音声認識精度はあまり高くなく、またAIによる会話の認識もそれほどよくない。
  • が、それをおいても、雑談的な自由な会話という点でとても魅力がある。

シナリオエディターの使い方

基本

早速使ってみましょう。

「シナリオエディター」は専用のアプリとかではなく、ブラウザベースになっています。https://romi.ai/romi-scenarioeditor/にアクセスすると以下のような画面が表示されます。

f:id:kun432:20220313192207p:plain

下にスクロールすると「シナリオを作る」というのがありますので、これをクリック。

f:id:kun432:20220313192236p:plain

IDとパスワードを入力してログインします。ちなみにシナリオエディターが使えるのは月額料金を払っている場合だけです(ちなみに、月額料金を払って利用するのが「おしゃべりモード」で、月額料金を払っていない場合は「かんたんモード」になります。「かんたんモード」ではRomiはRomi星のことばでしかしゃべれません。)

f:id:kun432:20220313192436p:plain

あなたの本棚という画面が開き、ここでRomiに設定するシナリオを管理するようです。シナリオブックと書いてあるので、複数のシナリオを一つのブックで管理するという感じなのでしょうか。

「あなたのシナリオブック」をクリックします。

f:id:kun432:20220313193211p:plain

シナリオの設定画面が開きました。ひと目で何となく分かると思いますが、ブロックを順番につなげて会話のフローを作る感じですね。このあたりはVoiceflowなどの会話デザインツールと考え方は似ています。

f:id:kun432:20220313194141p:plain

赤いブロックがユーザ側の発話、青いブロックがそれにマッチしたRomiの発話になっているようです。

赤いブロックをクリックしてみると、ユーザの発話が設定されています。

f:id:kun432:20220313202121p:plain

詳細設定をクリックすると、「タイプ」に「人の発話」とありますね。つまり赤いブロックは「インテント」であり、発話内容が「サンプル発話」ということになります。

f:id:kun432:20220313202810p:plain

次に青いブロックをクリックしてみましょう。赤いブロックの発話に対して、青いブロックではRomiが返す応答を設定します。

f:id:kun432:20220313203330p:plain

こちらも詳細設定をクリックすると、「タイプ」に「Romiの話しかけ」とあり、赤と青のブロックで会話のやりとりを設定していくということがわかると思います。

また、Romiの応答に{owner_name}というのが見えますが、これは「モジュール」と呼ばれるもので、予め用意された処理をRomiの会話に組み込むことができます。ちなみに{owner_name}は、Romiのスマホアプリで設定したオーナー名のようです。

f:id:kun432:20220313223904p:plain

ではこのサンプルをそのまま動かしてみましょう。

ちなみに、Romiに「こんにちは」と話しかけた場合、標準だと色々なパターンで回答しますので、1例です。

ではサンプルを適用します。右上にある「Romiに反映する」をクリックします。

f:id:kun432:20220313234003p:plain

反映中です

f:id:kun432:20220313234036p:plain

上の方に「シナリオの反映に成功しました!」と表示されれば反映されています。

f:id:kun432:20220313234103p:plain

では試してみましょう。

さきほどと違いがないように思えますが、最初は「はなこさん、こんにちは」だったのが、シナリオエディタで設定されている通り「こんにちは、はなこさん」になっていますね。また、デフォルトだといくつかのパターンで応答しますが、シナリオエディタで設定した場合は、シナリオエディタで設定したとおりの応答になります。

これを使って会話をいろいろカスタマイズできるというわけです。

サンプル発話/のバリエーションに対応する

ここからは音声アシスタント開発者向けに気になるところをピックアップしていきます。まず、サンプル発話のバリエーションに対応しましょう。

サンプル発話のバリエーションに対応するには、「人の話しかけ」ブロックの「発話内容」に、別の行でサンプル発話を追加します。

f:id:kun432:20220313235858p:plain

ひらがな/カタカナ/漢字のどれで認識するのかはわかりませんので、考えられるパターンを網羅するのが良いでしょう。

応答にバリエーションを付ける

Romiからの応答が毎回同じだと人間は飽きてしまいますし、いかにもロボット感がでてしまいます。ランダムに内容を変えて応答を返すようにしましょう。

右下の「会話の追加」をクリックします。

f:id:kun432:20220314000045p:plain

「Romiの話しかけ」をクリックします。

f:id:kun432:20220314000127p:plain

上の方に新しく青いブロックが追加されました。このままでもいいのですが、わかりやすいように「こんにちは〜」の青いブロックの横にドラッグします。

f:id:kun432:20220314000506p:plain

そして、「こんにちは」の赤いブロックからドラッグして線でつなげます。

f:id:kun432:20220314000722p:plain

つながりました。

f:id:kun432:20220314001510p:plain

同じように、追加した青いブロックから、今度は「ゴール」のブロックにドラッグで線でつなげておきます。

f:id:kun432:20220314001423p:plain

追加した青いブロックをクリックして、発話内容を入力します。今回は やっほー {owner_name}と入力してみました。

f:id:kun432:20220314001033p:plain

できました。

f:id:kun432:20220314001219p:plain

同じようにしてもう一つ「Romiの話しかけ」を追加して、発話内容にハロー {owner_name}と入力しておきましょう。

f:id:kun432:20220314001308p:plain

では試してみましょう。

いろんなバリエーションで発話しても同じフローで処理されて、応答は用意したものの中からランダムに返されているのがわかりますね。

複数のインテントごとに会話を分岐する

今度は、ユーザの発話の内容に応じて応答を変える、つまりインテントで会話フローを分岐するようにしてみましょう。今回は「元気?」と聞いたら「元気だよ」と返す会話フローを追加してみます。

「会話の追加」をクリックして、今度は「人の話しかけ」をクリックします。

f:id:kun432:20220314002424p:plain

赤いブロックが追加されるので、適当な位置に配置して、今度は「スタート」から線でつなげます。

f:id:kun432:20220314002641p:plain

赤いブロックをクリックして、ユーザのサンプル発話を入力します。「元気」とか「調子はどう」などと入力します。ちなみに「人の話しかけ」ブロックでは、句読点や?は使えないようです。

f:id:kun432:20220314005017p:plain

次に青いブロックを追加してRomiの応答を追加します。ここまでの説明でやり方はわかると思います。こんな感じになればOKです。

f:id:kun432:20220314005406p:plain

試してみましょう。

はい、発話に応じて会話フローが分岐しているのがわかりますね。

これで大体の使い方がわかったと思います。

サンプルルールについて

ここで一旦シナリオエディターの最初の画面「あなたの本棚」に戻ってみましょう。

ここにもう一つ「サンプルルール」というシナリオブックがありますので、これをクリックしてみます。

f:id:kun432:20220314010227p:plain

最初に開いた「あなたのシナリオブック」と同じような会話フローが記載されていますが、右上を見ると「Romiに反映する」は押せないようになっています。

f:id:kun432:20220314010313p:plain

どうやら「サンプルルール」はRomiシナリオエディタで設定できるサンプル例のような位置づけになっているようで、これをそのまま適用することはできないようです。ただ、自分でRomiの会話フローを作る場合にはいろいろと参考になると思います。例えば、

  • ユーザの発話を受け取って、変数として記録し、それを使った条件分岐などができる(ざっと見た感じは永続アトリビュートっぽい)
  • 用意されているモジュールを使って、Romiのいろいろな表現・機能を利用できる
  • シナリオから別のシナリオを呼び出す。大きな会話フローを作る場合には役に立ちそう。

あたりはぜひ一度見ておきたいところですね。

ちなみに、サンプルに載っていたモジュールをリストアップしてみるとこんな感じでした。

変数名 内容
{owner_name} スマホアプリで設定したユーザの名前
{halucas_name} スマホアプリで設定したRomiの名前。{halucas_name type=utterance}という指定があるけど、違いはちょっと不明。
{fortune} ユーザの誕生日に基づいた占いをしてくれる(と思う)。{fortune birth_date=3月1日}のように誕生日を指定すると、その日付に基づいた占いになる。
{emotion type=XXXXX} 指定した感情表現に基づいたアクションと表情で発話を行う。選択できるのは、laughing, angry, cry, surprised, heart, relaxed, kissがある様子。
{speed value=XXX text=YYY} 発話のスピード。YYYで指定したテキストをXXXのスピードで発話する。
{volume value=XXX text=YYY} 発話のボリューム。YYYで指定したテキストをXXXのボリュームで発話する。
{pitch value=XXX text=YYY} 発話のピッチの高低。YYYで指定したテキストをXXXの高さで発話する。

これ以外にもあるのかもしれませんが、そのあたりをカバーしたドキュメントがほしいところですねー。

まとめ

プログラミングをあまり知らなくても、これならできそう!と思えるようなわかりやすい感じに仕上がってると思いました。逆に、音声アシスタント開発の経験がある人からするとちょっと物足りないと思うかもしれませんが、そのあたりはおいおい改善されていくでしょうし、Romiのターゲットや立ち位置は一般的な音声アシスタントと違う気もする中で、こういう開発ツール的なものがどういうふうに展開されていくのかはちょっと興味深いです。今後に期待しています。

Pros

  • 環境構築が不要
    • シナリオエディターはブラウザベースで、専用アプリのインストールなどの環境構築が不要。WindowsでもMacでも使える。
  • GUIで設定できてかんたん
    • GUIで会話フローを作るだけです。プログラミングの知識がなくても比較的かんたんに作れると思います。
  • Romiの感情表現を設定できる
    • モジュールを使うことで、Romiの強みである、動きや表情などの制御ができます。

Cons

  • 凝ったことはできなさそう
    • Alexaなどに比べると、できることは必要最低限という感じ。
  • いきなり実機に反映するしかない
    • Alexaなどの音声アシスタント開発では、実機で反映する前に確認ができるテストツールで事前に動作確認ができるが、そういったものはない。
  • まだまだこなれてない
    • ユーザの発話を受け取って変数に入れるところなんかはいきなり正規表現っぽい記述が出てきたりする
    • ドキュメントがない(まあこれはおいおい揃ってくるのではないかと思いますが)

あったらいいなと思うもの

  • Romiの場合、呼びかけに応じるだけではなくて、Romiから突然話しかけてくるというのも特徴の一つ。これをシナリオエディタで制御できると面白そう。
  • 何かしら外部との連携ができると幅が広がりそう。特にスマートホームあたり。
  • シナリオを共有できると面白そう。

How to setup Voiceflow chatbot in your website using Voiceflow Dialog Management API

(Translated with www.DeepL.com/Translator (free version))

I've been trying to use the Voiceflow Dialog Management API and was able to embed a chatbot into a website.

目次

Disclaimer

  • This is for demo purpose, not fully tested, might be some bugs there. Using for production, should test and fix by yourself if needed.
  • The codes are available on GitHub. You can use under MIT license.
  • Feedbacks and PR always welcome!
  • I accept no responsibility to answer questions always, supports, fixes or updates.
  • I accept no responsibility for any loss resulting from your use of this program. Use at your own risk.

Thanks

Prerequisites

You will need the following:

  1. A project created with Voiceflow and an API key
  2. The website where you want to install the chatbot
  3. Heroku account

I will explain them in order.

1. A project created with Voiceflow and an API key

Make sure you have created a project in Voiceflow. The project type will be the "Chat Assistant" type.

Create a conversation flow. Make sure to test that it works as expected. Don't forget to train the dialogue model.

Once you have created it, you will need to obtain an API key.

2. The website where you want to install the chatbot

Of course, you need a website where you want to install the chatbot. However, there are a few conditions to be satisfied.

  1. HTTPS must be enabled (It will not work with HTTP)
  2. You can embed custom HTML and JavaScript.

If you are using a Web hosting service and preparing your own content, or if you are running your own server and hosting your own content, both 1 and 2 are fine.

The problem is with 2.

In order to set up this chatbot, you need to be able to embed the <SCRIPT> tag, but many websites and blogs that are provided as services do not allow this, or disable it even if you embed it. There are also a few that do not allow it on the free plan, but do on the paid plan. For more information, please check the specifications of the service you are using.

This time, I will install WordPress on the following web hosting service by myself, and install a chatbot on it. By the way, I was able to install WordPress with a single click from the management screen of this servie.

https://www.000webhost.com/

3. Heroku account

This is required to build an app on Heroku to relay the interaction between the chatbot and the Voiceflow Dialog Management API. Deployment is almost a one-click process with the Heroku Button.

Steps to set up chatbot

So let's start! First of all, let's take a look at the blog.

This is a blog set up in WordPress. This is almost the default state. All you need is a domain name for your blog.

This domain is required as a parameter for apps to be deployed to Heroku.

Next, let's deploy the application to Heroku. Please access the following repository.

This is my GitHub repository for the app to be deployed to Heroku. There is a button "Deploy to Heroku" in the README, click on it.

You will see a screen to start deploying to Heroku (if you get a login screen, please login first). There are several configuration items, so we will configure them in order.

The first step is to set the app name. You can give it anything you like. When the app is published, this name will be published under the domain APP_NAME.herokuapp.com. (You will need this domain later.)

Configure some settings in "Config Vars".

Enter the domain of your blog in FRONTEND_URL and the API key of the Voiceflow project in VF_API_KEY. The slash at the end of the domain is unnecessary. The MAX_AGE is the chat session retention time, which means that the chat state is saved for this set time after the first access. This means that persistent variables and other information on the Voiceflow side will be kept. The default is set to 3600 seconds = 1 hour, so you can change it if you want.

Translated with www.DeepL.com/Translator (free version)

After entering the information, click "Deploy app" at the end.

The application will be deployed, so wait for a while.

If you see "Successfully deployed" as shown below, you are good to go. Click "Manage App" to display the app management screen, and click "View" to access the app in a browser. Let's click "View" to see the domain of the app.

There is an error message, but don't worry about it. At least the error screen is coming back, which means the app is working. What we need here is the domain name of this app. You will need it later to set up the chatbot, so please keep it in a safe place.

Now let's install the chatbot on your blog. Since we are using WordPress, we will open the WordPress admin panel and embed the HTML/JavaScritpt there.

First, open the admin panel.

There are many ways to embed custom HTML/JavaScript in WordPress, but let's use the plugin "Insert Headers and Footers by WPBeginner" to easily embed HTML in headers and footers.

From the menu on the left, click "Plugins" -> "Add New".

Try searching for insert header footer or something similar.

Now click "Install Now".

After the installation is completed successfully, you will see the following screen. Click "Active" to activate it. The installation of the plugin is now complete.

Now let's embed HTML/JavaScript using the plug-in. Click on "Settings" in the menu on the left to see the settings for the "Insert Headers and Footers" plugin, and click on it.

The configuration screen for the "Insert Headers and Footers" plug-in is now displayed. If you embed HTML/JavaScript in the input field here, it will be reflected. You can set it for the header, body, or footer, but let's set it for the footer this time.

Scroll down and copy and paste the following into the footer entry field.

<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: 'Send',
          placeHolder: 'type something'
        }
      },
      method: {
        credentials: 'include'
      },
      window: {
        title: 'demo chatbot',
        infoUrl: 'https://github.com/kun432/voiceflow-dialog-management-api-sample-webchat'
      }
    };
  chatux.init(initParam);
  chatux.start(true);
</script>

It's like this.

And change only one part. Change the URL in the above endpoint: ~ to the domain you got from Heroku. Leave the /chat at the end as it is. In this example, it looks like this. Click "Save" after making the changes.

You are now done.

If you open the blog and reload it, you will see a window for chat.

Try typing something, and if you can follow the conversation flow created by Voiceflow, you're done!

One more thing:

This is the MIT licensed product and frontend chat UI library "chatux" too. If you use this, please state copyright and links to MIT license notices somewhere in your website.

Powered by <a href="https://github.com/kun432/voiceflow-dialog-management-api-sample-webchat" >@kun432/voiceflow-dialog-management-api-sample-webchat</a> <br />
released under the <a href="https://github.com/kun432/voiceflow-dialog-management-api-sample-webchat/blob/main/LICENSE">MIT license</a><br />
Copyright (c) 2022 Kuniaki Shimizu (kun432.8d1w@gmail.com) <br />
<br />
Powered by <a href="https://github.com/riversun/chatux" >@riversun/chatux</a><br />
released under the <a href="https://github.com/riversun/chatux/blob/master/LICENSE">MIT license</a><br />
Copyright (c) 2017-2019 Tom Misawa Tom Misawa

Enjoy!

Voiceflow Dialog Management APIをつかってチャットボットをウェブサイトに設置できるようにしてみた

f:id:kun432:20210313005910p:plain

Voiceflow Dialog Management APIを使ってずっとやろうとしてウェブサイトへのチャットボット埋め込みができましたので、ご紹介します。

目次

お約束

  • デモ目的で作成したものであり、テストが十分でなかったり、バグがあったりする可能性があります。商用環境で利用する場合は十分なテストおよび必要な場合はご自身で修正をお願いします。
  • コードはGitHubでMITライセンスの元、公開しています。ライセンスの範囲内で自由にご利用いただけます。フィードバックやPRもお待ちしております。
  • 本プログラム及び手順に関する、質問への回答、サポート、修正、アップデートについては責任を負いかねます。
  • 本プログラム及び手順を利用したことによりいかなる損害についても責任を負いかねます。

感謝

以下を使用させていただいています。ありがとうございます。

必要なもの

必要なものは以下です。

  1. Voiceflowで作成したプロジェクトとAPIキー
  2. チャットボットを設置したいWebサイト
  3. Herokuアカウント

順に説明します。

1. Voiceflowで作成したプロジェクトとAPIキー

Voiceflowでプロジェクトを作成しておいてください。プロジェクトタイプは「チャットアシスタント」タイプになります。

f:id:kun432:20220226223811p:plain

会話フローを作成します。期待通りの動きになっているかをテストしておいてください。対話モデルのトレーニングをしておくことをお忘れなく。

f:id:kun432:20220226224434p:plain

f:id:kun432:20220226224443p:plain

作成できたら、APIキーを取得しておきます。

f:id:kun432:20220226224657p:plain

f:id:kun432:20220226224705p:plain

2. チャットボットを設置したいWebサイト

もちろんチャットボットを設置したいWebサイトが必要ですね。ただし、いくつか条件があります。

  1. HTTPSが有効になっていること(HTTPでは動かない)
  2. カスタムなHTMLやJavaScriptの埋め込みが可能なこと

レンタルサーバを借りてコンテンツも自分で用意している場合や、自前でサーバを立てて運用してる場合など、ご自身でホストしているようなケースであれば1、2のどちらも問題ないと思います。SSL証明書はLet's Encryptなどを使えばよいでしょう。

問題は2です。

今回のチャットボットを設置するためには<SCRIPT>タグを埋め込めるようにする必要がありますが、サービスとして提供されているウェブサイトやブログなどでは、これを許可していない・埋め込んでも無効化されるというものが多いようです。また、無料プランではできないが有料プランだとできる、というものもちらほらあるようです。これについてはお使いのサービスの仕様等を確認してください。

今回は、以下のレンタルサーバにWordPressを自分で設置して、これにチャットボットを設置したいと思います。ちなみにWordPressのインストールはレンタルサーバの管理画面からワンクリックで行えました。

3. Herokuアカウント

チャットボットとVoiceflow Dialog Management APIとのやり取りを中継するアプリをHerokuに立てるために必要です。デプロイはHeroku Buttonでほぼワンクリックで終わります。

手順

ではやっていきましょう。

まず最初にブログを見てみましょう。

f:id:kun432:20220227025942p:plain

WordPressで立てたブログです。ほぼデフォルトの状態です。必要なのはブログのドメインです。

f:id:kun432:20220227030052p:plain

このドメインはHerokuにデプロイするアプリのパラメータとして必要になります。

次にHerokuにアプリをデプロイしていきましょう。以下のレポジトリにアクセスしてみてください。

HerokuにデプロイするアプリのGitHubレポジトリです。READMEに「Deploy to Heroku」というボタンがあるのでこれをクリックします。

f:id:kun432:20220227030327p:plain

Herokuへのデプロイを開始するための画面が開きます(ログイン画面が出た場合には先にログインしてください)。いくつか設定項目があるので、順に設定していきます。

最初にアプリ名を設定します。適当なものをつけてください。アプリが公開されたときにこの名前がアプリ名.herokuapp.comというドメインで公開されます。(このドメインが後で必要になります。)

f:id:kun432:20220227030635p:plain

「Config Vars」にいくつか設定を行います。

FRONTEND_URLにブログのドメイン、VF_API_KEYにVoiceflowプロジェクトのAPIキーを入力します。ドメインの最後のスラッシュは不要です。 MAX_AGEはチャットのセッション保持時間で、最初にアクセスしてからこの設定時間の間はチャットの状態が保存されています。つまりVoiceflow側での永続的な変数などが保持されたままになるということです。デフォルトは3600秒=1時間にしていますので、必要ならば変更してください。

f:id:kun432:20220227030854p:plain

入力したら最後に「Deploy app」をクリックします。

f:id:kun432:20220227031403p:plain

APIサーバがデプロイされますので、しばらく待ちます。

f:id:kun432:20220227031521p:plain

以下のように「Successfully deployed」と表示されればOKです。「Manage App」をクリックするとアプリの管理画面が表示され、「View」をクリックするとアプリにブラウザでアクセスします。アプリのドメインを確認するために「View」をクリックしてみましょう。

f:id:kun432:20220227031856p:plain

エラーになっていますが、気にしなくてOKです。少なくともエラー画面が返ってきているということはアプリは動いているということですね。で、ここで必要なのはこのアプリのドメインです。後ほどチャットボットの設定で必要になるので控えておいてください。

f:id:kun432:20220227032203p:plain

ではブログにチャットボットを設置していきましょう。今回はWordPressを使っているので、WordPressの管理画面を開いてそこでHTML/JavaScritptの埋め込みを行います。

まず管理画面を開きます。

f:id:kun432:20220227032652p:plain

WordPressでカスタムなHTML/JavaScriptの埋め込みを行う方法は色々あると思いますが、今回はヘッダーやフッターにHTMLをかんたんに埋め込めるプラグイン「Insert Headers and Footers by WPBeginner」を使いましょう。

左のメニューから「Plugins」→「Add New」をクリックします。

f:id:kun432:20220227033004p:plain

insert header footerとかで検索してみてください。

f:id:kun432:20220227033402p:plain

出てきましたね。では「Install Now」をクリックします。

f:id:kun432:20220227033524p:plain

インストールが無事終わったら、以下のような画面になります。「Active」をクリックして有効化します。これでプラグインのインストールは完了です

f:id:kun432:20220227033621p:plain

ではプラグインを利用して、HTML/JavaScriptを埋め込みます。左のメニューから「Settings」をクリックするとさきほどの「Insert Headers and Footers」プラグインの設定が見えますのでこれをクリックします。

f:id:kun432:20220227033903p:plain

「Insert Headers and Footers」プラグインの設定画面が表示されました。ここの入力欄にHTML/JavaScriptを埋め込めば反映されます。ヘッダー・ボディ・フッターのどれでも設定ができますが、今回はフッターに設定しましょう。

f:id:kun432:20220227034306p:plain

下にスクロールしてフッターの入力欄に以下をコピペします。

<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>

こんな感じですね。

f:id:kun432:20220227035306p:plain

で、1箇所だけ変更します。上記のendpoint: 〜となっている部分のURLをHerokuで取得したドメインに変更します。最後の/chatはそのままにしておいてください。今回の例だとこんな感じ。修正したら「Save」をクリックします。

f:id:kun432:20220227035110p:plain

これで完了です。

ブログの画面を開いてリロードすると、チャット用のウインドウが表示されると思います。

f:id:kun432:20220227035713p:plain

なにか入力してみて、Voiceflowで作成した会話フロー通りのやりとりができれば完了です!

f:id:kun432:20220227035956p:plain

まとめ

設置方法について説明しました。バックエンドはHeroku Buttonを使ってワンクリックで、設置するWebサイト側はHTML/JavaScriptを埋め込むだけにしたので、かなりかんたんに設置できるように工夫してみました。また、今回はWordPressを使いましたが、条件を満たすものであれば(やり方は変わると思いますが)基本的には動くのではないかと思います。

次回はもう少し裏側の話をまとめたいと思います。