99 Club Studio · School website integration help

Adding 99 Club Studio to your school website

Practical guidance for adding 99 Club Studio practice to a school website using ordinary links, visual cards or an embedded widget.

Not sure which route to use? Open the fictional school website demo → to compare buttons, cards and widgets side by side. For most schools, a normal link/button or PNG card is the easiest place to start.

Choose the easiest method for your school

All of the options below open the same school-selected practice. The difference is simply how those choices appear on the school website.

1

Plain link or your website's own button/card

Best starting point. Copy the parent-practice URL from 99 Club Studio and attach it to a normal text link, button, image tile or card created inside the school website editor.

2

Ready-made website card HTML

Useful when your website editor accepts Custom HTML/Code. 99 Club Studio supplies a complete compact card with the badge, description and link.

3

Downloadable PNG card image

Useful when your website editor is happier with normal images than HTML. Upload the PNG and attach the matching practice URL to it.

4

Complete website pack

Useful when a maths lead wants to hand everything to another member of staff or a website administrator in one ZIP file.

5

School website widget

Best for several choices in one neat panel. A 99 Club Widget can show several Club levels; a Maths Games Widget can show printable puzzle packs and online games.

If you are unsure, start with a plain link or PNG card. Widgets are useful but they are optional. If your school website does not allow iframe/embed code, use one of the other methods instead.

Before you start: what you need to know

Different school website systems use different words for the same things. You may see:

  • Website editor / CMS: the system you log into to edit the school website.
  • Page: the public webpage where parents will see the practice link/card/widget.
  • Block / content block: an item added to a page, such as Text, Image, Button, HTML, Code or Embed.
  • Link / URL: the web address a button or image opens when clicked.
  • Custom HTML / HTML / Code: a block that accepts website code rather than ordinary paragraph text.
  • Embed / iframe: a block that displays part of another website inside the school webpage. This is what the optional widget uses.
  • Preview: a way to check a page before publishing it.
  • Publish / Save / Update: the action that makes the change live for parents.

99 Club Studio gives you the link, card or widget code to add using your school’s normal website editor. It does not need your school website login.

Option 2: use the ready-made website card HTML

99 Club Studio can copy a ready-made website card containing the badge, title, short description and practice link.

  1. Configure the Club level or puzzle pack in 99 Club Studio.
  2. Open the relevant parent-sharing panel.
  3. Choose Copy website card.
  4. In the school website editor, add a Custom HTML, HTML, Code or equivalent block.
  5. Paste the copied card code into that block.
  6. Preview the page before publishing.
  7. Check that the card image, title and description appear correctly and that clicking the card opens the expected parent-practice page.

The card contains only a normal <a> hyperlink, image, text and styling. It does not contain a script or iframe.

If the page displays the HTML itself as text — for example <a href=... — it has been pasted into a normal Text block. Remove it and use a Custom HTML / HTML / Code block instead. If your school website removes the styling, use the PNG or plain-link method.

Option 3: use a downloadable PNG card image

This is usually the easiest visual method when the website editor supports images and links but blocks custom HTML.

  1. Configure the Club level or puzzle pack and open its parent-sharing panel.
  2. Choose Download card image. 99 Club Studio creates a high-resolution PNG.
  3. Choose Copy link for the same Club/pack.
  4. Upload the PNG to the school website's normal image/media library.
  5. Add the image to the page.
  6. Use the website editor's option to make that image clickable.
  7. Paste the copied practice URL as the image destination.
  8. Add meaningful alternative text, for example 33 Club home practice – printable worksheet and answers.
  9. Preview and publish the page.
  10. Click the image on the public page to verify that it opens the matching practice setup.
The PNG itself does not contain the clickable link. The school website administrator must attach the matching practice URL to the uploaded image.

Option 4: Download the complete website pack

The website pack is designed for handover. A maths lead can configure the practice in 99 Club Studio, download one ZIP and give that ZIP to the person who manages the school website.

99 Club website pack

Download website pack creates a ZIP containing:

  • all 14 PNG card images, from 11 Club through Diamond;
  • practice-links.csv, matching every Club to its practice URL;
  • a README.html with setup instructions; and
  • 99-club-school-configuration.json, so the Club rules can be restored later.

Copy all links provides the Club-to-URL mapping directly if a ZIP is unnecessary.

Puzzle website pack

The puzzle website pack contains the current pack’s PNG card, practice link, short setup guide and restorable puzzle configuration.

Keep the configuration file as well as the images. The image/card is the public presentation. The saved configuration file helps another member of staff recreate and edit the setup later.

