【BOT開発のTips】Facebook Messengerボットのボタンを4つ以上送る方法

こんにちは。hachidoriです。

f:id:hachidoribot:20160627205112j:plain

β版公開以降1週間が経ちまして、本当に多くのお客様がチャットボットを開発されていて、hachidoriとしても嬉しい限りでございます。

 

さて、β版公開以来、よく頂くご質問の1つ

FacebookのButton Templateでボタンを3つ以上配置したいが、どうすればいいのか」

について、Tipsをご紹介します。

 

まず、Button Template、Generic Template(カード)のボタン数はFacebook側の指定によって3つまで、と決められております。

 

ですので、hachidori側でも、そのガイドラインに沿って、3つ以上を1つのテンプレートに配置できないようになっております。

 

ですが、Facebookのチャットボットは、

1つのユーザーの発言に対し、複数のアクションを返すことができます。

 

なので、テンプレートを分けてしまえば、選択肢を4つ以上提示することは可能になっているんです。

ここで、下記二つの方法についてご紹介します。

①Button Templateを使う(ボタンを縦に表示する)

②Generic Templateを使う(カルーセルで横に表示する)

 

 

①Button Templateを使う(ボタンを縦に表示する)

例えば、選択肢が3つの場合(ボタンが3つ)

 

f:id:hachidoribot:20160630170448g:plain

 

という挙動になります。この中に選択肢4というボタンは配置できませんが、分けてしまえば可能になります。

 

このような感じです。

f:id:hachidoribot:20160630170442g:plain

 

②Generic Templateを使う(カルーセルで横に表示する)

カードのテンプレートは、画像を入れなくても送信できます。

なので、このように、ボタンとして使うことも可能です。

例えば、選択肢が3つの場合(ボタンが3つ)

f:id:hachidoribot:20160630172127g:plain

これを増やすと、

こうなります。

 

f:id:hachidoribot:20160630172130g:plain

 

Facebook側も正式版になるといろいろと変更点は出るのかもしれませんが、今はこの対応が最善策だと思います。

こうすれば選択肢は割と多くに対応できるのではないでしょうか。

 

 

では、hachidoriでこれを実装する方法についてです。

①Button Templateを使う(ボタンを縦に表示する)

f:id:hachidoribot:20160630170444g:plain

②Generic Templateを使う(カルーセルで横に表示する)

f:id:hachidoribot:20160630172414g:plain

 

最初のユーザーの発言に対応するアクションはデフォルトでテキストとなっていますが、他のアクションを追加してから、テキストを削除していただければ、最初からButtonやカードを送信することができます。

 

また、空白のボタンは表示しない仕組みになっているので、消す必要はありません。

 

 

 

 

【hachidoriサポートチームより】

hachidoriはコードを書かずに10分でBOTを開発できるウェブサービスです。 

β版を公開してから、想定を上回るペースでご登録頂いておりまして、本当にありがたく思っております!

現在、hachidoriでは、正式版の公開に向けて、今まで限定していた機能の公開準備や、更に簡単にBOT開発を楽しんで頂けるよう、開発に邁進しておりますので、是非とも応援よろしくお願いいたします!

 

コードを書かずにBOT開発「hachidori」は現在β版を無償提供中です。是非ともこの機会にお試しください。

hachidori

コードを書かずにBOT開発「hachidori」は現在β版を無償提供中です。是非ともこの機会にお試しください。