---
epic: 9
story: 9.5
title: "Embeddable Widget"
status: draft
---

## Epic 9 — Web App (React + WASM)
**Goal:** Zero-install web experience with real-time collaboration.

### Story 9.5: Embeddable Widget

As a content creator or developer,
I want to embed a CalcPad sheet in my website via an iframe,
So that my readers can view or interact with calculations in context.

**Acceptance Criteria:**

**Given** a user has a shared CalcPad sheet
**When** they select "Embed" from the share options
**Then** an `<iframe>` embed code is generated with a copyable snippet
**And** the snippet includes the sheet URL with embed-specific query parameters

**Given** an embed code is placed on a third-party webpage
**When** the `mode=readonly` parameter is set
**Then** the widget displays the sheet with answers but disallows editing
**And** no cursor or text input is active in the iframe

**Given** an embed code is placed on a third-party webpage
**When** the `mode=interactive` parameter is set
**Then** users can edit expressions and see live-updated answers within the iframe

**Given** an embed is configured with a theme override parameter (e.g., `theme=dark`)
**When** the widget renders
**Then** it uses the specified theme regardless of the host page's styling

**Given** an embed is configured with `answers=hidden`
**When** the widget renders
**Then** the answer column is not displayed
**And** only the input expressions are visible

**Given** the iframe is placed in a responsive container
**When** the container width changes (e.g., mobile vs. desktop)
**Then** the widget resizes fluidly without horizontal scrolling or clipping