Embed the Coin Flip Widget

Paste a single line of HTML on any blog, course page, or article to embed a working coin flip from flip-a-coin.com. Configure below, then copy the generated code.

Configure

Theme
Background
iframe size (in your page)

Minimum 220×280. Below this size, the layout may clip on small phones.

Preview

Embed code

How to use

  1. Pick a coin design and customize the labels (e.g., Yes / No, Go / Stay, or any pair you want).
  2. Choose a theme (auto / light / dark) and a background that matches your site — pick from the palette, or use the color picker for a custom hex value.
  3. Use the Text size slider to scale the heading, result label, and button text up or down. The coin image itself stays the same size.
  4. Adjust the iframe Width and Height to fit your layout. Minimum is 220×280 to avoid clipping on small screens.
  5. Click Copy code and paste the resulting <iframe> tag into your blog post, lesson page, or article.
  6. The widget loads directly from flip-a-coin.com over HTTPS and works on every modern browser, including mobile.

URL parameters

All parameters are optional. You can build any embed URL by hand:

https://flip-a-coin.com/widget/coin/?coin=fcc-yes-or-no&heads=Yes&tails=No&theme=auto&bg=teal&scale=1.2
ParameterValuesDefault
coinany slug from the widget catalog above (e.g., fcc-heads-or-tails, fcc-yes-or-no, usd-25cent, usq-california, ccc-bitcoin)fcc-heads-or-tails
headsany text, up to 30 characters. HTML is stripped.coin’s default heads label
tailsany text, up to 30 characters. HTML is stripped.coin’s default tails label
themeauto | light | dark. auto follows the visitor’s OS color scheme.auto
bgtransparent, a palette key (white, offwhite, dark, teal, beige), or any 3/6-digit #hex color. Text color is auto-contrasted.transparent
scaletext-size multiplier between 0.7 and 2.0 (controls heading, result, and button text; the coin and footer stay the same size)1.0

Examples

Use caseURL
Yes/No decision widget for a blog post/widget/coin/?coin=fcc-yes-or-no
Custom labels for a classroom probability lesson/widget/coin/?heads=Heads&tails=Tails&scale=1.4
Sports site “coin toss” in dark theme/widget/coin/?theme=dark&bg=dark
Bitcoin-themed game widget on a yellow background/widget/coin/?coin=ccc-bitcoin&bg=%23fdf6e3

Tips

  • Responsive sizing. The widget itself scales to fit the iframe. To make the iframe responsive in CSS, use width:100%;max-width:400px on the <iframe> tag.
  • No JavaScript on your site. The widget is a plain <iframe>. You don’t need to add any scripts to your page.
  • Privacy. The widget uses cryptographically secure randomness (crypto.getRandomValues()). No personal data is collected. The widget runs cookie-less inside the iframe (Google Analytics is configured with client_storage:'none'). We do count anonymous flips and the referring host so site-wide statistics stay accurate.
  • Counted in our public stats. Flips performed via the widget appear separately on our Statistics page — never mixed with on-site flips.

Frequently asked questions

Can I remove the “Powered by flip-a-coin.com” link?
The small footer link is required — it’s how we keep the widget free and how new visitors discover the site. The link is intentionally subtle so it does not interfere with your page design.
Does the widget work offline?
No. The widget loads from flip-a-coin.com, so the user must be online when they view your page. If the network is down, the iframe simply shows as an empty area.
Is the coin really fair?
Yes. Each flip is generated from the browser’s Web Crypto API (crypto.getRandomValues()), which is the same cryptographic-quality random source used for security tokens. Over millions of widget flips, the heads/tails distribution converges to 50/50 within fractions of a percentage point.
Can I track results on my own page?
Not yet from inside the iframe. We plan to add a postMessage result event so site owners can listen for flip outcomes. If you have a specific use case, let us know via Contact.
Will the widget URL ever break?
We treat the documented parameters above as a stable contract. New optional parameters may be added, but the existing ones will continue to work as described.

Share this link via

Or copy link