Custom Donation Alert Overlays: HTML, Break Into Layers & Growing Messages

This guide walks through the full workflow creators use for branded tip alerts: generate HTML with AI (or hand-code it), import it into the HypeTally overlay editor, run Break into layers, and publish live alerts that update amount, donor, and message automatically. It covers the CSS rules that stop one-line truncation, how shell vs widget layers fit together, and what to do in OBS after you save.

What “Break into layers” does

A single HTML embed is hard to tweak — one typo and the whole alert breaks. Break into layers measures your markup and splits it into: (1) a background shell clip (borders, texture, grass, glow art) and (2) native HypeTally widgets for live fields — amount, donor name, and message. After the split, you drag layers in the canvas, edit fonts/colors per widget, and preview with the Test button without touching raw HTML again.

• Donation Alert shell — visual chrome only; text inside the shell is hidden so it does not duplicate widgets.
• Donation Amount — binds to live tip amount.
• Donor Name — binds to display name (single line is fine).
• Donation Message — optional message; wraps to multiple lines and grows the card downward.
• Donation Eyebrow (optional) — static label like “New Donation”.

Step 1 — Copy the AI prompt

1. Open dashboard → Editor → select Donations overlay type.
2. Click Copy prompt (links to the live overlay spec and your slug).
3. Paste into Claude, ChatGPT, or your preferred model.
4. Ask for one self-contained HTML document with inline CSS — no custom poll/WebSocket scripts.

The prompt includes class names the editor expects. Tell the model your canvas size (many camera-bar alerts use 720×200 as a starting point; the canvas can grow taller once messages wrap).

Step 2 — Required HTML shape

Use separate elements for shell chrome vs live data. Map binds exactly as documented in the overlay spec:

• .HtDonationAlert + data-ht-bind="donationAlert" on the shell
• .HtDonationAmount + data-ht-bind="donationAmount"
• .HtDonationDonor + data-ht-bind="donationDonor"
• .HtDonationMessage + data-ht-bind="donationMessage" + data-ht-hide-when-empty="true"

Example markup (adjust position/size to your design):
<div class="HtDonationAlert" data-ht-bind="donationAlert" style="position:absolute;left:8px;top:8px;width:704px;min-height:184px;height:auto;padding:20px 28px">…</div>

Step 3 — CSS that lets messages grow down

The most common mistake is treating the message like a ticker: white-space: nowrap, text-overflow: ellipsis, and overflow: hidden on .HtDonationMessage. That forces one line with “…” no matter how long the tip message is. Use this pattern instead:

• Message: fixed width (e.g. 648px), white-space: pre-wrap, word-break: break-word, height: auto, overflow: visible
• Alert shell: fixed width, min-height for empty state, height: auto — not a fixed pixel height tied to the longest message
• Root / canvas: min-height on #HtDonationRoot or body, height: auto, overflow: visible
• Amount & donor: single-line nowrap is OK; only the message should wrap

Step 4 — Fonts (and size limits)

Many custom alerts use display fonts — for example Chinese Rocks (Typodermic / Ray Larabie) with fallbacks like Quicksand. You can embed @font-face in CSS, but huge base64 font blocks can push tier HTML near the editor size limit and break the donation bridge script. Prefer:

• Google Fonts CSS links when a close match works
• Creator asset URLs hosted on your HypeTally account
• Small WOFF2 files instead of massive inline OTF base64

After Break into layers, set the font on each widget layer in the editor — amount, donor, message — so styles apply to live fields, not only the shell.

Step 5 — Import, Apply, Break into layers

1. Open the HTML panel in the donation overlay editor.
2. Paste your document. Remove any custom poll, WebSocket, or broken bridge scripts — HypeTally injects the runtime at publish time.
3. Click Apply to canvas.
4. Click Break into layers. You should see separate layers for the shell, amount, donor, and message (plus eyebrow if present).
5. If text appears doubled (white + shadow duplicate on every line), re-run Break into layers after updating — the shell clip should show background only.
6. Select the Donation Message layer and confirm the test preview wraps long copy instead of clipping to one line.

Editing a style tier (different alert layouts per tip amount)? Break into layers updates that tier’s layer stack and keeps the original HTML as decompose source for shell clips. See the visual editor overview in our OBS overlay design guide.

Step 6 — Test, Save & Publish

1. Use the editor Test button with a long custom message — verify the message layer and alert shell both grow taller.
2. Check amount and donor update from mock/live data.
3. Click Save & Publish. Your OBS URL stays /overlay/your-slug/donations.
4. In OBS, refresh the Browser Source once (or toggle the scene).
5. Send a real test donation from your donate page while unlisted to confirm live WebSocket + polling.

Step 7 — OBS Browser Source

• Add Browser Source → URL: your HypeTally donations overlay URL
• Width / height: match your published canvas (may be taller than 200px after long messages — read dimensions in the editor footer)
• Transparent background: enabled
• Shutdown source when not visible: optional; refresh after publish when visible

Full Browser Source sizing and scene layout tips live in our OBS overlay setup guide.

Troubleshooting

• Placeholders stuck at $0.00 / static text: confirm bind attributes on amount/donor/message nodes; re-Apply and Save. Remove corrupted inline bridge scripts (bad formatMoney breaks the whole script).
• Message still one line with …: remove nowrap/ellipsis CSS; re-Apply or edit the Donation Message layer after Break into layers.
• Double text after layers: shell clip was showing children — Break into layers again on current code; shell should be background-only.
• Alert does not grow in OBS: publish latest save; hard-refresh Browser Source; confirm message uses pre-wrap and shell uses height: auto.
• HTML too large: move fonts/images out of inline base64; host assets externally.

Conclusion

Custom donation alerts work best as a pipeline: AI or hand-built HTML with the documented class names → Apply → Break into layers → test long messages → publish. You keep creative control, editable widgets, and stable OBS URLs — while donor messages wrap naturally and the card grows down instead of cutting off with an ellipsis.