Skip to Content
UI ComponentsComponent Events

Component Events

Base components emit normalized events so flows can branch, data can be captured, and analytics stay consistent. The lists below describe the internal component event catalog used by Studio wiring and campaign runtime configuration.

For the public host-page integration contract, use the JavaScript API document. The public JavaScript API intentionally exposes a smaller, more stable set of events for embedded campaigns.

Overview

This page documents runtime-facing event names used by built-in components. The source of truth for event availability is the component event registry in campaign-spec/src/componentEvents.ts.

The catalog below reflects current canonical event names:

  • page_viewed
  • started
  • finished
  • answered
  • submitted
  • event_button_clicked
  • event_text_input_changed
  • event_checkbox_toggled
  • event_code_input_submit
  • event_code_input_resend
  • event_auth_panel_submit
  • event_tasklist_requested
  • event_timer_start
  • event_timer_completed
  • event_reward_requested
  • event_reward_sectors_requested
  • event_last_reward_requested
  • event_shuffle_started
  • event_daily_picks:check
  • event_daily_picks:completed
  • event_match_forecast:vote
  • event_match_forecast:cta

Game events

EventFired byPayload highlights
startedGame components such as trivia_quiz, fortune_wheel, scratch_card, crossword, memory_game, snake_game, goal, and others.{ componentId, game_type, session_id, started_at, timer }
finishedSame game components when a play session ends.{ componentId, game_type, session_id, outcome, end_reason, timer, metrics, error }
answeredtrivia_quiz.{ componentId, game_type, metrics: { question_id, answer_id, correct? } }
event_shuffle_startedcards_pack before the card shuffle / reveal sequence starts.Component-specific payload.
event_daily_picks:checkdaily_picks when the player confirms selected cards.Component-specific payload.
event_daily_picks:completeddaily_picks when the check flow completes.Component-specific payload.
event_match_forecast:votematch_forecast when the user votes.{ id, name, side, votes1, votes2, odds1, odds2 }
event_match_forecast:ctamatch_forecast CTA click after voting.{ id, name, side, odds, votes1, votes2 }

Notes:

  • finished.metrics is game-specific. For example, Trivia may include score-oriented values, while other games may include progress or completion metrics.
  • Reward-based components may also emit reward request events in addition to started and finished.

Form and input events

EventFired byPayload highlights
event_text_input_changedTextInput, TextareaInput, and other text-like field components.{ id, name, value }
event_checkbox_toggledCheckbox, typically bound to consent fields.{ id, name, checked }
event_code_input_submitCodeInput when the current code is submitted.{ id, name, code }
event_code_input_resendCodeInput when the resend action is triggered.{ id, name }
submittedForm when submission succeeds.{ id, name, data }
event_auth_panel_submitAuthPanel when credentials or provider selection is submitted.{ id, name, email, auth_provider_id, authProviderId }

These events feed node logic (branch, compute) to continue the flow only after successful submissions.

Action and reward events

EventFired byPayload highlights
event_button_clickedbutton, cover.{ componentId }
event_reward_requestedReward-aware components such as reward_button, cards_pack, fortune_wheel, scratch_card, reward.Request payload used to fetch reward allocation.
event_reward_sectors_requestedReward-aware components that need sector or prize availability metadata before interaction.Request payload used to resolve sectors / prizes.
event_last_reward_requestedprize_banner when it requests the latest reward projection.{ appId, pageId, poolId, componentId, requestId }
event_tasklist_requestedtask_list when it asks runtime for current task state.{ id, name, taskListId, taskId, taskIndex, taskText, done }

Notes:

  • event_reward_requested, event_reward_sectors_requested, and event_last_reward_requested are runtime-facing events used by reward mechanics.
  • These reward request events are distinct from the public host-page reward_received event documented in the JavaScript API.

Timer and page events

EventFired byPayload highlights
event_timer_starttimer when countdown or count-up begins.{ id, name, mode, elapsed, remaining, duration }
event_timer_completedtimer when countdown completes.{ id, name, mode, elapsed, remaining, duration }
page_viewedRuntime page activation.Fired whenever a page node becomes active.

Component coverage

The following component groups currently participate in the catalog:

  • auth and code entry: auth_panel, code_input
  • input and forms: text_input, textarea_input, checkbox, form
  • simple actions: button, cover
  • questions: trivia_quiz
  • reward mechanics: reward_button, cards_pack, fortune_wheel, scratch_card, reward, prize_banner, daily_picks
  • timers and task state: timer, task_list
  • game components: crossword, puzzle_game, puzzle_jigsaw, memory_game, hidden_objects, matching_game, triple_memory, snake_game, tank_battle_game, falling_objects, endless_runner, car_race, geometry_dash, goal
  • specialized interactions: match_forecast

Using the catalog

  • Node transitions can listen for these events directly.
  • The catalog reflects runtime-facing event names used by components and campaign wiring.
  • Host website integrations should use the public JavaScript API instead of consuming this internal catalog directly.