Embedded Pricing

Add a fully hosted, responsive pricing table to any page with a single <script> tag. No React, no Vue, no build step required.

# noqa: E501

Live Example

This is the embedded widget running live on this page:

How It Works

1 — Add a container div
```
<div id="pricing-root"></div>
```

2 — Load the widget script

<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="indigo"
  data-height="700"
  data-highlight="pro"
  data-features="All core platform features,Unlimited projects,Priority email support,Cancel anytime"
></script>

3 — Done. The widget renders inside a sandboxed iframe. Billing, checkout, and plan management are fully handled by your VBWD backend. # noqa: E501

Configuration Attributes

# noqa: E501 # noqa: E501 # noqa: E501 # noqa: E501 # noqa: E501

Attribute	Required	Default	Description
`data-embed`	Yes	—	Widget preset. Use `landing1` for the standard pricing table.
`data-category`	No	`root`	Tariff plan category slug. `root` shows all plans.
`data-container`	Yes	—	ID of the host `<div>`.
`data-locale`	No	`en`	UI language: `en`, `ru`, `fr`, `de`, …
`data-theme`	No	`default`	Card colour theme: `default`, `light`, `dark`, `teal`, `indigo`, `emerald`. Any other value falls back to `default`.
`data-height`	No	`700`	iframe height in pixels.
`data-highlight`	No	—	Plan slug rendered as featured.
`data-image`	No	—	Header image URL for the card.
`data-features`	No	—	Comma-separated feature bullets.
`data-heading`	No	—	Overrides the card heading.
`data-subtitle`	No	—	Overrides the card subtitle.
`data-cta`	No	—	Overrides the CTA button label.
`data-badge`	No	—	Overrides the featured-plan badge.

data-features is one comma-separated list, so a single feature must not contain a comma. Leave data-heading, data-subtitle, data-cta and data-badge unset to use the built-in localised text.

Show a Specific Category

<script
  src="/embed/widget.js"
  data-embed="landing1"
  data-category="backend"
  data-container="pricing-root"
  data-theme="dark"
></script>

Customise Copy, Theme & Highlight

<script
  src="/embed/widget.js"
  data-embed="landing1"
  data-category="root"
  data-container="pricing-root"
  data-theme="emerald"
  data-highlight="pro"
  data-badge="Most popular"
  data-heading="Choose your plan"
  data-subtitle="Upgrade or downgrade anytime"
  data-cta="Get started"
  data-features="All core platform features,Unlimited projects,Cancel anytime"
></script>

data-features is one comma-separated list, so a single\n feature must not contain a comma. Leave data-heading, data-subtitle,\n data-cta and data-badge unset to use the built-in localised text.