99 Club Studio · Widget deep-dive

School website widgets – detailed guide

This page is the detailed widget-only reference. If you are deciding between a normal link, school button/card, PNG image, website pack or widget, start with the complete School Website Integration Help.

Open Widget Builder
The most important thing to know: 99 Club Studio never changes your school website by itself. Studio creates an embed code. An authorised member of school staff must paste that code into the school website editor and publish the page.

First: choose the easiest method for your school

99 Club Studio offers several ways to put home practice on a school website. A widget is convenient because one embedded panel can contain several Club levels, puzzle packs or online games. It is not the only option.

1

Plain link or school-made button

Simplest and most compatible. Copy a parent-practice link from Studio and attach it to a normal button or text link in the school website editor.

2

PNG card image

Download a ready-made card image, upload it to the school website, then make that image link to the matching practice URL.

3

Website card HTML

Useful when the website editor accepts custom HTML. Paste the supplied card code into a Custom HTML or Code block.

4

School website widget

Best when you want several choices in one neat panel. Paste one iframe/embed code into a Custom HTML, Embed or Code block.

If your school website blocks iframe/embed code, nothing is broken: use the plain-link, PNG-card or website-card route instead.

Website words explained in plain English

Different school website systems use different names. You may see one or more of these:

  • Website editor / CMS: the system you log into to change pages on the school website.
  • Page: the school webpage where you want the practice choices to appear.
  • Block / content block: a section you add to a page, such as Text, Image, Button, Embed or HTML.
  • Custom HTML / Code / Embed: the type of block that lets you paste the widget code supplied by 99 Club Studio.
  • Embed code: the small piece of text beginning with <iframe that displays the 99 Studio widget.
  • Widget URL: the web address inside the embed code. It contains the public widget configuration.
  • Preview: a way to check the page before publishing it for parents.
  • Publish / Save / Update: the website editor's action that makes your changes live.
If your editor does not have a block called "Embed": look for names such as Custom HTML, HTML, Code, Source, External content or iframe. If none of those exist, use the PNG or plain-link method.

Create a 99 Club Widget

The 99 Club Widget is for 11 Club through 99 Club and the Bronze, Silver, Gold, Platinum and Diamond post-99 challenges. Each level keeps the school-selected maths rules.

  1. Open the main 99 Club Studio worksheet generator.
  2. Add the school name and logo if you want them used in the widget.
  3. Choose the ruleset scheme your school uses and configure the Club levels normally.
  4. Open Create parent links.
  5. Find Alternative: 99 Club Widget and choose Open widget builder.
  6. The Widget Builder opens separately and imports the current Club rules, school name and a compact copy of the logo.
  7. Under Widget type, leave 99 Club selected.
  8. Under School identity, check the school name and logo. You can replace or remove the logo here without changing the main worksheet setup.
  9. Under 99 Club levels, tick only the levels you want parents to see. Use All or None if that is faster.
  10. Check the Parent preview on the right-hand side.
  11. When ready, choose Copy embed code.
Changing the tick boxes changes only visibility. To change the actual maths rules for a Club level, return to the normal 99 Club editor, change the rules there, then reopen the Widget Builder from Create parent links.

Create a Maths Games Widget

The Maths Games Widget can contain two kinds of parent choice: printable puzzle packs and online games. You may use either or both.

Add a printable puzzle pack

  1. Open Maths Games & Puzzles.
  2. Choose the year range, curriculum topics, puzzle types and difficulty/settings you want.
  3. If you use My vocabulary, add or review the terms and definitions before sharing.
  4. Add the school name and logo if required.
  5. Open Create parent link / Share this puzzle setup.
  6. Choose Open widget builder. The current locked pack is added automatically.
  7. The Widget Builder opens as a Maths Games Widget and adds that locked puzzle pack.
  8. To add a second different pack, return to Maths Games & Puzzles, change the setup, create the new parent link and add that pack too.

A widget can currently contain up to four separately configured printable packs. For example, a school could offer Year 4 Arithmetic, Upper KS2 Number Logic and Vocabulary Practice as separate parent choices.

