Embedding the Widget

The roster widget is a self-contained JavaScript bundle. Two lines of HTML drops it into any existing website, including WordPress, Wix, Squarespace, plain HTML, etc.

Basic embed

<div id="canteen-roster"></div>
<script src="https://apps.ngit.com.au/embed/<your-slug>.js"></script>

Replace <your-slug> with your actual club slug (find it in Settings → Slug or in your roster URL).

What it gives you

• A roster card stack styled with your accent colour.
• Inline volunteer signup (name, optional email, click).
• Past rounds locked automatically (Sydney timezone).
• "Powered by Nick Grentell Web & I.T." footer (small, unobtrusive).
• Mobile-responsive; tap targets and modals adapt to phone screens.

Override the accent colour per-embed

Useful if you want the widget on a page with a different background:

<div id="canteen-roster"></div>
<script
  src="https://apps.ngit.com.au/embed/<your-slug>.js"
  data-accent="#003087"
  data-accent-text="#ffffff"
></script>

Hex colours only. Falls back to your saved Settings if not provided.

Custom-domain embed

If you've set up a custom domain (see Custom Domains), use it for slightly faster loads and a cleaner script tag:

<div id="canteen-roster"></div>
<script src="https://apps.yourclub.com.au/embed/<your-slug>.js"></script>

Multiple embeds on one page

Each embed needs its own container id. Pass it via data-target:

<div id="under-12s"></div>
<script src="https://apps.ngit.com.au/embed/club-12s.js" data-target="under-12s"></script>

<div id="seniors"></div>
<script src="https://apps.ngit.com.au/embed/club-seniors.js" data-target="seniors"></script>

(For most clubs you'll only need one.)

Styling concerns

The widget injects its own scoped CSS (every class is prefixed with cr-). It will NOT clash with your site's existing styles, and your site's styles will NOT bleed in.

If your site has a very narrow content column (under 320px), the widget may look cramped on the slot rows. Consider giving the embed container min-width: 360px or putting it in a wider column.

Hosting on WordPress

In the block editor:

1. Add a Custom HTML block.
2. Paste the two-line embed.
3. Publish.

Avoid the visual editor; it can mangle the script tag.

SEO and sharing

The standalone URL (apps.ngit.com.au/<slug>/rosters/ or your custom domain) is fully indexable and has its own Open Graph / favicon. Use it in newsletters and social posts. The embedded version is tied to your host page, so it inherits whatever meta tags your host page has.