Embed Documentation

Everything you need to add Fangage widgets to your website. Copy, paste, publish.

Get started in 2 minutes

1

Add the script tag to your page

Place this once in your HTML, preferably before the closing </body> tag. It loads asynchronously and won't block your page.

<script async src="https://api.paddock.talk/widget/index.global.js"></script>
2

Place widget containers where you want them

Add a div with the event ID wherever you want a widget to appear. You can find the event ID on each event's detail page.

<div data-fangage-event="YOUR_EVENT_ID"></div>
3

That's it!

The widget auto-initializes, handles its own styling via Shadow DOM (no CSS conflicts), and connects to realtime updates. Your visitors can interact immediately.

Full example

<!DOCTYPE html>
<html>
<head>
  <title>My F1 Article</title>
</head>
<body>
  <h1>Who wins the Monaco GP?</h1>
  <p>Cast your vote below:</p>

  <!-- Fangage widget -->
  <div data-fangage-event="YOUR_EVENT_ID"></div>

  <!-- Load once, works for all widgets on the page -->
  <script async src="https://api.paddock.talk/widget/index.global.js"></script>
</body>
</html>

Multiple widgets on one page

You only need the script tag once. Add as many widget containers as you like — each with its own event ID.

<!-- Poll -->
<div data-fangage-event="event_id_1"></div>

<!-- Head-to-Head -->
<div data-fangage-event="event_id_2"></div>

<!-- Prediction -->
<div data-fangage-event="event_id_3"></div>

<!-- Single script tag for all widgets -->
<script async src="https://api.paddock.talk/widget/index.global.js"></script>