React to Events

on runs your function when something happens in a plugin, like a completed registration. off stops it.

SportNinja.push(['on', 'registration:completed', (data, { element }) => {
  console.log('Registered', data.registrationId, 'in', element);
}]);

What You Pass

SportNinja.push(['on', event, handler]) to start listening, SportNinja.push(['off', event, handler]) to stop.

Argument	Required	What it is
event	Yes	One of the events below.
handler	Yes	Your function. It gets the event data and { element }, the element the plugin is mounted on. For off, pass the same function you gave on.

Events

Event data carries IDs only, never personal details.

Event	When	Data
ready	The plugin has loaded	{ view, id }: the entry page (its render value) and its ID
signin	A visitor signs in inside the plugin	{ userId }
signout	A visitor signs out	{}
registration:completed	A visitor finishes a registration	{ registrationId, sessionId }

Good to Know

• One handler hears every plugin. Handlers apply to every plugin on the page; use element to tell them apart. ready fires once per plugin; the other events come from the plugin where they happened.
• Late ready handlers still run. A ready handler added after the plugin is already ready is called once, straight away.
• Removing a handler needs the same function. Keep a reference to it:

function onRegistered(data) { /* … */ }
SportNinja.push(['on', 'registration:completed', onRegistered]);
SportNinja.push(['off', 'registration:completed', onRegistered]);

Example: send registrations to your analytics.

SportNinja.push(['on', 'registration:completed', (data) => {
  window.gtag?.('event', 'sportninja_registration', { registration_id: data.registrationId });
}]);