45 lines
1.6 KiB
Markdown
45 lines
1.6 KiB
Markdown
---
|
|
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
|