Overview: It's possible with SportNinja's Website Plugin to seamlessly integrate your Competition's schedules, stats, teams and rosters into your existing website.
These are the integration instructions to display the SportNinja Widget within your website.
(Last Modified: Nov 9, 2023)
Example Screenshots
Schedule List View
Schedule Card View
Standings View
Statistics View
Web Developer Steps:
-
Include Plugin Code Snippet
In Wordpress, paste the following where you want the widget to appear (ensuring that it’s in the <body> of the HTML):
<div id="main-content" class="main-content">
<div id="sn-root-plugin"></div>
<div id="modal-root"></div>
<div id="tooltip-root"></div>
</div>
<script type="text/javascript" src="https://d2xr9c99jgeq3p.cloudfront.net/main.js"></script>
<script type="text/javascript">
window.snPlugin.init();
window.snPlugin.renderSchedule("DAC2e3YYBBsl9Nuq", "statistics");
window.snPlugin.renderOrg("sn-org-id", "");
window.snPlugin.setTheme({
backgroundColor: "#FFFFFF",
textColor: "#000000",
headerBackgroundColor: "#760018",
headerTextColor: "#FFFFFF",
primaryColor: "#dd0330",
borderColor: "#000000",
});
</script>
-
(Optional) Define the colors used in the widget
You can optionally include and modify any of the four colour options (shown above) in the code snippet using CSS hexadecimal values. For example, #FFFFFF is white. -
Render an Organization
To render all competitions within a parent organization, follow the step below:window.snPlugin.renderOrg("<organization ID goes here>");
To render the most recent competition within a parent organization, follow the step below:window.snPlugin.renderOrgFirstSchedule("<organization ID goes here>");
This value will define where the widget will point to when users visit the page.A. Visit https://app.sportninja.com
B. Log in with your account, e.g. example@example.org / password
C. Open the search menu
D. Select “Organizations”, and enter the search term for the location, e.g. “Test League”, and click on the result:
E. On the organization page: find the text after “app.sportninja.com/org/” in the URL and copy it, e.g. “q7zZ1CGtezcV2qUG”
F. Back in your website editor or CMS, paste this as the value for the window.snPlugin.renderOrg argument.
G. That’s it!
4. Render Competition Schedule / Standings / Statistics
To render a competition, follow the steps in Step 2, but in the search menu, select the “Competitions” button instead and modify the HTML code in Step 1 to say:
window.snPlugin.renderSchedule("<competition ID goes here>", "schedule");
You can use the last parameter for this method to specify if you want to render the different tabs available for a competition. The available parameters are:
- "schedule" - Competition Schedule
- "standings" - Competition Team Standings
- "statistics" - Competition Player Statistics
- "suspensions" - Competition Suspensions
If you wish to render a sub-competition, select one from the filter of the parent competition. On the same competition page: find the text after
“app.sportninja.com/schedule/<schedule ID>?Division=” in the URL and copy it, e.g. “W9DNdowiL6PZXy6K”
Please direct any questions to:
https://sportninja.zendesk.com/hc/en-us