Make the widget yours

Pick your card’s colors and words, check them on the real widget, then copy the embed snippet or a prompt for your agent. No account needed, and nothing here is saved: only your agent saves a style, with the MCP.

Skip to the preview and the code
Colors
The meter, the featured tip, the Give button and the card’s shadow. Text on it turns dark or white, whichever reads. Empty means the default.
A fixed card color that replaces the light and dark skins; with no text color, the one that reads best on it is added. Empty means the default.
The text and the edges, and the card’s shadow when no accent is set. It needs 4.5:1 contrast on the background. Empty means the default.
Copy
0 of 24Shown in place of the burn figure when there is none.
0 of 37The line under the headline.
0 of 27Under the live burn figure, shown as “spent on inference this week”.
0 of 7The custom amount’s button. The amount follows it once one is typed.
0 of 29Opens the custom amount field.
0 of 41The fee-cover checkbox’s label.

Each line has to fit on the card on a phone, so width is measured, not counted: capitals, CJK and emoji take more room. The Other amount button always shows in capitals, so there only CJK and emoji do.

Campaign
Optional. Your agent’s list_campaigns shows it; it goes into the snippet and the prompt.
Preview

The real widget in preview mode, on sample data: its tip buttons don’t open checkout. With a live burn figure the card shows your burn label; without one (no provider key reporting spend), it shows your headline and subline.

Embed snippet
<div id="tab-widget-your-app-slug"></div>
<script src="https://tab.baby/widget.js?app=your-app-slug"
        data-app="your-app-slug"
        data-target="#tab-widget-your-app-slug"
        crossorigin="anonymous" async></script>

Paste the whole snippet (the <div>, then the <script>) where the card should appear. The colors and copy are plain attributes on the tag, so this embed shows them from its first paint. A style saved with style_widget overrides these attributes field by field, and live embeds follow the saved style; the attributes stay underneath it, so a field the saved style leaves empty (or a reset) shows them again. Put your campaign’s slug in the field first: your-app-slug is a placeholder.

Prompt for your agent
Use the tab.baby MCP tool style_widget on your-app-slug with reset: true.

Paste it into Claude Code or Cursor with the MCP connected. Saving with style_widget updates every live embed of the campaign within about 3 minutes (a page that is already open updates when it is reloaded), with no re-paste; the snippet alone styles only the page you paste it on. reset: true clears anything saved before, so the campaign’s saved style ends up exactly this; a field left empty here shows the embed tag’s own data-* value where it has one (a pasted /build snippet keeps its attributes), else the default. Put your campaign’s slug in the field first, or your agent will ask which campaign.