Website Plugin Guide

SportNinja Help Center

Website Plugin Guide

Set up the Website Plugin and add it to your website.

November 6, 2026

What Is the Website Plugin?

Put your live schedules, standings, stats and registrations on your own website.

The Website Plugin puts your league’s SportNinja pages on your own website: schedules, scores, standings, statistics, rosters and registrations. It updates on its own. When a score is entered in SportNinja, it appears on your website too.

You set it up once in Account Settings › Website Plugin, copy a short piece of code, and paste it into your website.

Before You Start

1. Your plan includes the Website Plugin. It’s part of the Pro and Ultimate plans. On other plans the Website Plugin tab doesn’t appear in Account Settings.
2. You can manage the account. You need to be the account owner or an admin of the root organization.
3. You know your website’s address, for example https://www.yourleague.com, and you can edit its pages (or someone on your team can).

Not on Pro or Ultimate?

Open Account Settings › Subscription to see your plan, or contact us to upgrade.

How It Works

1. Create a key

A key tells the plugin whose data to show, and which websites may show it.

2. Preview and style it

Pick the page it opens on, the sections, colours and fonts. You see the result live.

3. Copy the code

Your choices are written into a short embed code.

4. Paste it on your website

Add it to any page. It works with WordPress, Wix, Squarespace, GoDaddy and hand-built sites.

Start: Create a Website Plugin Key

Create a Website Plugin Key

Create the key that connects your website to your SportNinja data.

A Website Plugin key connects the plugin on your website to your account. Each key only shows your account’s data, and only on the websites you list. If someone copies your code onto another website, it won’t load there.

Create a Key

1. Go to Account Settings › Website Plugin.

2. In Website Plugin Keys, select Create Website Plugin Key.

3. Fill in the form:

   

   • Name: a name for your own reference, like League Website.
   • Hosted Websites: every website that will show the plugin, one per line, like https://www.yourleague.com. Use just the address, with no page path after it.
   • Allow Hidden Website Addresses: leave this off unless your site builder blocks the plugin (see below).

4. Select Create. Your new key appears in the list.

   

   The key is filled into the Embed Code under the preview straight away, ready to copy:

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

Testing on your own computer?

Developers: add your local address too, like http://localhost:3000, so the plugin also loads while you build the site.

Hosted Websites: Get It Right the First Time

✅ Works	❌ Won’t work
https://www.yourleague.com	https://www.yourleague.com/schedule (has a page path)
https://yourleague.com	yourleague.com (missing https://)
http://localhost:3000	https://www.yourleague.com/* (no wildcards)

Caution

https://yourleague.com and https://www.yourleague.com are different websites. If your site opens on both, list both.

When to Turn On Allow Hidden Website Addresses

Some site builders, like GoDaddy, load your page in a way that hides its address from the plugin. Because the plugin can’t see which website it’s on, it refuses to load. If that happens, edit the key and turn on Allow Hidden Website Addresses.

Edit or Revoke a Key

Each key row has two buttons:

• Edit (pencil): change the name, websites or hidden-address setting. The key itself doesn’t change, so you don’t need to update your website.
• Revoke (bin): turns the key off on every website at once. You’ll be asked to confirm. Websites using it stop showing the plugin.

Is my key a secret?

No. A plugin key sits in your website’s code where anyone can read it, which is why it’s locked to your listed websites. That’s different from an API token, which is a secret.

Next: Preview Your Plugin

Preview Your Plugin

Choose what the plugin opens on and see it live before it goes on your website.

Below your keys, the page splits in two: Plugin Settings on the left and a live Preview on the right. Nothing is saved. Your choices are written straight into the embed code underneath the preview.

1. Choose What the Plugin Opens On

In Plugin Settings › Embed, pick a Page Type. This is the page your website shows first:

Page Type	Shows	ID to enter
Organization	Your whole organization: sub-orgs, competitions, teams, locations, registrations	An organization ID
Competition	One league or tournament: schedule, standings, stats, playoffs	A competition ID
Team	One team: schedule, stats, roster	A team ID

In the embed code, the Page Type is the render option:

