About the Pricing Table Widget
Zyff's pricing table widget lays out your plans on any website, free. Add up to six plans with a price, a period, a short description, a feature list and a button, then highlight the one you want people to pick. Prices are free text rather than a number and a currency code, so "£29", "From $10", "Free" and "Contact us" all work exactly as you type them. The output is one div and one script tag that works in WordPress, Shopify, Wix, Squarespace, Webflow or a hand-written HTML page alike.
How to add a pricing table to your website
Add your plans
Give each plan a name, a price, a period and a feature list — one feature per line. Prices are free text, so any currency or wording is fine.
Highlight one plan
Mark the plan you want people to choose. It is lifted, accented and given the solid button while the others get outlines. Featuring one plan un-features the rest, so you can never ship two.
Pick a layout
Equal cards when the choice is genuinely open, the featured layout for the standard three-tier shape, compact for four or more plans, and stacked rows for narrow pages or long feature lists.
Copy the embed code
Paste the container div and script tag where the pricing table should appear, or download the standalone HTML file. Check the 390px mobile preview before you ship it.
What the Pricing Table Widget does
Prices as you write them
A free-text price field, not a number and a currency picker. That is the only way "From $10", "Free" and "Contact us" can sit in the same table, and it means Zyff never reformats your money for a locale it cannot know.
One featured plan, enforced
Marking a plan as featured un-marks the others, because two lifted cards read as a bug rather than a recommendation. The featured plan gets the accent border, the badge and the only solid button.
Feature lists that are quick to write
Type one feature per line rather than adding them one field at a time. Up to fourteen per plan, with optional ticks.
No price markup
The widget publishes no Product or Offer structured data. It cannot parse "From $10" into a currency and an amount, so it does not assert one a search engine could read and get wrong.
Four layouts
Equal cards, a featured tier, a compact set for four or more plans, and stacked rows that keep long feature lists readable on a narrow page.
Nothing to slow your page
The widget runs in the visitor's browser from the settings in your snippet, makes no request to Zyff when your page loads, and can wait until it is scrolled near.
At a glance
| Plans | Up to 6, each with a name, price, period, description, button and badge |
|---|---|
| Features | Up to 14 per plan, one per line |
| Price format | Free text — any currency, any wording |
| Layouts | 4 templates: equal cards, featured plan, compact, stacked rows |
| Columns | 1 to 4, dropping to 2 below 900px and 1 below 560px |
| Structured data | None — no Product or Offer markup is published |
| Output | One container div plus one script tag, or a downloadable HTML file |
| Price | Free to build; paid plans for saved widgets |
Frequently asked questions
How do I add a pricing table to my website?
Add your plans in Zyff's builder, mark the one you want highlighted, pick a layout, then copy the generated embed code into your page. The whole flow is free with no signup, and the snippet is plain HTML, so it drops into any CMS block that accepts custom code.
Can I use any currency?
Yes. The price is a free-text field, so you type it exactly as you want it shown — "£29", "€25", "₹1,299", "From $10", "Free" or "Contact us". There is no currency picker, because a numeric field with a currency code cannot express half of those, and it would imply Zyff formats money for a locale it has no way of knowing.
Does the pricing table take payments?
No. Each plan's button is a link, so it points at your own checkout, sign-up page or contact form. The widget shows the plans and hands the visitor over; the transaction stays entirely with whatever you already use.
Will my prices show up in Google search results?
No. The widget publishes no Product or Offer structured data, because a free-text price cannot be turned into the currency and amount that markup requires without guessing — and a guess about a price is exactly the kind of checkable false claim that costs a site its rich results.
How many plans should a pricing table have?
Three is the usual answer, and it is why the featured-tier layout is the default: it gives visitors a cheap option, an obvious recommendation and a premium anchor. Above four plans, use the compact layout or the stacked rows — four full-size cards side by side get cramped well before a phone screen.
Can I highlight more than one plan?
No, and that is deliberate. Marking one plan as featured un-marks the others, because two lifted and accented cards read as a rendering bug rather than a recommendation, and a pricing table that recommends two things recommends nothing.
How do I add features to a plan?
Type them one per line in the features box. It is much faster than a field per feature when you are writing three plans at once, and the widget renders each line as its own item with an optional tick.
Where do I paste the pricing table embed code?
Wherever the plans should appear — usually a dedicated pricing page, or partway down a landing page. Put the container div in that spot and keep the script tag with it.
Is the pricing table widget really free?
Yes. Building it, styling it and embedding it are free with no signup, no trial and no watermark — a free embed carries a small "Pricing table by Zyff" link, which is how the tool stays free. Both the equal-cards and featured-plan layouts are free, because highlighting a tier is the whole job of a pricing table. An optional account saves a widget so you can edit it later, and a paid plan adds the compact and stacked-row layouts, full colour control and removes the attribution link.