Events

Movement emits custom events to page/ballot templates, to allow you to hook into page lifecycle using JavaScript when building templates.

Please let us know via support if there are more events you'd like to use or that would be useful.

Page loaded

Event: movement:page:loaded

Fired: When the page and DOM is fully loaded, to allow you to set up event hooks or other transformations

Example:

document.addEventListener('movement:page:loaded', (event) => {
  console.log('Page loaded', event.detail)
})

Backwards compatibility: The legacy event name movementPageLoaded is also fired.

Action changed

Event: movement:action:changed

Fired: When the user moves to a new action on the page (e.g. they sign a petition and advance to the share step, or skip an action)

Detail:

Example:

document.addEventListener('movement:action:changed', (event) => {
  const { previousAction, currentAction, previousActionKind, currentActionKind } = event.detail
  console.log(`Moved from "${previousAction}" (${previousActionKind}) to "${currentAction}" (${currentActionKind})`)
})

Backwards compatibility: The legacy event name movementActionChanged is also fired.

Email to target step change

Event: movement:email_to_target:step_change

Fired: When the user moves between steps within an email-to-target action (e.g. from the postcode lookup to the email compose step)

Detail:

Example:

document.addEventListener('movement:email_to_target:step_change', (event) => {
  console.log('Email to target step:', event.detail.step)
})