SportNinja.push(['mount', '#sportninja', {
  "render": "competition", // "organization", "competition" or "team"
}]);

2. Enter the ID

The ID is filled in for you with your account’s organization. To show a different organization, a competition or a team, paste its ID.

Where to find an ID: open the page in SportNinja and copy the last part of the web address.

Page	Web address	The ID is
Organization	sportninja.com/org/Ab3dE5fG7hJ9kLmN	Ab3dE5fG7hJ9kLmN
Competition	sportninja.com/schedule/aB12cD34eF56gH78	aB12cD34eF56gH78
Team	sportninja.com/team/Zy98Xw76Vu54Ts32	Zy98Xw76Vu54Ts32

The ID goes in the id option, whatever the Page Type:

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

3. Check the Preview

• Key: if you have more than one key, choose which one to preview. The embed code uses the same key.
• Full Screen: shows the settings, preview and code over the whole window. Press Esc to leave.
• Plugin URL: the address the preview loads the plugin from. Most people never change it.

Only the Key reaches your embed code; Full Screen and Plugin URL just change the preview.

SportNinja.push(['init', {
  "key": "pk_sn_…", // the key selected under Preview
}]);

If the preview shows a message instead of your plugin:

Message	Fix
Create A Key First	You don’t have a key yet. Create one.
Enter An ID	The ID field is empty.
Enter A Valid ID	The ID has a typo or spaces. Copy it again from the web address.
The plugin says it isn’t allowed here	The key’s Hosted Websites must include the address shown under the preview. Edit the key and add it.

Next: Customize Every Setting

Plugin Settings Explained

What every option in Embed, Sections, Theme and Display does.

Every setting is optional. Leave something alone and the plugin uses its default. Only the options you change are written into your embed code, so the code stays short.

Changed a setting? Copy the code again.

Settings aren’t saved in SportNinja. They live in the embed code. After changing anything, copy the new code and replace the old code on your website.

The settings are in four numbered groups. Select a group to open it.

1. Embed

The page your plugin opens on.

Setting	What it does
Page Type	The plugin’s entry point: Organization, Competition or Team.
ID	Which organization, competition or team to show. See where to find an ID.
Initial Section	The section that’s open first, like Schedule or Standings. Default uses the plugin’s own choice. Changing the Page Type resets it.
Sync URL With Host Page	On: when a visitor opens a game or a team, your website’s address changes too, so they can bookmark or share that exact page. Off: your address stays the same.

SportNinja.push(['init', {
  "key": "pk_sn_…",
  "syncUrl": false, // Sync URL With Host Page turned off; left out when on
}]);
SportNinja.push(['mount', '#sportninja', {
  "render": "competition",
  "id": "aB12cD34eF56gH78",
  "initialSection": "standings", // Initial Section; left out for Default
}]);

2. Sections

Show or hide sections, the tabs along the top of each page. There’s a group for each kind of page: Organization, Competition and Team. The plugin moves between them (a visitor can go from your organization to a competition to a team), so you can hide sections on all three, whatever your Page Type is.

Page	Sections you can hide
Organization	Sub-orgs, Competitions, Teams, Locations, Registrations
Competition	Playoffs, Schedule, Standings, Statistics, Suspensions, Communication, and the Register Now Button in the header
Team	Schedule, Statistics, Roster, Communication

Hidden sections go in the sections option, listed under their page type, each set to false. Sections you leave on aren’t written.

SportNinja.push(['mount', '#sportninja', {
  "render": "organization",
  "sections": {
    "organization": { "subOrgs": false },
    "competition": { "playoffs": false, "suspensions": false },
  },
}]);

Tip

Not running playoffs yet? Hide Competition › Playoffs until you are.

3. Theme

How the plugin looks. Match it to your website.

Colours

