Widget builder

Build custom overlays with your project's LIVE metrics, then drop the result onto your website or into an OBS scene. The builder lives in the dashboard, generates a saved widget per project, and serves a single lightweight runtime that updates itself in place every few seconds.

What it is and what it is for

The widget builder is a drag-and-drop editor that turns a JSON widget config into a compact, themable HTML overlay. Every widget is tied to one project, so the numbers and ticker shown by the widget are always the LIVE counters of that project (Creator fees claimed, To holders (SOL est.), Holders paid, Eligible now, Tokens burned, Airdrops sent, Last event, Event log, etc.). The widget is published behind a stable URL and a short embed snippet. No secrets or API keys are exposed to the browser - the public widget endpoints proxy and cache live data on the edge for you.

Typical uses:

• Token landing page - drop an iframe showing live airdrop stats next to your "buy" button.
• OBS Browser Source - put creator fees, holders paid and a live event log onto your stream.
• Community dashboard - a transparent strip with rolling counters embedded in your Discord landing site or blog.
• Standalone HTML - download a single self-contained file, open it in any browser, no build step.

Open the builder

1. Open the dashboard and connect the wallet that owns the project.
2. Use the side rail and click Widget.
3. The builder loads the first widget for the current project. If none exist yet, you start from a sensible default (stats grid with a status row, ticker and event log).

Switching projects in the top selector automatically re-loads that project's widgets. The builder never reads or writes the bot's airdrop logic - editing widgets is safe and isolated from cycles, claims and tiers.

Builder layout

• Top bar - widget name, Enabled toggle, status message, New widget and Save.
• Left palette - draggable building blocks grouped by Meta, Stats (live), Events. Click an item to drop it in the center, or drag it onto the canvas.
• Canvas - WYSIWYG preview at the widget's real pixel size with a transparency checkerboard backing.
• Toolbar above the canvas - theme, size preset, custom W/H, canvas background, transparency, layout presets, zoom (-, +, Fit) and pan hint.
• Right inspector - list of saved widgets, theme overrides (accent / text / border / radius / border width / poll), and a block inspector with all properties of the selected block.
• Export panel - embed code, widget URL, downloadable HTML and preview, all under the canvas. Enabled once a widget is saved.

Block types

All stat values are mainnet LIVE counters. Legacy non-LIVE cycle data is never included in the public feed, so widgets stay honest in front of holders.

Canvas and zoom

• Size presets - Card 360�240, Square 480�480, Medium 480�560, Strip 720�140, Wide 800�360, Sidebar 360�720, OBS 1920�1080.
• Custom W / H - any integer between 120-2560 wide and 60-1440 high. The two inputs do not snap to a preset, so you can set arbitrary sizes.
• Background - solid colour picker, or check Transparent for OBS-friendly overlays. Transparent canvases show a checkered backing in the builder only.
• Zoom - -, + and Fit. Fit chooses a scale that maximises canvas inside the available area.
• Pan - hold Space and drag, or middle-click and drag. Useful for big canvases like 1920�1080 OBS layouts. Scroll wheel also scrolls; Shift+wheel scrolls horizontally.
• Keyboard nudge - select a block, then arrow keys move it 1px (Shift+arrow = 10px). Delete removes the selected block.

Customize blocks

Click any block to select it. The inspector on the right shows every editable property:

• Position and size (X, Y, W, H) - either drag the block, drag any edge or corner handle of the selection, type values in the inspector, or use the arrow keys.
• Opacity - slider 0.1-1.0.
• Value size - large coloured number (stat blocks only).
• Label size - small caption under the number (stat blocks only).
• Text size - generic text size (for ticker, status, custom text, last event, event log).
• Text color and Background - per-block colour pickers.
• Transparent background - drop the panel fill entirely.
• No border - drop the border for cleaner stream HUDs.
• Bold text - force weight 700.
• Align - left / center / right.
• Bring forward / Send backward / Duplicate - DOM-level layering and quick copies. Useful for overlapping designs.
• Stat field (stat blocks only) - swap which metric the block displays without losing position or styling.
• Lines (event log only) - how many recent events to show (1-30).

