テンプレートを改造した場合、当該接客に関してはサポート対象外となりますのでご留意ください。
テンプレートの改造はHTMLやCSS等が実装可能な方が行うようにしてください。

ステートとは、アクションの表示状態のことを指します。
通常のポップアップ等であれば、「非表示」と「表示」のステートを持ちますが、
ボタンクリックにより、見た目を複数変更するテンプレートも存在します。
※ステート = ページ とイメージすると分かりやすいです。

ステートを利用した接客の例
初期表示 → コンテンツ表示 → 「閉じる」後の最小化表示

ステートを切り替える

  • 「\」 : 非表示
  • 「数字」 : 各ステートの番号

ステートの名称を変更する

  • 「表示設定」から変更したステートを選択
  • 表示されるウィンドウの上部にあるステート名(画像内1の箇所)をクリックすると編集可能になります。

ステートを追加する

アクション編集画面 左のツールバーから「+」ボタンをクリックする

ステートを追加した後は、カスタマイズエディタからHTML/CSS/Scriptの編集が適宜必要になります。

テンプレートを改造した場合、当該接客に関してはサポート対象外となりますのでご留意ください。
テンプレートの改造はHTMLやCSS等が実装可能な方が行うようにしてください。

ステート毎のDOMを作成する

以下、最低限必要な項目をご説明します。

HTMLの追加

<section krt-if="state === 1">
    ... ステート1
</section>

krt-if="state === 1" の属性&属性値を持ったエレメントが各ステートとなります。
上記の場合は、「ステート1の時に、このsection以下のコンテンツを表示する」という意味になります。

ステートの切り替え

<button type="button" class="btn" krt-on:click="setState(2)">次へ</button>

krt-on:click="setState(2)" の属性&属性値を持ったエレメントが、ステート切り替えの機能を持ちます。
上記の場合は、「クリックするとステート2に切り替える」という意味になります。