How to Embed a Bingo Card on Your Website or Blog (One Line of Code)

If you run a blog, classroom portal, or event page, you can add a playable bingo card to it in under a minute. One line of HTML. No coding knowledge required. No API key. No account. Completely free. Visitors can play the card directly on your page without being redirected anywhere.

What You Get with an Embedded Bingo Card

When you embed a BingWow card, your visitors get a fully interactive bingo experience directly on your page. That means:

• Clickable squares — visitors tap or click squares to mark them as they play along.
• Mobile-responsive layout — the card scales cleanly on phones, tablets, and desktops. No horizontal scrolling.
• No redirects — everything happens inside the embed. Visitors do not leave your page to play.
• Visual feedback — marked squares change appearance so players can track their progress at a glance.

The embed is genuinely playable — not a screenshot or a static image. If you are embedding a holiday bingo card into a classroom lesson, students can play it right there in Google Classroom. If you are adding it to a blog post, readers can engage with it without opening a new tab.

How to Get the Embed Code

Getting the embed code for any card takes three steps:

1. Find a card or create your own — Browse cards at /cards or create a custom card at /create. You can embed any card on the site, including cards you create yourself.
2. Open the card page — Navigate to the card you want to embed. Look for the share or embed option on the card detail page.
3. Copy the iframe code — The embed code is generated automatically. It looks like this:

<iframe
  src="https://bingwow.com/embed/cards/YOUR-CARD-SLUG"
  width="100%"
  height="600"
  frameborder="0"
  allow="clipboard-write"
  style="border-radius: 12px; max-width: 500px;">
</iframe>

Replace YOUR-CARD-SLUG with the slug of the specific card you want to embed. You can find the slug in the card's URL — it's the unique identifier at the end, like office-holiday-party-bingo-x4r2f.

Paste the code into your site's HTML editor and the card renders immediately. No JavaScript, no dependencies, no configuration.

Platform-Specific Instructions

The iframe code works identically on every platform — the only difference is where you paste it. Here is a quick guide for the most common website builders.

WordPress. In the block editor, add a “Custom HTML” block (search “HTML” in the block inserter). Paste the iframe code into the block. Preview or publish to see the card. Works in both the classic and Gutenberg editors.

Squarespace. Add a “Code” block anywhere on your page. Switch to the code view and paste the iframe. Squarespace renders iframes from Code blocks on published pages — it may not show in live preview.

Webflow. Add an “Embed” element from the Add panel. Open the HTML editor and paste the iframe code. The card will appear in your Webflow canvas and on the published site.

Google Sites. Click Insert → Embed. Paste the full iframe URL (just the src value, without the iframe tags) into the “Embed URL” field. Google Sites renders it as a live embed.

Notion. Type /embed to insert an Embed block. Paste the BingWow card URL into the embed field. Notion renders the card inline in your page.

Use Cases

The embed opens up a lot of creative options beyond just “put a bingo card on a page.” Here are some of the most effective ways people are using it:

Teachers embedding bingo in Google Classroom lesson plans. A holiday vocabulary bingo card embedded directly in the lesson plan means students can play it from the assignment page. No separate links, no confusion about which card to use. Teachers have been using this pattern for end-of-unit reviews, seasonal activities, and vocabulary reinforcement exercises.

Bloggers adding interactive games to round-up articles. If you write a “50 party ideas for summer” article and one of those ideas is a bingo game, you can embed a playable card directly in the post. Readers interact with your content instead of bouncing to a separate site. It is a meaningful increase in time-on-page.

Event organizers putting a pre-game card on the landing page. Running a conference, fundraiser, or community event? Embed an event-specific bingo card on the event page so attendees can preview and play before the day. They show up already knowing how to use it.

Email newsletters that link to embedded cards. You cannot embed an iframe in an email, but you can link to a page that has one. Create a simple landing page with an embedded card and link to it from your newsletter. Subscribers click through to an interactive experience rather than a static article.

Tips for Best Results

A few practical notes to make sure your embed looks and works its best:

• Set max-width: 500px — bingo cards are square-ish and read best when they are not stretched across a full-width container. 400-500px is the sweet spot for readability on desktop.
• Use a responsive wrapper — set width="100%" on the iframe so it scales down gracefully on mobile. Pair with max-width on the container element.
• Test on mobile before publishing — open your page on a phone and verify the card is fully usable. Tap a few squares to confirm touch interaction works.
• Choose a card that matches your audience — a Christmas bingo card on a holiday recipe blog is relevant and earns engagement. A random card drops into an article with no context and gets ignored.