How to embed a tournament bracket on your website

Your bracket already lives at a shareable link. Embedding puts it on your own page instead, where your audience already is — and keeps it updating as results come in.

Create a bracket to embed

The short version

If you only read one section, read this one. Everything below is elaboration.

Create your bracket and start it. Draft brackets deliberately refuse to embed — they are unfinished work, and publishing a half-built participant list by accident is worse than a missing widget.
Open the tournament's management page and choose Embed. You get a live preview and three snippets: a responsive one, a plain iframe, and a WordPress-flavoured variant.
Paste the snippet into an HTML block on your page. Not a text or paragraph block — those escape the code and show it as literal text.
The bracket refreshes on its own roughly once a minute. Nobody has to re-paste anything when a match result changes.
If you ever need to pull it back, one toggle on the same page removes the bracket from every site that embedded it.

Build a bracket now →

What embedding actually does

An embed is a small window on your page that displays a document served from somewhere else. Your page provides the frame and the position; the bracket itself is still rendered and updated by BracketDraw. That split is the whole point. You do not copy the bracket, so it cannot go stale. You do not host it, so a busy tournament weekend does not become your hosting problem. And because the bracket is a document rather than a script running inside your site, it cannot read or change anything else on the page it sits in. The browser enforces that boundary, not our good intentions.

Why organisers embed instead of linking

A link sends people away. For a club, a league, or a school that spent effort building an audience on their own site, that is a real cost — every click out is a chance the visitor does not come back for the sponsor banner, the registration form, or next week's fixture list. An embedded bracket keeps attention where you want it while still giving people the thing they came for. There is a practical benefit too: the people who most want live results are exactly the people who will refresh a page repeatedly during an event. Better that page is yours.

Which snippet to use

Three variants exist because website platforms differ in what they allow. Pick by what your platform permits, not by what looks most advanced.

Responsive snippet (recommended where scripts are allowed)

A tiny loader script measures the bracket and sizes the frame to match, so there is no inner scrollbar and no empty space below a small bracket. The script does exactly one thing: it creates the frame and listens for a height. It never renders anything into your page and never touches the rest of your DOM. This is the same containment model used by video and payment embeds, and it is why the responsive option is safe to recommend by default.

Plain iframe (works everywhere)

One HTML tag, no JavaScript at all. You pick a height and the bracket lives inside it. Many hosted site builders strip custom scripts from user content, which makes this the option that actually works rather than the option that looks best. A small elimination bracket fits comfortably in about 400 to 500 pixels; a large one or a round-robin table wants 700 or more. Set it once, look at it on a phone, adjust if needed.

WordPress variant

Functionally the plain iframe, with the one instruction that trips people up most often attached as a comment: it must go in a Custom HTML block. WordPress's paragraph block escapes HTML on purpose, so pasting the snippet there displays the code as text. That single mistake accounts for the large majority of embeds that appear not to work.

Step by step

The flow is the same on every platform; only step three differs in where you click.

1
Create and start your bracket
Add participants and start the tournament. Until it starts, the bracket is a draft and will not embed — a deliberate guard, not an oversight.
2
Open the embed page
From the tournament's management screen, choose Embed. This page is visible only to you as the organiser.
3
Adjust the preview
The preview is a real embed of your real bracket, not a mockup. Set the height until it looks right, then decide whether to keep the credit line.
4
Copy the snippet
Pick the variant that matches your platform and copy it. The snippet already contains your tournament's address; there is nothing to fill in.
5
Paste it into an HTML block
On every platform, the target is a block that accepts raw HTML — named Custom HTML, Code, or Embed depending on who built the editor.
6
Publish and check on a phone
Most embed complaints are mobile layout complaints. Look at the published page on a narrow screen before you announce it.

Platform-by-platform

The names of the blocks change; the idea does not.

WordPress

Edit the page, add a block, and search for Custom HTML. Paste the snippet and press preview — the block editor renders the embed inline so you can confirm before publishing. On the classic editor, switch the toolbar from Visual to Text first. If your site runs a security plugin that filters iframes, allow bracketdraw.com in its settings rather than switching to the script snippet; the plugin will usually strip that too.

Squarespace

Add a Code block and paste the plain iframe. Squarespace blocks custom scripts on lower plans, so the responsive snippet may silently do nothing there — use the plain iframe and set a height. Turn off the block's Display Source option, or the page will show your code rather than the bracket.

Wix

Use Embed a Widget, then Embed HTML, then the HTML Code option. Wix gives the embed a fixed box that it will not resize for you, so the plain iframe with an explicit height is the reliable choice. Drag the box larger than you think you need and trim it down once you see the real bracket.

Webflow

