Website Plugin Quick Start

The Website Plugin puts a league’s live SportNinja pages (schedules, standings, statistics, rosters, registrations) on any website. It runs in an iframe that sizes itself to its content, so it fits into any page layout.

This section is for the developer building the website. You don’t need access to the league’s SportNinja account. Everything is set in the embed code.

What You Need From the League

	Example	Notes
Plugin key	pk_sn_Y0JtVvplAnMGm1chyf9gOGckpWu8kXMy	Public by design: it sits in the page source. It only works on the websites the league listed for it.
An ID	Ab3dE5fG7hJ9kLmN	An organization, competition or team ID: the last part of its SportNinja web address.
Your website is on the key	https://www.yourleague.com	The league adds every address the plugin runs on, including http://localhost:<port> while you develop.

Ask for your local address too

If http://localhost:3000 (or your dev URL) isn’t on the key, the plugin refuses to load there with “This plugin isn’t set up for this website”. More on errors.

Embed It

1. Add an element where the plugin should appear, load the script, and mount the plugin on the element:

   <div id="sportninja"></div>
   <script src="https://embed.sportninja.com/embed.js" async></script>
   <script>
     window.SportNinja = window.SportNinja || [];
     SportNinja.push(['mount', '#sportninja', {
       "key": "pk_sn_Y0JtVvplAnMGm1chyf9gOGckpWu8kXMy",
       "view": "organization",
       "orgId": "Ab3dE5fG7hJ9kLmN"
     }]);
   </script>

2. Open the page. The plugin loads at 600px tall, then grows to fit its content.

3. Customize it with options and the theme, or control it from JavaScript with the JavaScript API.

Pick the Page It Opens On

view sets the entry page, and each view needs its own ID option:

view	ID option	Shows
"organization" (default)	orgId	Sub-orgs, competitions, teams, locations, registrations
"competition"	competitionId	Schedule, standings, statistics, playoffs, suspensions, communication
"team"	teamId	Schedule, statistics, roster, communication

Visitors can still move between page types inside the plugin (from an organization into one of its competitions, then a team), whatever the entry page is.

Can’t Use Inline Scripts?

Some site builders strip <script> blocks. Put the options on the element as data-* attributes instead; the loader finds them on its own:

<div data-sportninja
     data-key="pk_sn_Y0JtVvplAnMGm1chyf9gOGckpWu8kXMy"
     data-org-id="Ab3dE5fG7hJ9kLmN"></div>
<script src="https://embed.sportninja.com/embed.js" async></script>

See No-Script Embed for every attribute.

How It Works

• One script. embed.js reads the queue in window.SportNinja and replaces it with the live API, so SportNinja.push(...) works before or after the script loads.
• An iframe per plugin. Each mount adds an iframe (100% wide) inside your element. Your page’s CSS can’t reach into it, and the plugin can’t change your page; colours and fonts come from the theme.
• Auto height. The plugin reports its content height and the iframe follows, so there’s no inner scrollbar. Set display.maxHeight if you want a fixed height that scrolls.
• Deep links. By default the plugin keeps its page in your page’s address (#sn=/…), so visitors can bookmark and share a game or team. See syncUrl.
• Safe by default. The plugin never breaks your page: problems are shown inside the plugin and logged to the console with a [SportNinja] prefix.