How to Embed a Board on Your Website

Embed any MakeTheBoard leaderboard, scoreboard, or goal tracker directly on your website. The embedded board updates in real time and matches your board's theme and colors.

Requirements

Embedding requires the Premium plan or higher. The embed feature is controlled by the embed_enabled setting on your board. Upgrade from the pricing page if you're on the Free plan.

The embed URL format

Every board has a dedicated embed URL that strips away navigation and headers for a clean, minimal view:

Embed URL

https://maketheboard.com/embed/your-board-slug

Replace your-board-slug with your board's share slug. You can find this in the Share modal on your dashboard — it's the part after /b/ in your public URL.

Example HTML code

Copy and paste the following snippet into your website's HTML where you want the board to appear:

Embed code

<iframe
  src="https://maketheboard.com/embed/your-board-slug"
  width="100%"
  height="600"
  frameborder="0"
  style="border-radius: 8px; border: none;"
  allowfullscreen
></iframe>

What the embed looks like

The embedded view is a streamlined version of your public board. It includes scores, names, and your chosen theme — without the site header or footer.

Responsive embed tips

Set width="100%" so the iframe fills its container on any screen size.
A height between 500px and 800px works well for most boards. Adjust based on the number of rows you display.
For a fully responsive height, wrap the iframe in a container with aspect-ratio or use JavaScript to resize dynamically.
The embed works on any platform that supports iframes: WordPress, Squarespace, Wix, Notion, Ghost, Webflow, and custom HTML sites.
On mobile, the board automatically adapts to narrower widths with a compact layout.

Troubleshooting

Embed not loading? Make sure your board has embedding enabled. Check the board settings or confirm you are on the Premium plan.
Blank iframe? Verify the share slug is correct and that the board is not paused or deleted.
Styling conflicts? Add style="border: none;" to remove any default browser border on the iframe.

Sharing & Embedding Overview

Links, TV display, and QR codes

Customization

Colors, themes, and branding