Setting	What it does
Mode	Auto follows the visitor’s device (light or dark). Light or Dark fixes it.
Presets	One-click colour sets: Default, Ocean, Forest, Crimson, Sunset, Royal. A preset sets the header and accent colours; you can still change any colour afterwards.
Page Colours	Background, Text, Primary (your accent colour: buttons, active tabs, highlights) and Border. Type a hex code like #004FFF, or use the colour picker. Default puts a colour back.
Header Colours	The band at the top with your logo, title and tabs: Background and Text.
Content Area Colour	Behind the lists, tables and filters. Off: a shade of your background.
Button, Link, Input, Schedule Colours	Fine-tune each part on its own. Off: the plugin picks matching colours for you.
Scoreboard Style	The game page scoreboard: a Sport Photo, or your Header Colours.
Playoffs Bracket Colour	Behind the playoffs bracket.

Every colour goes in the theme option, inside init. A preset writes its colours, never its name: Ocean is these three lines.

{
  "theme": {
    "mode": "dark", // left out for Auto
    "headerBackground": "#0B4F8A", // Ocean
    "headerText": "#FFFFFF", // Ocean
    "primary": "#1C7ED6", // Ocean
  },
}

Setting	Key in theme
Page Colours	background, text, primary, border
Header Colours	headerBackground, headerText
Content Area Colour	contentBackground
Button Colours	buttonBackground, secondaryButtonBackground, secondaryButtonBorder, outlineButtonColor
Link Colour	linkColor
Input Colours	inputBackground, inputBorder
Schedule Colours	scheduleHeaderBackground, scheduleBodyBackground
Scoreboard Style	scoreboard: "header" for Header Colours; left out for Sport Photo
Playoffs Bracket Colour	bracketBackground

Fonts

Setting	What it does
Body Font	Any Google Fonts family, typed exactly as Google lists it, like Open Sans. Used for paragraphs, labels, tables and buttons.
Body Font Size	14–22 px. Default 16.
Body Letter Spacing	−2 to 5 px.
Heading Font / Heading Letter Spacing	The same, for titles, tabs and other uppercase text.

{
  "theme": {
    "fontFamily": "Open Sans", // Body Font
    "fontSize": 15, // Body Font Size, in px
    "letterSpacing": 0.2, // Body Letter Spacing, in px
    "headingFontFamily": "Oswald", // Heading Font
    "headingLetterSpacing": 1, // Heading Letter Spacing, in px
  },
}

Tip

Using the same font as your website makes the plugin feel built in.

Shape & Spacing

Setting	What it does
Corners	Rounded, Small or Square.
Spacing	Default, Compact (tighter, fits more on screen), or Custom (set your own spacing unit).

{
  "theme": {
    "corners": "small", // "rounded", "small" or "square"
    "spacing": "compact", // or a number in px for Custom, e.g. 5
  },
}

Layout

Setting	What it does
Max Height (px)	Empty: the plugin grows with its content. Set: it stays that tall and scrolls inside.
Max Width (px)	The widest the plugin gets. Default 1200 px.
Show Border	The line around the whole plugin.
Alignment	Left, Center or Right, when your page is wider than the plugin.

Layout lives in display (also inside init), not theme:

{
  "display": {
    "maxHeight": 800, // in px; left out to grow with the content
    "maxWidth": 960, // in px; left out for 1200
    "hideBorder": true, // Show Border turned off
    "align": "left", // left out for Center
  },
}

4. Display

Setting	What it does
Hide Header	Hides the top band; only the tabs and content show. Good if your page already has its own title.
Today’s Games By Default	The schedule opens on today’s games.
Header Navigation	Coming soon. It has no effect in the plugin yet.
Schedule View	How games are listed: Rows, Cards or Calendar.
Feed Org ID	Communication tabs show this organization’s posts instead of their own. Useful when announcements come from a parent organization.
Footer	Branded (the “Powered by SportNinja” line, the default), Hidden, or Custom: your own Footer Text (up to 80 characters) and an optional Footer Link.

{
  "display": {
    "hideHeader": true,
    "todayGamesByDefault": true, // Script version only
    "scheduleView": "cards", // "rows", "cards" or "calendar"
    "feedOrgId": "Ab3dE5fG7hJ9kLmN", // Script version only
    "footer": "hidden", // left out for Branded
    // or a custom footer:
    // "footer": {
    //   "text": "Results by Our League",
    //   "link": "https://www.yourleague.com",
    // },
  },
}

Note

Today’s Games By Default, Header Navigation and Feed Org ID only work with the Script version of the embed code. If you choose No-Script Builders, a note tells you which ones were left out.