Themes and global overrides

Pick a base theme from the canvas toolbar (Medieval, Stream dark, Stream light, Minimal, OBS transparent, Cyberpunk, Pastel, Brutalist) and then refine it in the Theme overrides card:

• Accent - colour of the big numbers and tickers.
• Text - default text colour.
• Border - panel border colour.
• Radius - corner roundness in px (0 = sharp).
• Border W - border thickness in px.
• Poll (s) - how often the runtime refetches live data (10-120 s). Lower means snappier widgets and slightly more requests; higher reduces load.

Layout presets in the top toolbar (Stats row, Stats grid, Log focus, Stream HUD) reset the blocks to a curated starting point while keeping your current canvas background and transparency setting.

Save and Enabled toggle

Click Save to push the widget to the API. The first save creates a new widget id; subsequent saves update the existing one. The Enabled checkbox controls public visibility - if you disable a widget, the public endpoints return 404 so the embed stops rendering, but the saved config is preserved.

Use the widget list in the right card to switch between saved widgets, delete the one currently open, or come back to one later.

Export and embed

After saving, the Export & embed panel below the canvas activates:

• Copy embed code - copies an <iframe> snippet sized to your canvas. Drop it directly into any HTML page.
• Copy widget URL - the direct page URL (https://latrinebot.com/embed/?id=...). Use this in OBS Browser Source.
• Download .html file - generates a self-contained HTML file that pulls the runtime and the latest config from the API. Great for local testing or for hosting on a third-party static site.
• Open preview - opens the embed in a new window so you can verify exactly what visitors will see.

Use on a website

<iframe
  src="https://latrinebot.com/embed/?id=YOUR_WIDGET_ID"
  width="480" height="560"
  style="border:0;background:transparent"
  loading="lazy"
  title="Live token metrics"></iframe>

The iframe is fully self-contained - no scripts on your page, no CORS to configure, the widget refreshes itself.

Use in OBS Browser Source

1. In the dashboard, click Copy widget URL.
2. In OBS: Sources -> + -> Browser.
3. Paste the URL. Set Width and Height to match your canvas size (visible in the W / H inputs).
4. Tick Refresh browser when scene becomes active if you want a hard reload on scene change. Otherwise the widget polls automatically.
5. If you built the widget with a transparent canvas, the Browser Source will render with a transparent background out of the box.

Self-hosted download

Download .html file produces a single file that loads the runtime and config from our API. Place it anywhere you can host a static HTML file - the widget will render and refresh exactly like the iframe version.

Privacy and limits

• Widgets serve only LIVE mainnet counters and the public token symbol. Operator-only settings and internal fields are never exposed.
• The widget URL is unguessable (UUID), but treat it as a public link - anyone with the URL can render the widget.
• Public live endpoint is rate limited per widget per IP (120 requests/minute) and cached at the edge for a few seconds.
• Disable a widget at any time from the inspector list; it returns 404 publicly until re-enabled.

Tips and FAQ

• Block resets after a few seconds? Switching projects in the dashboard reloads the widget; while you stay on the same project, edits stay until you Save (or pick another widget in the list).
• Ticker shows TOKEN, not my symbol? The symbol is taken from the resolved DexScreener listing. If your mint was added recently, give it a minute or hit the symbol again from the project settings.
• Want different font for stat label vs value? Stat blocks have two independent size fields: Value size for the big number, Label size for the caption.
• Where do I find the saved widget id? It is the id=... query parameter in the embed URL.
• Big OBS canvas (1920�1080) does not fit on screen? Use the Fit button or pan with Space+drag / middle-click.

Ready to build? Open the dashboard and select Widget.