Roundly Embed Widget Test Page

This page has hostile CSS (* { color: red !important }) to verify Shadow DOM isolation.

If the widget buttons appear in their orange brand colors (not red), Shadow DOM is working.

Test 1: Full attributes (WDGT-01, WDGT-03)

Test 2: No ISBN — title only (WDGT-03 fallback)

Test 3: Minimal — no attributes (WDGT-03 graceful fallback)

Test 4: Only ISBN (WDGT-03)

Test 5: Cover URL only

Phase 38 — White-label & Customization Tests

1. Baseline (no new attributes)

Should render the existing default orange button.

2. Custom button color (button-color="#3B82F6")

Button background should be blue, not orange.

3. Custom label + small size (button-label="Read with us", button-size="sm")

Button text should be "Read with us"; padding and font-size are reduced.

4. Large size (button-size="lg")

Button padding and font-size are increased.

5. White-label brand tokens

When you click "Start a Roundly" in the popup, the resulting /create URL should include ?brand-color=%233B5FC0&brand-bg=%231A2744&brand-logo=https%3A%2F%2Fexample.com%2Flogo.png (or similar URL-encoded variants). Open dev tools → Network tab to verify.

Verification checklist:

WDGT-01: Orange pill buttons render with mic icon and label text
WDGT-02: Buttons are NOT red/yellow (hostile CSS blocked by Shadow DOM)
WDGT-03: Tests 1-5 all render without console errors (check DevTools)
WDGT-04: Click any button — popup shows with book info, join/start options, Powered by Roundly
WDGT-05: Resize to 375px width — popup slides up from bottom; at 1024px — appears as popover