See the widget

Reads on any background

Two skins, light and dark. By default it follows the host page: the background behind the card, then the page’s color scheme, then the visitor’s system setting. Set data-theme to force one.

Options on the tag

Add data-* attributes for a brand accent, a monthly goal meter, a title or square corners. The accent fills the goal meter, the featured (middle) tip pill and the custom amount’s Give button, edges the card in either skin, and lights up the other pills on hover.

The options

Each is a plain attribute on the <script> tag. With none set, you get the card at the top of this page. A style saved with the MCP’s style_widget (the accent, the background and text colors, and the six lines of copy) overrides these attributes field by field on live embeds within about 3 minutes (a page that is already open updates when it is reloaded), with no re-paste.

Make it yours: pick colors and copy, check them on the real widget, and copy the snippet or a prompt for your agent.

data-accent

Brand color as #hex. The meter fill, the featured (middle) tip pill of three, the custom amount’s Give button and the card’s shadow edge (every skin, custom ones too) take it, and the other pills on hover (where the pointer can hover); text on it auto-picks ink or white for contrast.

data-bg

The card’s background as #hex. With data-fg it makes a custom skin that replaces the light and dark skins (data-theme no longer applies), with the border and inset tones derived from the pair; on its own it gets the skin text that reads on it.

data-fg

The card’s text and edges as #hex (and its shadow when no accent is set), the other half of the custom skin; style_widget and the builder refuse a pair under 4.5:1 contrast.

data-goal

Shows the monthly goal meter. The goal and this month’s tips come live from your tip jar, so set the goal first with set_burn_target (or create_campaign’s burn_target_cents). generate_embed_code adds this attribute for you. With no goal set, only the label shows and the browser console says to run set_burn_target.

data-title

A heading above the meter, e.g. “Support my bot”.

data-headline

The headline shown in place of the burn figure when there is none (default “Support this app”). One line: about 24 everyday characters fit on a phone, fewer in capitals, CJK or emoji.

data-subline

The line under that headline (default “Every tip helps cover running costs.”). One line: about 37 everyday characters fit on a phone, fewer in capitals, CJK or emoji.

data-burnline

The words under the live burn figure; “this week” is always added after them, since the figure is a 7-day total (default “spent on inference”). One line: about 27 everyday characters fit on a phone, fewer in capitals, CJK or emoji.

data-amounts

Up to three tip presets in cents, e.g. “300,500,1000”.

data-theme

light, dark or auto (default): auto follows the host page’s background behind the card, falling back to the visitor’s system setting.

data-shape

round (default) or sharp corners.

data-custom

The “Other amount” field (on by default) lets supporters enter an exact dollars-and-cents tip; “0” hides it.

data-give

The custom amount’s button, followed by the amount once one is typed (“Give $12.50”) (default “Give”). One line: about 7 everyday characters fit on a phone, fewer in capitals, CJK or emoji.

data-other

The button that opens the custom amount field (default “Other amount”, always shown in capitals). One line: about 29 characters fit on a phone, fewer in CJK or emoji.

data-cover

“0” starts the fee-cover box unchecked; “hide” removes it, and supporters always cover processing (the card says it is added at checkout).

data-coverline

The fee-cover checkbox’s label (default “Cover the payment processing fee”). One line: about 41 everyday characters fit on a phone, fewer in capitals, CJK or emoji.

data-brand

“0” hides the “powered by” footer.

data-base / data-target / data-return

API origin, a mount selector (the generated snippet points it at its own <div>), and the post-checkout return URL (default: the page the tip started on).

Embed it

The tag your agent hands back, and how to give it room on the page.

<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>

<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"
        data-goal="7500"
        data-accent="#1a3be8"
        data-title="Support my bot"
        crossorigin="anonymous" async></script>