Option 5: use School Website Widgets

Widgets are the compact multi-choice option. They are useful when the school wants several activities visible in one neat embedded panel instead of placing lots of separate buttons/cards on the webpage.

99 Club Widget

The 99 Club Widget can show any selection of 11–99 and Bronze, Silver, Gold, Platinum or Diamond. Each visible level keeps the school-selected maths rules.

  1. Configure the Club rules in the normal 99 Club Studio editor.
  2. Open Create parent links.
  3. Choose Open widget builder in the Alternative: 99 Club Widget section.
  4. Check the imported school name and logo.
  5. Tick only the Club levels you want parents to see.
  6. Check the live Parent preview.
  7. Choose Copy embed code.

Maths Games Widget

The Maths Games Widget can contain school-selected printable puzzle packs, selected online games, or both.

  1. Configure a printable puzzle pack in Maths Games & Puzzles.
  2. Open its parent-sharing panel.
  3. Choose Open widget builder. The current pack is carried into the builder automatically.
  4. The Widget Builder opens with that pack included.
  5. To add a different printable pack, return to Maths Games & Puzzles, configure another setup and add that pack as well.
  6. In the Widget Builder, tick any online games you want parents to see.
  7. If both Printable puzzles and Play online are present, choose which section opens first.
  8. Check the Parent preview and choose Copy embed code.

Put a widget on the school website

  1. Copy the widget's complete embed code from 99 Club Studio.
  2. Open the school's normal website editor.
  3. Open the page where the widget should appear.
  4. Add an Embed, Custom HTML, HTML, Code, External content or equivalent block.
  5. Paste the complete code beginning with <iframe and ending with </iframe>.
  6. Save the block and preview the page.
  7. Check the school identity and the visible activities.
  8. Publish the page and test the public version.
If the page literally shows <iframe ...> as text, the code has been pasted into an ordinary Text block. Remove it and use an Embed/HTML/Code block instead. If the school website blocks external embeds completely, use the plain-link, HTML-card or PNG methods above.

School name and logo

The widget can show the school's public name and logo so parents can recognise who selected the practice. The Widget Builder creates a small web copy of the logo so the embed remains practical. School name/logo in a widget are public presentation content.

Separate builders

The 99 Club Widget and Maths Games Widget are separate tools. The 99 Club builder only manages Club practice; the Maths Games builder only manages printable puzzle packs and online games.

Share a Maths Games & Puzzles pack

Set up the teaching focus, selected puzzle types, difficulty and game options in Maths Games & Puzzles, then choose Create parent link.

The shared page keeps those choices fixed for parents. They get a simple download page rather than the full puzzle editor.

If the school wants several choices — for example Arithmetic fluency, Number logic and Vocabulary practice — create each setup separately. Publish them as individual links/cards or collect them in a Maths Games Widget.

Save the setup for later

Save puzzle setup downloads the editable configuration. Restore puzzle setup can load it on another computer or after browser data has been cleared.

Does the same published link create fresh practice?

Yes. The school-selected settings remain fixed, but the actual worksheet or puzzles are freshly generated when the parent presses the download button.

99 Club

A parent clicks a Club link/card/widget choice. The parent-practice page opens with the school's fixed maths rules. When the parent presses Download a new worksheet + answers, 99 Club Studio generates fresh questions. The PDF uses the school's public name and logo and automatically prints the date it is generated, overriding any worksheet date entered earlier in the teacher editor. Pressing the button again creates another fresh worksheet using the same rules.

Printable puzzle packs

A parent clicks the pack link/card/widget choice. The school-selected pack settings open. When they press Download a new puzzle pack + answers, 99 Club Studio generates fresh puzzles using the same selected teaching focus, game types and difficulty settings. The PDF uses the school's public name and logo and automatically prints the date it is generated, overriding any date from the teacher setup. Pressing again creates another fresh pack.

This means the school can publish one stable-looking practice choice without uploading new PDFs every week.

Change published practice later

Published links and widgets keep the setup that was shared at the time. If you change the rules in 99 Club Studio, create a new link/card/widget and replace the old one on the school website.

Link, button or PNG card

  1. Make the changes in 99 Club Studio.
  2. Create the new parent-practice link.
  3. If needed, download a fresh card image.
  4. Replace the old link/card on the school website and test it.

Widget

  1. Open the Widget Builder and recreate or restore the existing setup.
  2. Make the changes and check the Parent preview.
  3. Copy the new embed code.
  4. Replace the old embed on the school website and test it.

Save, restore and hand over the setup

