Display the Plugin

mount shows the plugin inside an element on your page. You say which kind of page it opens on and which one, and anything that should differ from the page’s setup.

SportNinja.push(['mount', '#sportninja', {
  render: 'competition',
  id: 'aB12cD34eF56gH78',
  initialSection: 'standings',
}]);

What You Pass

SportNinja.push(['mount', target, options]), where target is a CSS selector ('#sportninja') or an element. The plugin’s iframe is added inside it.

What to Show

Option	Required	Type	Default	What it does
render	Yes	string		The kind of page the plugin opens on: "organization", "competition" or "team". See Page Types for what each one shows.
id	Yes	string		Which organization, competition or team. See IDs.
initialSection	No	string	the page’s default section	The section that’s open when the plugin loads, from the page type’s sections.
sections	No	object	all shown	Hide sections, on this page and on pages the visitor opens from it. See Sections.

How It Looks

Option	Required	Type	Default	What it does
theme	No	object	the page’s theme	Changes theme keys for this plugin only.
display	No	object	the page’s display	Changes display keys for this plugin only.

Advanced

Option	Required	Type	Default	What it does
key	No	string	the page’s key	Only for a plugin that needs a different key than the rest of the page. A plugin with its own key doesn’t wait for init.

Page Types

render picks one of three kinds of page, and id says which one. Each kind of page has its own sections: the tabs along its top. Visitors can still move between kinds of page inside the plugin, for example from an organization into one of its competitions, then into a team.

Use the section ID in initialSection. In sections, every switch name is the same as the section ID, except Sub-orgs, which is subOrgs.

Organization

render: 'organization', with an organization ID from sportninja.com/org/Ab3dE5fG7hJ9kLmN. The organization’s home page, a good fit for a league’s or association’s main website.

Section	Section ID	What visitors see
Sub-orgs	sub-orgs	The organizations under this one; each opens its own organization page.
Competitions	competitions	The organization’s leagues and tournaments; each opens its competition page.
Teams	teams	The organization’s teams; each opens its team page.
Locations	locations	The venues where games are played.
Registrations	registrations	Registrations visitors can sign up for.

Competition

render: 'competition', with a competition ID from sportninja.com/schedule/aB12cD34eF56gH78. One league or tournament, a good fit for a page about one season.

Section	Section ID	What visitors see
Playoffs	playoffs	The playoff bracket.
Schedule	schedule	The competition’s games. The layout follows display.scheduleView.
Standings	standings	The team standings.
Statistics	statistics	The competition’s statistics.
Suspensions	suspensions	Suspensions in the competition.
Communication	announcements	The competition’s announcements.

Register Now button. When the competition’s registration is switched on, its header shows a Register Now button that opens the registration. To hide it, set sections: { competition: { registerNow: false } } (or data-hide-sections="competition.registerNow" in the no-script version). It isn’t a section, so it can’t be the initialSection, and it’s only there while the header is: display.hideHeader hides it too.

Team

render: 'team', with a team ID from sportninja.com/team/Zy98Xw76Vu54Ts32. One team, a good fit for a club’s own website.

Section	Section ID	What visitors see
Schedule	schedule	The team’s games.
Statistics	statistics	The team’s statistics.
Roster	roster	The team’s players.
Communication	announcements	The team’s announcements.

The Plugin Wins, Key by Key

A theme or display in mount is laid over the one from init: keys the plugin sets replace the page’s, and keys it leaves out come from init.

SportNinja.push(['init', { key: 'pk_sn_…', theme: { primary: '#1C7ED6', mode: 'light' } }]);
SportNinja.push(['mount', '#roster', {
  render: 'team',
  id: 'Zy98Xw76Vu54Ts32',
  theme: { mode: 'dark' },  // primary is still #1C7ED6
}]);

Several Plugins on One Page

Give each plugin its own element and mount. The key and the shared look go in init once:

SportNinja.push(
  ['init', { key: 'pk_sn_…', theme: { primary: '#1C7ED6' } }],
  ['mount', '#standings', { render: 'competition', id: 'aB12cD34eF56gH78', initialSection: 'standings' }],
  ['mount', '#roster', { render: 'team', id: 'Zy98Xw76Vu54Ts32', theme: { mode: 'dark' } }],
);

Only the first plugin shown syncs the address, when the page’s syncUrl is on.

Good to Know

• One plugin per element. Mounting on an element that already has one is ignored with a console warning. Remove it first.
• The element must exist. If nothing matches the target when mount runs, it’s ignored with a console warning.
• Fixed once shown. render, id, initialSection and key can’t change later. To show something else, remove the plugin and mount it again. Theme, display and sections can change live.