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 for the guide to each builder.
Add the pricing widget#
- Open Admin → Settings → Storefront → Website embed.
- Under Which widget?, select Pricing.
- 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.
- 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:
<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 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. 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.
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:
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" />
}