Showing Tariff Plans

Two ways to show plans

VBWD renders the same tariff-plan cards — name, price, billing period, feature bullets and a checkout button — in two places, and which one you reach for depends entirely on where the page lives:

• On an external website you don't run on VBWD (a marketing site, a landing page, a partner's page) → drop in the landing1 embed: one <script> tag, no build step.
• On a page of your own VBWD CMS → add the native NativePricingPlans / TariffPlanCollection widget to a layout area and configure it from the admin.

Method 1 — Embedded via the landing1 plugin

The landing1 plugin ships a tiny loader at /embed/widget.js. Point a <script> tag at it on any third-party page and it mounts VBWD's pricing cards inside a sandboxed iframe — your styles can't leak in, its styles can't leak out, and there is no framework, bundler or build step to add. Billing, checkout and plan management stay on your VBWD backend; the host page only supplies a container and a few data-* attributes.

Live example. The pricing table below is a real landing1 embed, rendered from this very page by the same <script> tag documented underneath it — no VBWD frontend involved.

Copy-paste snippet

Add an empty host element, then the loader script pointed at your instance:

<!-- 1. a host element anywhere on your page -->
<div id="pricing-root"></div>

<!-- 2. the widget script (points at your VBWD instance) -->
<script
  src="https://your-vbwd-instance.com/embed/widget.js"
  data-embed="landing1"
  data-category="root"
  data-container="pricing-root"
  data-locale="en"
  data-theme="teal"
  data-highlight="pro"
  data-features="All core platform features,Unlimited projects,Priority email support,Cancel anytime"
  data-height="620">
</script>

Forwarded attributes

Every knob is a data-* attribute on the script tag:

See the full walkthrough on the Embedded Pricing guide page, which carries its own live preview and category / theme / copy variations. The widget itself lives in the landing1 frontend plugin (vbwd-fe-user/plugins/landing1/).

Method 2 — Native CMS widget

For a page you host on your own VBWD site, skip the iframe entirely: inside the CMS, add a NativePricingPlans widget (the subscription plugin also ships an equivalent TariffPlanCollection widget) to a layout area. It renders the identical cards natively in the page — same plans, same checkout — and is configured entirely from the admin with no code.

A typical widget configuration:

{
  "component_name": "NativePricingPlans",
  "mode": "category",
  "category": "subscription-plans",
  "theme": "teal",
  "highlight_slug": "pro",
  "features": [
    "All core platform features",
    "Unlimited projects",
    "Priority email support",
    "Cancel anytime"
  ]
}

Config keys

• mode / category — where the plans come from: category pulls every plan in a category (root = all); pin an explicit set with a plan_slugs list instead.
• theme — the same colour themes as the embed (teal, indigo, emerald, light, dark, default).
• highlight_slug — the plan slug drawn as the featured card.
• features — the bullet list shown under each card (a JSON array, so commas inside a bullet are fine here).
• heading, subtitle, cta_label, highlight_badge — presentation copy; each falls back to the localised i18n string when left blank, so an empty value is the safe default.
• image_url — an optional header image for the card.

In short

Same cards, two surfaces. Reach for the landing1embed when the page lives on an external site with no VBWD frontend — one <script> tag, sandboxed iframe, done. Reach for the native NativePricingPlans / TariffPlanCollection widget when the page is on your own CMS — same plans, rendered in-page and configured from the admin. See the Subscription reference for the underlying plans, add-ons and checkout model.