Pricing
A pricing-table widget is a self-contained plan comparison — one to three priced tiers rendered in a clean, theme-aware block. WidgetCraft's Pricing widget takes a list of plans (name, price, period, blurb, feature list, and a call-to-action) and a layout — single, tiers, or comparison — and produces a polished pricing section for landing pages, link-in-bio profiles, SaaS marketing, freelancer service menus, and any composition that needs to show what something costs.
Pricing renders an author-typed array of plans in one of three editorial layouts. 'single' shows one plan card — ideal for a one-product offer or a single service rate. 'tiers' shows two or three plan cards stacked top-to-bottom (embedded widgets are capped to ~420px wide, so the cards stack into a single column rather than crowding side by side); the plan you mark `featured` gets an accent border, a subtle accent wash, and a 'popular' badge so the eye lands on it first. 'comparison' draws a feature matrix — plan names across the top, the union of every plan's features down the side, and an accent check in each cell the plan includes. Every plan card lists its features with an accent check glyph, and each plan can carry its own CTA: the featured plan's CTA renders as a solid accent button with a contrasting label, while the others render as quieter outlined buttons so the primary action stays loud. If a plan has a ctaHref, the button opens that URL in a new tab. Because the surface stays transparent and every color comes from the universal style controls, the same Pricing widget reads correctly on a cream page or on a forest-green color zone — text, accent, muted, and border are all configurable per block.
Questions, answered.
What are the three layouts?
single (one plan card), tiers (two or three plan cards stacked into a column with the featured plan emphasized), and comparison (a feature matrix with plans across the top and features down the side). Pick one in the inspector — tiers is the default.
How do I mark a plan as the recommended one?
Set `featured: true` on that plan. The featured card gets an accent border, a subtle accent wash, a small 'popular' badge, and its CTA becomes a solid accent button — so it reads as the recommended choice without you styling anything by hand.
Can each plan have its own button?
Yes. Each plan takes a `cta` label and an optional `ctaHref`. When ctaHref is set, the button opens that URL in a new tab (target=_blank, rel=noopener). The featured plan's button is filled with your accent color; the others are outlined so the primary action stays the loudest element.
Why do the tier cards stack instead of sitting side by side?
Every embedded widget's content is capped to about 420px wide so it reads cleanly inside Notion, Obsidian, and Mizu pages. Three columns at that width would crush each card, so the tiers layout stacks them top-to-bottom. The featured plan keeps its accent emphasis regardless of stacking.
Can I set a currency symbol?
Yes — set the currency field (e.g. $, €, £, ₩) and it renders just before each price. You can also just type the symbol directly into each plan's price string if you prefer per-plan control; the widget treats price as a dumb string, so '$19', 'Free', or 'Custom' all render exactly as you write them.
Will it look right on a colored background?
Yes. The widget never paints its own background — it stays transparent and inherits text, accent, muted, and border colors from the style controls. Set the text color to cream and it reads cleanly on a dark forest panel; leave it dark and it reads on a cream page. The featured card's accent wash is derived from your accent color at low opacity so it works on both.
Is this widget free?
Yes. WidgetCraft widgets are free to embed and customize. No signup required, no per-render fees.