Embed 3ball.app on Your Site — Free iframe Integration

Embed the 3ball trainer in your billiards club site, blog, or learning platform. One iframe tag, fully responsive, no API key required. Free for personal and commercial use; attribution appreciated but not required.

Basic embed (any HTML)

<iframe
  src="https://3ball.app/?embed=1"
  title="3ball — three-cushion carom billiards trainer"
  width="100%"
  height="600"
  loading="lazy"
  referrerpolicy="no-referrer-when-downgrade"
  allow="fullscreen"
  style="border:0; border-radius:12px; max-width:100%;"></iframe>

Responsive (16:9 wrapper)

<div style="position:relative; padding-bottom:56.25%; height:0; overflow:hidden; border-radius:12px;">
  <iframe
    src="https://3ball.app/?embed=1"
    title="3ball trainer"
    style="position:absolute; top:0; left:0; width:100%; height:100%; border:0;"
    loading="lazy"
    allow="fullscreen"></iframe>
</div>

WordPress (block editor)

In the post editor, add a Custom HTML block.
Paste the basic embed code above.
Preview and adjust height as needed (recommended: 600-800 px desktop).

React component

function ThreeBallEmbed({ height = 600 }) {
  return (
    <iframe
      src="https://3ball.app/?embed=1"
      title="3ball — three-cushion trainer"
      width="100%"
      height={height}
      loading="lazy"
      style={{ border: 0, borderRadius: 12, maxWidth: "100%" }}
      allow="fullscreen"
    />
  );
}

Pre-loaded position via URL

Want to embed a specific position? Add ?pos=... to load presets:

/?embed=1&pos=ticky — Ticky position
/?embed=1&pos=umbrella — Umbrella
/?embed=1&pos=around-the-table — Around-the-table
/?embed=1&mode=drill — Open in Drill mode
/?embed=1&mode=solver — Open in AI Solver mode

CSP & X-Frame-Options

3ball.app is served with X-Frame-Options: SAMEORIGIN by default — it cannot be embedded externally with this header. We are evaluating switching to frame-ancestors * via CSP. For now, contact info@setviva.com with your domain and we'll add it to the allow-list.

Attribution (recommended)

If you embed 3ball, a link back to 3ball.app is appreciated:

<p style="font-size:12px; opacity:.7; margin-top:8px;">
  Trainer by <a href="https://3ball.app/">3ball.app</a> — free, MIT-friendly.
</p>

Limitations

Multiplayer not yet supported in embedded mode.
Localization respects user's browser preference; force a language with ?lang=tr etc.
If your site uses a strict CSP, allow frame-src https://3ball.app.