Livequest Studio
Go to dashboard

Embeds quickstart

Drop-in script, realtime feed, and analytics wiring to embed any Livequest liveblog inside your site or app.

1. Install the snippet

Paste the following snippet wherever you want the liveblog to appear. Switch data-mode to iframe for a framed experience, or keep native for inline Shadow DOM. Add data-lazy to defer loading until the mount nears the viewport.

<div data-liveblog-id="LIVEBLOG_ID" data-mode="native" data-order="newest" data-lazy="true"></div>
<script src="https://your-domain/embed.js" async></script>

Standalone widgets

Embed a Hot Take Meter anywhere with one line:

<div data-widget-id="WIDGET_ID" data-type="hot-take"></div>
<script src="https://your-domain/widget.js" async></script>

2. API endpoints in play

GET/api/embed/:id/feedJSON payload of recent updates
GET/api/embed/:id/sseServer-sent events for realtime updates
POST/api/embed/:id/trackSession analytics + heartbeats
GET/api/embed/:id/sponsorsActive sponsor slots
POST/api/embed/:id/sponsors/track|clickSponsor analytics
POST/GET/api/embed/:id/reactionsEmoji reactions (optional)

3. Caching & real-time

  • The feed endpoint ships weak ETags and stale-while-revalidate; let your CDN cache responses aggressively.
  • The SSE stream stays open for long periods. Avoid proxies that buffer or transform the response.

5. Local testing

Run npm run dev then visit /embed-demo.html. Enter a liveblog ID to toggle between iframe and native renders and inspect network activity.

4. Analytics captured automatically

  • Session start/stop and heartbeat pings via the /track endpoint.
  • Native embeds fire a one-time impression when 50% visible for at least a second, and log outbound clicks.
  • Sponsor impressions/clicks are tracked in both iframe and native modes.

Troubleshooting

  • No updates? Check browser console for CORS errors and verify SSE reachability.
  • Content looks stale? Ensure ETags are honoured and temporarily reduce CDN TTL during testing.