Powered by NotePM

02.チャットボット作成方法(スライダー型)

Published on 02/06/2023 19:19
  • 259

チャットボット作成方法(スライダー型)

『スライダー型』とは

画像を登録して、スライドで表示する形式です。

視覚的に分かりやすく表示したい時におすすめです。

チャットボットでの表示例

タイトルやコメントを表示することが可能です。

左右の矢印クリックで次の画像(項目)に移動します。
65f1e756-73b4-11f0-a0a7-06527b1b5a3b.png?ref=thumb

①シナリオ編集画面まで進む

チャットボットテンプレートを選択し、シナリオ編集画面まで進みます。
チャットボット作成方法はこちら

②表示形式を選択する

チャットボットで表示されるシナリオの形式を編集します。

【1.スライダー型にしたいメニューを選択する】

スライダー型にしたい階層のメニューを選択します。
ec555336-0404-11ee-8875-06720a606bea.png?ref=thumb

【2.「スライダーを表示」をクリックする】

f3b89594-73b4-11f0-8f8e-066924efa36b.png?ref=thumb

【3.「保存する」をクリックする】

13a1aaa8-73b5-11f0-8c98-066924efa36b.png?ref=thumb

【4.該当のメニューが「スライダー型」に変更されます】

スライダー型に変更すると、該当の枠が青色に変更されます。
410a3d0e-0128-11ee-bde2-06720a606bea.png?ref=thumb

③スライダーの内容を編集する

【1.スライダー型に変更したメニューを選択する】

スライダー型に変更した階層のメニューをクリックします。
e83f32a6-0127-11ee-aea0-06720a606bea.png?ref=thumb

【2.スライダー型チャット設定を編集する】

12d00b08-0128-11ee-8af7-064017533d40.png?ref=thumb


【ボット型に変更する】

変更前のボット型に戻すことができます。


【プレビュー】

実装した際の見え方を確認することができます。


【保存する】

内容の保存ができます。


スライダー前ボットコメント:メニューをクリックした際に一番上に表示される文言を変更できます。
スタイル:表示される画像と本文のスタイルを変更できます。
画面割合:表示される画像と本文の割合を変更できます。
外枠角丸:外枠の角丸の大きさを変更できます。
矢印:矢印の形や色、サイズ等を変更できます。
本文エリア:本文エリアの色味やフォントサイズ等を変更できます。
ボタン:ボタンの有無や色味、フォントサイズ等を変更できます。


右側のプレビュー画面を見ながら調整してください。

【3.スライダーの内容を編集する】

c019b5f0-73b5-11f0-a005-06527b1b5a3b.png?ref=thumb


画像:スライダーに表示する画像を設定できます。
 ∟ファイルアップロード:画像ファイルを登録します。
  画像URLからアップロード:画像URLを登録します。
タイトル:スライダーに表示するタイトルを設定できます。
本文:スライダーに表示する本文を設定できます。
ボタンテキスト:ボタンのテキストを設定できます。
リンク先url:リンク先のurlを設定できます。

スライダーを追加する際は「画像を追加」をクリックします。
75f76d0a-012a-11ee-b305-064017533d40.png?ref=thumb

④編集内容を保存する

ページ下部の「保存する」をクリックします。
e4735262-012a-11ee-ae28-064017533d40.png?ref=thumb

ページ上部に「フォームの設定を更新しました。」の表示が出てきたら完了です。
1b48d30c-012b-11ee-ab52-064017533d40.png?ref=thumb

★各スライダーの順番を入れ替える場合

右上の「-」を押すと、各スライダーの詳細を閉じることができます。

この状態でドラッグアンドドロップすることで順番を替えることができます。
811b0ec0-73b6-11f0-ac34-06527b1b5a3b.png?ref=thumb


28d0681e-bc15-11ee-bc7d-06720a606bea.png?ref=thumb