# Show Your Pricing on Your Website

Add your passes, class packs and memberships to your website so visitors can buy them in a Naayya window

Canonical URL: https://www.naayya.com/help-center/website-pricing-widget
Category: integrations
Last updated: 2026-11-07T12:00:00Z

# Show Your Pricing on Your Website

The pricing widget shows your passes, class packs, intro offers and memberships
on your own website. A visitor selects **Buy** or **Join**, and the offer opens
on Naayya in a small window over your website, where they sign in and pay.

## Who this is for

Business owners and managers who run their own website and sell passes, class
packs or memberships on Naayya. The widget works in the same website builders
as the schedule. See [Website Integration](/help-center/website-integration)
for the guide to each builder.

## Add the pricing widget

1. Open **Admin → Settings → Storefront → Website embed**.
2. Under **Which widget?**, select **Pricing**.
3. Under **Website code**, choose your builder in **Where is your website
   built?** and copy what it needs: **Copy code**, **Copy iframe code**,
   **Copy link** or **Copy React code**.
4. Paste it where you want your prices to appear, in the same kind of block you
   would use for the schedule.

The code looks like this:

```html
<script type="module" async src="https://www.naayya.com/plugin/v2/loader.js"></script>
<naayya-pricing business-id="YOUR_EMBED_KEY"></naayya-pricing>
```

Use the copied code rather than typing your own: it holds your embed key. You
can show the schedule and the pricing widget on the same page. Each one needs
its own element; the script line is needed only once per page.

## What the widget shows

The widget shows what your **Pricing** page shows, in the same order: intro
offers first, then memberships, passes, class packs and drop-ins. Each card
shows:

- The name, and for a membership **New members** or **Limited offer** when only
  some customers can buy it.
- The short description.
- The price. When VAT is added at checkout, the price says **excl. VAT**.
- What it gives, such as the number of class credits and how long they last,
  or how often a membership is billed and how many other prices it has.
- For a membership, the class categories it covers.
- A button: **Buy** for a pass or class pack, **Join** for a membership, or
  **Book now** for a single-visit intro offer.

An offer hidden from your Pricing page, archived, or no longer sold online does
not show in the widget either. See
[Share Class Packs and Memberships Online](/help-center/public-product-storefront)
for **Show on pricing page**. A change you make in **Admin → Pricing** shows on
your website the next time a page loads.

The widget shows the price your checkout charges. Prices come from Naayya, so
you never update them on your website.

## Choose which offers show

In the Website embed section, with **Pricing** selected, the **Pricing** section sets which
offers the widget shows:

- **Show everything** (on): every offer on your Pricing page, in the same order,
  including any you add later.
- **Show everything** (off): only the offers you turn on, in the order you set.
  Turn each offer on or off, and use the up and down arrows to move it. An offer
  you add to your Pricing page later stays off until you turn it on.

Changes save as you go. The **Embed preview** shows your choice straight away,
and your website shows it the next time a page loads, without new code.

## Match your brand

The pricing widget uses the same **Appearance** as the schedule: theme, colours,
font, text size, corners, spacing and card shadow. See
[Match your brand](/help-center/website-integration#match-your-brand). The
**Schedule cards** settings apply to the schedule only.

## Buying from the widget

When a visitor selects **Buy**, **Join** or **Book now**, the offer's page opens
in a small window over your website. It is the same page as on your Naayya
Pricing page. The visitor signs in, or creates an account, and pays there.

- When the purchase is confirmed, the window closes and the widget shows
  **Purchase complete**.
- A single-visit intro offer opens its service's booking page with the offer
  chosen. When that booking is confirmed, the widget shows **Booking
  confirmed**.
- If the visitor closes the window without buying, nothing changes.
- If the visitor's browser blocks pop-up windows, the offer opens in a new tab
  instead, and the widget does not show a confirmation.

The widget is told only that a purchase or booking was confirmed and what kind
it was. It is never told who bought or what they paid.

## Your websites

The websites you list under **Your websites** in the Website embed section apply to every
widget. Only those websites can show the pricing widget in a frame or load it
from the code. See [Your websites](/help-center/website-integration#your-websites).

## React and Next.js

For an app built with Lovable, choose **Lovable** and select **Copy React
code**. In another React or Next.js app, use the wrapper directly:

```jsx
import { createNaayyaPricing } from 'https://www.naayya.com/plugin/v2/react.js'
import React from 'react'

const NaayyaPricing = createNaayyaPricing(React)

export function Pricing() {
  return <NaayyaPricing businessId="YOUR_EMBED_KEY" />
}
```

## Related

- [Website Integration](/help-center/website-integration)
- [Show your gift cards on your website](/help-center/website-gift-cards-widget)
- [Share Class Packs and Memberships Online](/help-center/public-product-storefront)
- [Website integration troubleshooting](/help-center/website-integration-troubleshooting)