No-Script Embed

Some site builders allow HTML but remove inline <script> blocks. For those, put the options on the element as data-* attributes. The loader script mounts every element with data-sportninja when the page loads.

<div data-sportninja
     data-key="pk_sn_Y0JtVvplAnMGm1chyf9gOGckpWu8kXMy"
     data-competition-id="aB12cD34eF56gH78"
     data-initial-tab="standings"
     data-mode="dark"
     data-primary="#1C7ED6"
     data-hide-tabs="announcements,competition.playoffs"
     data-schedule-view="cards"></div>
<script src="https://embed.sportninja.com/embed.js" async></script>

Values follow the same rules as the options and theme. A bad value stops the plugin and lists the problem, exactly as in the script version.

Only elements on the page at load time

The loader looks for data-sportninja once, when the page has loaded. For an element your site adds later (a tab, a modal, a single-page app route), mount it with the JavaScript API instead.

Attributes

Attribute names are the option names in kebab case: headerBackground → data-header-background.

Attribute	Option	Notes
data-sportninja		Marks the element. No value needed.
data-key	key	Required.
data-org-id	orgId
data-competition-id	competitionId
data-team-id	teamId
data-view	view	Optional: worked out from the ID you set (team, then competition, then organization).
data-initial-tab	initialTab	A tab ID.
data-sync-url	syncUrl	"false" turns it off.
data-hide-tabs	tabs	Comma-separated. schedule hides it everywhere; team.roster hides it on team pages only. Uses the switch names.
data-hide-header	display.hideHeader	Present means on; "false" means off.
data-hide-border	display.hideBorder	Present means on; "false" means off.
data-schedule-view	display.scheduleView	rows, cards or calendar.
data-max-height	display.maxHeight	Whole pixels, e.g. 800.
data-max-width	display.maxWidth	Whole pixels, e.g. 960.
data-align	display.align	left, center or right.
data-footer	display.footer	sportninja or hidden.
data-footer-text	display.footer.text	A custom footer; wins over data-footer.
data-footer-link	display.footer.link	Optional, with data-footer-text.

Theme Attributes

Every theme key has an attribute:

Attribute	Theme key
data-mode	mode
data-background, data-text, data-primary, data-border	page colours
data-header-background, data-header-text	header colours
data-content-background	contentBackground
data-button-background, data-secondary-button-background, data-secondary-button-border, data-outline-button-color	buttons
data-link-color	linkColor
data-input-background, data-input-border	fields
data-schedule-header-background, data-schedule-body-background	schedule
data-bracket-background	bracketBackground
data-scoreboard	scoreboard
data-font-family, data-heading-font-family	fonts
data-font-size, data-letter-spacing, data-heading-letter-spacing	numbers, e.g. data-font-size="15"
data-corners	corners
data-spacing	compact, default or a number

Not Available as Attributes

These options need the script version:

• display.todayGamesByDefault
• display.feedOrgId
• display.headerNavigation
• Showing a tab on one page type that you hid everywhere (tabs: { announcements: false, team: { announcements: true } }): attributes can only hide.