Add online games

  1. In the Widget Builder, find Online games.
  2. Tick only the games you want parents to see.
  3. Keep the list purposeful. A smaller curated set is usually easier for families than the full catalogue.
  4. If the widget has both printable packs and online games, choose which section should open first under Default section.

School name and logo

The school name and logo are deliberately visible in the public widget so parents can recognise that the practice has been selected by their school.

The Widget Builder creates a smaller web copy of the uploaded logo so the embed code remains practical. The school name and compact logo are stored inside the public widget configuration. Do not use a logo you do not have permission to publish.

The school identity in the widget is separate from the school website itself. Removing a logo from the Widget Builder does not remove images from the school website media library, and changing the school website logo does not automatically change an existing 99 Studio widget.

Put the widget on the school website

The exact buttons vary between website systems, but the process is normally the same.

  1. In 99 Club Studio, finish the widget and check the Parent preview.
  2. Choose Copy embed code.
  3. Open the school's normal website editor and sign in with your authorised account.
  4. Open the page where the widget should appear, or create a new page if appropriate.
  5. Add a block that accepts external/embed code. It may be called Embed, Custom HTML, HTML, Code or similar.
  6. Paste the complete code from 99 Club Studio. Do not remove the beginning <iframe or the ending </iframe>.
  7. Save the block.
  8. Use the website editor's Preview function if available.
  9. Check that the widget shows the correct school name/logo and the expected Club levels, puzzle packs or games.
  10. Publish or update the school webpage.
  11. Open the public school webpage in a normal browser and test it again.
Do not paste the embed code into an ordinary text paragraph. If the page literally shows text such as <iframe src=..., the code has been pasted into the wrong type of block. Remove it and use an Embed/HTML/Code block instead.

Does the same link make a new worksheet every time?

Yes - when the parent presses the download button. The published link keeps the school's settings fixed, but the worksheet or puzzle content is generated fresh in the parent's browser.

99 Club

A parent clicks a Club level in the widget and sees a simple parent-practice page. When they press Download a new worksheet + answers, Studio generates a fresh set of questions using the school's fixed rules. Pressing the button again creates another fresh worksheet.

Printable puzzle packs

A parent clicks the selected puzzle pack and sees a simple summary. When they press Download a new puzzle pack + answers, Studio generates fresh puzzles using the locked school-selected years, topics, engines and difficulty settings. Pressing again creates another fresh pack.

The school therefore publishes one stable-looking choice, while families can generate repeated practice without the teacher uploading new PDFs every week.

Change a widget later

99 Club Studio does not hold school accounts and does not remotely edit the school website. Updating a live widget is therefore a deliberate two-stage process.

  1. Open the current school widget in the school's website editor and copy its existing embed code or widget URL.
  2. Open the Widget Builder.
  3. Find Import / handover.
  4. Paste the existing widget URL or full embed code.
  5. Choose Recreate existing widget.
  6. Studio reconstructs an editable copy of the public configuration.
  7. Make the changes and check the Parent preview.
  8. Choose Copy embed code again.
  9. In the school website editor, replace the old widget embed with the new one.
  10. Preview, publish and test the public page.
Recreating a widget does not change the live school website. Someone could copy a public widget and make their own version, but they cannot alter what appears on the school's website without authorised access to the school's website editor.

Save a backup and hand the job to another member of staff

The builder remembers its current draft in the browser, but browser storage should not be treated as the school's permanent record.

  1. In the Widget Builder choose Save widget setup.
  2. Store the downloaded JSON file somewhere appropriate for school operational files rather than only in Downloads.
  3. If another member of staff takes over, they can open the Widget Builder and choose Restore widget setup.

If the backup file has been lost, the published widget itself can still be reconstructed by copying its public URL/embed code and using Recreate existing widget.

The school should also keep the separate Save school configuration backup for 99 Club rules and/or Save puzzle setup backups for important puzzle configurations. Those files preserve the editable source settings; the widget is the public presentation layer.

Custom vocabulary: useful, but remember it is public

