カルーセルを利用したい

「カルーセル」アクションを追加することで、チャットウィンドウにカルーセルパネル(絵・写真・情報)が表示できます。

パネルを横にスライドさせることで、複数のコンテンツを表示させることが可能となります。

※パネルは最大10件まで表示可能です。

  手順

  1. チャットボット一覧から、「カルーセル」アクションを設定したいチャットボットを選択してください。

  2. 『シナリオ一覧』タブから、「カルーセル」アクションを追加するシナリオを選択してください。

  3. シナリオの流れから『カルーセル』アクションを選択し、”アクションを追加”ボタンをクリックしてください。

  4. 『タイトル』を入力してください。
    このタイトルは、カルーセルアイテムを格納するための変数名になります。
    ※タブの横にある”+”ボタンをクリックすると、カルーセルパネルを追加でき、”×”ボタンを押すと削除することができます。

    変数のデータには以下の要素が含まれます。
    ・{{変数名.index}}:タブの番号
    ・{{変数名.id}}:タブのID
    ・{{変数名.action}}:選択の値

  5. 「カルーセルアイテム」の入力をします。
    『アイテムID』を入力してください。
    『アイテムID』を設定することで、どのタブのアイテムが選ばれたかを区別することができます。

  6. 『アイテムタイトル』を入力してください。

  7. 表示する画像を設定してください。
    画像の設定方法は、『アップロード』もしくは『URLを貼り付け』となります。

    ※アップロードの注意事項
    対応画像形式:PNG,JPEG
    画像サイズ:1024px×1024px以下
    容量上限:1MB

  8. 『カルーセル選択肢』を入力してください。
    表示名:選択肢の表示名になります。
    値:選択肢が選択された場合に受信する値を設定します。省略した場合は表示名と同一になります。

    ※変数名に「.label」や「.value」を使用することで、選択肢で設定した「表示名」や「値」を取得することができます。
    選択肢項目(表示名/値)の変数利用方法については、 こちら をご覧ください。

  9. 保存”ボタンをクリックし、シミュレーターで動作を確認してください。

Last updated on 2018/12/11.