カルーセルを利用したい

『カルーセル』アクションを追加することで、チャットウィンドウにカルーセルパネル(絵・写真・情報)が表示できます。
パネルを横にスライドさせることで、複数のコンテンツを表示させることが可能となります。

  手順

  1. 左メニューの『チャットボット一覧』より『カルーセル』アクションを設定したいチャットボットを選択してください。

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

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

  4. カルーセルの各項目を設定します。
    4-1. 『タイトル』を入力してください。選択された要素を代入する変数名になります。
    [カルーセルアイテム変数の要素について]
    カルーセルアイテムで使用できる要素は、以下になります。選択肢タイプに「変数に値をセット」を使用した場合のみ利用可能です。
    No 項目 変数要素
    1 タブ番号 {{変数名.index}}
    2 タブID {{変数名.id}}
    3 選択肢の値 {{変数名.action}}
    4-2. 『カルーセルアイテム』の各項目を入力します。

    [カルーセルアイテムについて]
    タブの横にある”+”ボタンをクリックすると、カルーセルアイテムを追加でき、”×”ボタンを押すと削除することができます。
    カルーセルアイテムは、最大10件まで追加可能です。

    4-2-1. 『アイテムID』を入力してください。ここで設定するIDにより、どのタブのアイテムが選択されたかを判断することができます。

    4-2-2. 『アイテムタイトル』を入力してください。ここで設定するタイトルが、タブごとのアイテムの見出しになります。

    4-2-3. 『本文』にアイテムの説明を入力してください。
    4-2-4. 表示する画像を『アップロード』または『URLを貼り付け』から選択し、画像を設定してください。
    ※画像を設定する場合は、全てのカルーセルアイテムで画像の設定が必要となります。

    [アップロード要件]
    画像形式 JPEG、PNG
    画像サイズ 1024px × 1024px 以下
    容量上限 1MB
    [URL貼り付け要件]
    画像形式 JPEG、PNG
    対応URL httpsで始まる画像URLのみ登録できます。
    4-2-5. 『選択肢』の各項目を設定します。
    ※選択肢の数は、全てのカルーセルアイテムで同じ数にそろえてください。
    名称 説明
    タイプ 「変数に値をセット」または「URLを開く」を選択します。
    表示名 選択肢の表示名になります。
    「変数に値をセット」の場合は、変数にセットする値を設定します。(省略した場合は表示名と同一になります。)
    「URLを開く」の場合は、対象URLを設定します。
    ※選択肢項目の変数名に「.label」や「.value」を使用することで、選択肢で設定した「表示名」や「値」を取得することができます。
    選択肢項目(表示名/値)の変数利用方法については、 こちら をご覧ください。

    4-2-6. 選択肢ではなく、カルーセルアイテムの画像または本文がクリックされた時に、特定の処理を行いたい場合は、『画像または本文がクリックされた場合にも指定した処理を行う』にチェックを入れ、『タイプ』、『値』を設定してください。
    ※公開先がWeb、LINEのみ利用可能です。

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

Last updated on 2019/04/05.