Save the school's club configuration

99 Club Studio remembers Club edits in the current browser, but browser storage is not a long-term backup. Open Create parent links and choose Save school configuration.

The downloaded file contains the rules for all 14 parent-practice levels, print orientation and school setup needed to restore the configuration later.

Save the puzzle setup

Use Save puzzle setup for important printable-puzzle configurations. It preserves all game/pack settings and saved vocabulary.

Save the widget setup

In the Widget Builder choose Save widget setup. Another member of staff can use Restore widget setup. If the file is lost but the widget is still live, the public widget URL/embed can be pasted into Recreate existing widget.

Keep backups somewhere independent of the browser. A shared school drive or another suitable staff-controlled location is much better than leaving the only copy in Downloads on one person's laptop.

Personal vocabulary

If a shared puzzle pack uses relevant entries from My vocabulary, the required terms and definitions are included in the shared parent-practice link so Word Search or Crossword can reproduce the intended activity.

A Maths Games Widget keeps those shared pack links and marks when public vocabulary is present.

  • Use mathematical terminology, curriculum vocabulary and teaching definitions.
  • Do not use pupil names, email addresses, parent information, passwords, internal notes or other private information.
  • If the vocabulary changes, create a new shared pack and update the published website link/card/widget.

Privacy and public content

School website links and widgets are public, so use only information you are happy to publish. A school name/logo and any custom vocabulary included in a shared activity may be visible to anyone who can open that link or widget.

These sharing options do not require pupil or parent accounts, class lists, pupil scores or pupil progress records.

For details about analytics, browser storage and shared practice links, see Privacy & analytics.

Troubleshooting

The page shows code such as <iframe...> or <a href=...> instead of a widget/card

The code was probably pasted into a normal Text block. Remove it and use an Embed, Custom HTML, HTML or Code block.

My school website does not allow iframe/embed code

Use a plain link/button, ready-made HTML card (if HTML is allowed) or PNG card. Widgets are optional; the other routes are fully supported.

The website editor removes the card styling

Use the PNG card or your website editor's own button/card component and attach the copied parent-practice URL.

The PNG looks fine but clicking it does nothing

The PNG itself is only an image. Edit that image on the school page and attach the matching copied practice URL as its link.

The wrong Club level or old rules open

The published URL keeps the setup that was shared at the time. Generate a new parent link from the current rules and replace the old URL on the school website.

The puzzle pack still uses the old setup

Generate a new parent link from the revised puzzle setup. Replace the old website link/card or update the Maths Games Widget.

The widget is too short and has a scrollbar

Some website editors override iframe dimensions. Increase the height if the editor provides a height setting. If it does not, a card/PNG layout may be cleaner.

The widget is very narrow

Move it into a normal full-width content area rather than a sidebar or narrow column.

The logo looks poor

Return to the Widget Builder, remove the logo and choose it again. Simple PNG, JPEG or WebP school marks work best. Then copy the updated embed and replace the old one on the school website.

I am taking over from another teacher

Use the saved school/puzzle/widget configuration files if available. If a widget is still live but the widget backup is missing, copy its URL/embed code from the school website editor and use Recreate existing widget.

It works in the website editor preview but not on the public site

First confirm that the page was actually published rather than left as a draft. Some platforms also apply stricter public-site security rules to embeds. If the iframe is blocked on the public site, switch to the plain-link or PNG method.

Before publishing: quick check

  • Correct school page?
  • Correct Club level or puzzle setup?
  • Correct school name/logo where used?
  • If using vocabulary, checked that there is no pupil/private information?
  • Plain links/buttons open the expected parent-practice page?
  • HTML cards render as cards rather than code text?
  • PNG card image has the matching URL attached?
  • Widget shows only the intended Club levels/puzzle packs/games?
  • Generated one test 99 Club worksheet + answers?
  • Generated one test puzzle pack + answers?
  • Confirmed a second download creates fresh questions/puzzles?
  • Tested the school webpage on a phone?
  • Tested it on a desktop/laptop?
  • Page is published, not merely saved as a draft?
  • Important school/puzzle/widget configuration files saved for handover?
  • School's normal website, safeguarding and data-protection approval process followed?

Which option should I choose?

If you want the short answer:

  1. Use a normal link/button for maximum compatibility.
  2. Use a PNG card + link when you want something visual and easy to manage.
  3. Use the ready-made website card HTML when the website accepts custom HTML.
  4. Use the website pack when one member of staff is handing the job to another.
  5. Use a widget when the website accepts iframe/embed code and you want several school-selected choices in one tidy panel.