Embed a bracket on your website

What you get

Once a tournament is shared live, you can copy an embed code. It is a short HTML snippet: an iframe that shows the bracket, with a small link to tournamentbracket.org below it. Visitors see the current bracket and can zoom and swipe. They cannot change anything, because the embedded view is read-only.

The frame shows the same view as the public link. In the configurator you choose the height in pixels. Optionally, the height adjusts itself to the bracket. That option needs a small script on your page, and some site builders block scripts.

Step by step

1. Create your tournament in the bracket maker and press "Share live".
2. Open the embed configurator on this page. Choose light, dark or automatic, and set the height. Automatic follows the setting of each visitor's device. Colors cannot be customized beyond that.
3. Copy the code snippet.
4. Paste it into your page as described below.
5. Enter results with your secret edit link. The embedded bracket updates on its own.

WordPress, Wix, Squarespace and plain HTML

WordPress. In the block editor, add a "Custom HTML" block, click "Edit HTML", paste the snippet and click "Update". Preview the page and publish. On WordPress.com, iframes need a paid plan with hosting features.

Wix. Open the editor, click "Add Elements", then "Embed Code" and "Popular Embeds", and choose "Embed HTML". Click the element, click "Enter Code", paste the snippet under "Add your code here" and click "Apply". Make the element wide enough and drag the box taller if the bottom of the bracket is cut off.

Squarespace. Add a Code block to your page and click the pencil icon. Choose "HTML" in the Mode menu, paste the snippet and make sure "Display Source" is turned off. iframes need the Core, Plus or Advanced plan.

Plain HTML. Paste the snippet where you want the bracket to appear in the body of the page. If you use the automatic height, the snippet includes a small script. Nothing from third parties is loaded.

If your editor strips iframes or scripts, look for an "HTML", "Code" or "Embed" element. Some site builder plans block custom code. In that case, link to the public view instead.

What visitors see and live updates

Visitors see the bracket with the highlighted winning path and, after the final, the trophy. On a phone they can swipe sideways. When you enter a result, the update arrives within a moment through a Server-Sent Events connection, which is a standard browser feature for pushing small updates. A visitor who keeps your page open sees the next round fill up while watching.

Several people can have the same page open at the same time. The edit link is not part of the embed, so a visitor cannot find it in the page source.

Privacy for your visitors

The embedded frame sets no cookies and loads nothing from third parties. It only talks to tournamentbracket.org to get the bracket. You do not need a cookie banner for the frame itself, but check your own site for other content. See the privacy page for the full details.

Why the link below the frame should stay

The snippet includes a small link to tournamentbracket.org under the frame. Please leave it in. It is how people who see your bracket find the tool, and it is the only thing we ask in return for a free service without ads. It also helps visitors who want to make a bracket of their own.