Set Up the Page

Every page with the plugin starts with init. It gives the page your plugin key, and optionally a theme, display and URL sync setting that every plugin on the page shares.

window.SportNinja = window.SportNinja || [];
SportNinja.push(['init', {
  key: 'pk_sn_Y0JtVvplAnMGm1chyf9gOGckpWu8kXMy',
  theme: { primary: '#1C7ED6' },
}]);

What You Pass

Option	Required	Type	Default	What it does
key	Yes	string		The plugin key, pk_<brand>_…. Decides whose data is shown and which websites may show it.
theme	No	object	brand default	Colours, fonts, corners and spacing for every plugin on the page. See the Theme Reference.
display	No	object		Header, schedule layout, footer, size and alignment for every plugin on the page. See Display.
syncUrl	No	boolean	true	Keep the plugin’s page in your page’s address. See URL Sync.

A plugin can still change any theme or display key for itself when you display it.

Good to Know

• Order doesn’t matter. A plugin you show before init runs waits for it, then appears as soon as init arrives, in the order you asked for the plugins.
• Running your setup again is safe. A second init with the same key only fills in theme, display or syncUrl if the first one didn’t set them, for plugins shown after it. Nothing the first one set changes. So data-key on the script tag and an inline init with a theme work together.
• One key per page. An init with a different key is ignored with a console warning, and the first key stays. If one plugin really needs another key, pass key when you display it.
• No key, no init. An init without a key is ignored with a console warning.

Without a Script

On a site builder that strips inline scripts, put the key on the script tag instead. It does the same as an init with only key (and syncUrl):

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

See No-Script Embed.