カウントダウンタイマー

Countdown timer selected on the canvas with the Countdown panel and Behavior dropdown visible

カウントダウンタイマーは、設定した時間からゼロに向かってカウントダウンし、ゼロに達すると表示が止まります。

テンプレート

カウントダウンタイマーのテンプレート

このカテゴリーには4つのビジュアルバリアントがあります:

  • Blocks — 日・時・分・秒をそれぞれラベル付きのセルに分けて表示します。
  • Inline Units — 単位のサフィックスを付けた1行テキスト表示です。
  • Inline — 数字のみの表示です。
  • Badge — ピル形状の数字表示です。

設定

右パネルのカウントダウンタイマー設定

時間を設定する

右パネルの Countdown セクションで、開始時間を日・時・分・秒で入力します。

動作を設定する

Behavior ドロップダウンでタイマーの開始タイミングを設定します:

  • Every appear — ユーザーが画面を開くたびに再スタートします。デフォルト設定です。
  • First appear — 現在のアプリセッション中にユーザーが初めて画面を表示したときにスタートします。同じセッション中に戻ってきた場合はカウントを継続し、アプリを新たに起動するとリセットされます。
  • First appear (persisted) — ユーザーが初めて画面を開いたときにスタートし、アプリを再起動してもカウントを継続します。

タイマーが終了したときにアクションを実行する

カウントダウンがゼロになったときにアクションを実行するには、On timer end トリガーを追加します。たとえば、別のスクリーンに移動したり、割引バッジを非表示にしたりできます。

閉じるボタンの表示タイミングを遅らせる

フロー & ペイウォールビルダーには、ボタンの表示タイミングを遅らせる直接的な設定がありません。旧ペイウォールビルダーの閉じるボタンには Show after delay オプションがありましたが、それに相当する機能です。非表示のカウントダウンタイマーを使って、同じ動作を再現できます:

  1. Close ボタンを画面に追加し(ボタンを参照)、Design パネルでその Visibility を Hide に設定します。
  2. 同じ画面にカウントダウンタイマー要素を追加し、同様に非表示にします — タイマーのカウントダウンロジックのみ必要で、表示は不要です。
  3. タイマーの時間を、閉じるボタンが表示されるまでの遅延時間に設定します(時間の設定を参照)。
  4. タイマーに On timer end トリガーを追加し、閉じるボタンを対象とした Show アクションを設定します(アクション — 要素の表示/非表示を参照)。

タイマーがゼロになると、Show アクションによって閉じるボタンが表示されます。ビルダーにネイティブの遅延設定が追加された場合は、このワークアラウンドをその設定に置き換えてください。