Next: Add It to Your Website

Add the Plugin to Your Website

Copy the embed code and paste it into WordPress, Wix, Squarespace, GoDaddy or your own HTML.

Under the preview, Embed Code holds everything: your key and every setting you chose.

Choose the Code Version

Version	Use it when
Script (recommended)	You can paste HTML that includes <script> tags. Supports every setting.
No-Script Builders	Your site builder strips inline scripts. Your settings go into the HTML element itself. A few settings aren’t supported, and the page tells you which.

Select Copy Embed Code, then paste it where the plugin should appear.

Website Owner

WordPress

1. Edit the page where the plugin should appear.
2. Add a Custom HTML block (select +, then search “HTML”).
3. Paste the code and select Update.

Wix

1. Select Add Elements › Embed Code › Embed HTML.
2. Choose Code, paste, and select Update.
3. Drag the box to the size you want, then Publish.

Squarespace

1. Edit the page and add a Code block.
2. Paste the code and save.

GoDaddy

1. Add a section, search for HTML, and paste the code.
2. If the plugin says it isn’t allowed on your website, turn on Allow Hidden Website Addresses on your key. See Create a Key.

Tip

Can’t find where to paste HTML? Send the code to whoever manages your website. It’s all they need.

Developer

Full developer referenceEvery option and theme key, data attributes, the JavaScript API and errors.

The Script version renders a mount point, loads the loader asynchronously, sets the key and the look with init, and queues a mount call with what to show:

<div id="sportninja"></div>
<script src="https://embed.sportninja.com/embed.js" async></script>
<script>
  window.SportNinja = window.SportNinja || [];
  SportNinja.push(['init', {
    "key": "<your plugin key>",
    "theme": { "mode": "dark", "primary": "#004FFF" }
  }]);
  SportNinja.push(['mount', '#sportninja', {
    "render": "competition",
    "id": "<competition id>",
    "initialSection": "standings"
  }]);
</script>

The No-Script version uses data-* attributes instead, with the key on the script tag:

<div data-sportninja
     data-render="competition"
     data-id="<competition id>"
     data-mode="dark"></div>
<script src="https://embed.sportninja.com/embed.js" data-key="<your plugin key>" async></script>

Notes:

• Origins: the plugin only loads on the key’s Hosted Websites. Add http://localhost:<port> for local development.
• Only changed options are written, so the snippet stays small. Values the plugin would reject never make it into the code.
• Escaping: < inside the options is written as <, so text like </script> can’t break the page.
• Single-page apps: render the mount element before the mount call runs. The queue (window.SportNinja.push) works before or after the loader arrives, and a mount waits for init.
• Older embed code (a mount with key, view and orgId) no longer loads. Copy the code again; see Updating Older Embed Code.

Changed a setting later?

Copy the code again and replace the old code. Don’t paste a second copy next to it.

Something Not Working? Troubleshooting

Website Plugin Troubleshooting

Fixes for the most common Website Plugin problems.

I don’t see the Website Plugin tab

The Website Plugin is part of the Pro and Ultimate plans. Check Account Settings › Subscription. You also need to be the account owner or a root-organization admin.

The plugin says it isn’t allowed on my website

The website isn’t in the key’s Hosted Websites. Edit the key and add the exact address in your browser bar, https:// included. www. and no-www. count as different websites. On GoDaddy and similar builders, also turn on Allow Hidden Website Addresses.

The plugin shows nothing, or “key invalid”

The key was revoked or mistyped. Copy a fresh embed code from Account Settings › Website Plugin and replace the old one.

I changed a setting but my website looks the same

Settings live in the embed code, not in SportNinja. Copy the code again after every change and replace the old code on your website.

My font didn’t change

Type the font exactly as Google Fonts lists it, like Open Sans, not open-sans or OpenSans. A name the plugin can’t use shows an error under the field and is left out of the code.

The plugin is cut off or has a scrollbar

Clear Max Height under Theme › Layout so the plugin grows with its content. In Wix, also make the HTML box taller.

Tip

Still stuck? Contact support with your website’s address and a screenshot of what you see.