Drop an Embed element and paste either snippet — Webflow permits scripts, so the responsive one works. Embeds do not render inside the Designer canvas; use Preview or publish to staging to see the result.

Plain HTML or any other CMS

Paste the snippet anywhere in the body of the page. No stylesheet, build step, or dependency is required. If your site sends a Content-Security-Policy header, add bracketdraw.com to the frame-src directive — a strict policy blocks the frame silently and the page simply shows a gap.

Cookies, consent and what the widget does not do

The embedded bracket sets no cookies and loads no analytics or advertising scripts. That is a deliberate design decision, not a coincidence: an embed that dropped tracking cookies into your page would quietly hand you a consent obligation you never agreed to, and you would be the one answering for it. Because the widget stores nothing on the visitor's device and identifies nobody, it does not need to appear in your cookie banner. It also asks for no permissions — no camera, no microphone, no location — and the browser is instructed to refuse them even if something tried.

Tips for organisers

Put the embed above the fold on event day
During a tournament, the bracket is the reason people visit. Give it the top of the page and move the news feed down for the weekend.
Keep a link to the full bracket alongside it
Large brackets are more comfortable full-screen on a phone. Offering both costs nothing and saves a frustrated visitor.
Embed once, not per round
The widget follows the tournament through to the final. There is no reason to swap snippets between rounds.
Check it on the venue's WiFi
Some venue networks proxy or filter third-party frames. Finding that out the morning of the event is better than during it.

Common mistakes

Pasting into a text block
The page shows the code instead of the bracket. Text and paragraph blocks escape HTML by design. Move the snippet to a Custom HTML, Code, or Embed block.
Embedding a draft
The widget shows a neutral not-published notice rather than the bracket. Start the tournament first; the guard exists so an unfinished participant list is never published by accident.
Guessing a height that is too small
The bracket gets an inner scrollbar and looks broken. Either use the responsive snippet or raise the height until the whole bracket fits at desktop width.
Mixed content on an HTTP page
If your site is still served over plain HTTP, browsers may refuse to load an HTTPS frame in some configurations. Move your site to HTTPS — this is worth doing regardless of the bracket.
A Content-Security-Policy that omits frame-src
The frame is blocked with no visible error and the page shows an empty gap. Check the browser console and add the domain to frame-src.
Expecting instant updates
Results appear in the embed within about a minute, not the same second. That delay is what keeps a widely embedded bracket cheap to serve; refresh once before assuming something is broken.

Embedding FAQ

Does the embedded bracket update by itself?

Yes. When you record a result, the embed picks it up within about a minute without anyone touching the host page. The short delay is intentional — it lets a bracket embedded on a busy site be served from cache instead of being rebuilt for every visitor.

Do I need a paid plan to embed?

No. Embedding works on every plan. On the free plan the widget carries a small Powered by BracketDraw link and the snippet includes a credit line on your page; paid plans can remove the credit line.

Will the widget set cookies on my visitors?

No. It sets no cookies and loads no analytics or advertising scripts, so it does not need an entry in your cookie banner and does not change your consent obligations.

Can visitors enter scores through the embed?

No, and that is deliberate. The embedded view is strictly read-only. Allowing changes inside a frame on a site we do not control would create a well-known class of attack where a hostile page tricks a logged-in organiser into clicking something they cannot see. Results are entered on the management page.

How do I stop a site from showing my bracket?

Turn off Allow embedding on the tournament's embed page. Within about a minute, every site that embedded it shows a short notice instead of the bracket. You do not need to contact the site owner.

Why is the bracket cut off or scrolling inside its box?

The frame is shorter than the bracket. Use the responsive snippet, which sizes itself, or raise the height in the plain iframe. Large brackets and round-robin tables need noticeably more room than a four-team bracket.

Can I change the colours or fonts of the embedded bracket?

Style the bracket in the design editor and the embed follows — layout, colour scheme and background all carry across. Arbitrary CSS from the host page cannot reach inside the frame, which is the same isolation that stops the frame reaching into your page.

Does embedding help or hurt my site's SEO?

The widget itself is marked not-indexable so it never competes with your page in search results. Your page keeps its own content and ranking. Add a short introduction above the bracket if you want the page to say something search engines can read.

Can I embed the same bracket on more than one site?

Yes. There is no limit and nothing to register. Each site pastes the same snippet, and each gets the same live bracket.

What happens after the tournament ends?

The embed keeps showing the finished bracket with the winner, so a results page stays useful long after the event. Nothing needs to be changed or removed.

Related guides

Ready to put a bracket on your site?

Build the bracket first — the embed snippet is waiting on the management page the moment you start it.

Create a bracket