無料で作る LINE & Watsonチャットボット開発 -おしゃれなメッセージを返信しよう-

line Watson bot AI

商品について、単にテキストで¥200円とかでは、味気ないし、ユーザーに優しくありません。

そこで、Flex Messageを活用して、リッチなUIにしていきたいと思います。

前回、作ったチャットボットをベースに修正します。

会話フローを変更するのは、Watson Assistant側ですが、LINEの返信メッセージを
リッチにするには、NodeRedを修正します。

スポンサーリンク

Flex Message開発時の参照リンク

Message APIリファレンス

FlexMessage Simulator

ある程度サンプルがあるので、近いサンプルをもとに、ここで編集することで、
プレビューが見れます。あとはコピペするだけです。

商品画像、価格と商品説明を表示

getAssistantMsgという箇所で、Watson Assistantからメッセージを受け取って、LINEに返信するデータを作成していますので、ここを編集します。

前回の状態

“message”:[ここの中身がLINEで表示したい内容]

変更後

変更後は下記のようにします。

Watsonのエンティティが「ゆず酎ハイ」の時にFlexMessageが表示されるようにしています。

%Flex MessageのJSON%のところを下記とかに変更します。

画像のURLはhttpsにしないとエラーが出ます。

これで、こんな感じで返事が返ってきます。

ここにいっぱい条件をかくとコードが煩雑になるので、
工夫する必要がありそうです。

WatsonAssistantから、FlexMessage使うかとか、どのメッセージ使うかなど返して、
それに応じて、メッセージを切り替えるのが良さそうです。

出店リストの表示

商品や料理方法など複数回答を行いたい場合、リスト表示にするのも良いですが、

個人的にはカルーセルという横にスライドしてみるのが好きです。

FlexMessageSimulatorだとShoppingの例になっているものです。

コードは下記参照いただいても良いですし、Simulatorのサンプルを使っても良いかと思います。

最後に

FlexMessageを使うと、おしゃれなチャットボットに生まれ変わります。

いろいろ用意してくれている、LINEに感謝!

他にもあるので、試してみようかと思います。

ただ、返信メッセージは良くなったけど、問い合わせでいちいち文字は入力したくありません。

リッチメニューにしたいところですが、有料ユーザーのみなので、質問に対して回答できない場合に、FlexMessageで工夫したいと思います。

スポンサーリンク

タイトルとURLをコピーしました