Maths Games & Puzzles can use school-entered terms and definitions in vocabulary activities such as Word Search and Crossword. When a shared puzzle pack needs those entries, the relevant terms and definitions are included in its locked public parent-practice link so the activity can be reproduced.

The Widget Builder clearly marks packs that contain public vocabulary, for example 7 public vocab entries.

  • Use curriculum vocabulary, mathematical terminology, definitions and similar teaching content.
  • Do not put pupil names, email addresses, parent information, internal comments, passwords or other private information into vocabulary intended for a public widget.
  • If a vocabulary pack changes, create a new locked pack and update the website widget.

What is public and what is not?

A school website is public, so anything required to display the widget must be treated as public information.

  • Public in a widget: selected Club levels, maths-rule differences needed for those levels, selected online game IDs, locked puzzle-pack links, school name, compact school logo and any custom vocabulary required by a shared puzzle pack.
  • Not required: pupil accounts, parent accounts, teacher passwords, school website passwords, class lists, pupil scores or pupil progress records.
  • Publishing control: 99 Club Studio creates the widget code, but only someone who can edit the school's website can make that widget appear or change on the school's public page.

See the main Privacy & analytics page for wider site information.

Troubleshooting

I pasted the code and the page shows <iframe...> as text

You have probably used an ordinary Text block. Remove that text and add an Embed, Custom HTML, HTML or Code block instead.

The website editor removes the iframe or says embeds are not allowed

Your website platform or school policy may block external embeds. Use the existing plain-link, PNG-card or website-card method instead. These are fully supported alternatives, not second-class fallbacks.

The widget is too short and has a scrollbar

Some website editors overwrite iframe dimensions. If the editor exposes a height setting, increase it. If the editor strips all sizing controls, the PNG/card route may give a cleaner result.

The widget is extremely narrow

Check that the widget has been added to a normal full-width content area rather than a narrow sidebar or small column.

The logo looks wrong

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 changed the Club rules but the website still uses the old rules

Published links are intentional snapshots. Reopen the widget from the current 99 Club setup, create the revised widget embed and replace the old embed on the school website.

I changed a puzzle pack but parents still get the old version

The existing locked pack keeps its old settings. Add the revised puzzle setup to the Maths Games Widget, remove the old pack if necessary, then publish the new widget embed.

I am taking over from another teacher and do not have their files

If the widget is still live, copy its URL/embed code from the school website editor and use Recreate existing widget. For deeper editing of Club or puzzle rules, restore the school's saved configuration files if available, or configure the source activities again in Studio.

The widget works in preview but not on the public page

First confirm that the school page was actually published rather than only saved as a draft. Then check whether the public website applies stricter embed/security rules than the editor preview. If it does, use the plain-link or PNG method.

Before publishing: teacher-friendly checklist

  • Correct school name shown?
  • Correct school logo shown?
  • Only the intended 99 Club levels visible?
  • Only the intended puzzle packs and online games visible?
  • Any public custom vocabulary checked for private/pupil information?
  • Each Club link opens the expected Club level?
  • A test 99 Club PDF downloads and contains fresh questions + answers?
  • Each printable puzzle pack opens with the expected year/topics/games?
  • A test puzzle pack downloads and contains fresh puzzles + answers?
  • Online games open correctly?
  • Widget tested on both a phone and a desktop/laptop?
  • School webpage saved/published, not left as a draft?
  • Widget setup JSON saved somewhere sensible for staff handover?
  • School's normal website/safeguarding/data-protection approval process followed?

If you are still unsure which route to use

Use the simplest route that your school website editor supports reliably:

  1. Normal link/button if you want maximum compatibility.
  2. PNG card + link if you want something visual without custom code.
  3. Website card HTML if the editor supports custom HTML but you do not need a multi-choice panel.
  4. Widget if the editor supports iframe/embed code and you want several school-selected choices in one tidy panel.

All four routes lead to the same locked parent-practice system. The difference is only how the choices are presented on the school website.

One final reassurance: if you make a mistake while experimenting in the Widget Builder, you have not changed the school website. Nothing becomes live until an authorised website editor deliberately replaces/pastes the embed and publishes the school page.