The services widget shows the services customers book by choosing a time, such as a massage, a personal training session or court hire, on your own website. A visitor picks a day and a free time, and the booking opens on Naayya in a small window over your website, with that time already chosen. They sign in and book there.
Who this is for#
Business owners and managers who run their own website and take appointment or court bookings on Naayya. The widget works in the same website builders as the schedule. See Website Integration for the guide to each builder.
Add the services widget#
- Open Admin → Settings → Storefront → Website embed.
- Under Which widget?, select Services.
- 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 services 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-services business-id="YOUR_EMBED_KEY"></naayya-services>Use the copied code rather than typing your own: it holds your embed key. You can show the schedule, the pricing widget and the services 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 the services your Appointments page lists, in the same order. A service customers cannot book online does not show. Each card shows:
- The name, the photo and the short description.
- How long it takes, and how many ways there are to pay when there is more than one.
- The price. When VAT is added at checkout, the price says excl. VAT. A price charged for each person says per person, and a service with no single price says Price varies.
- A Choose a time button.
When the widget shows only one service, it opens straight on that service's days and free times.
Choosing a time#
After Choose a time, the widget shows a row of days, starting today, with arrows for earlier and later days. It goes as far ahead as customers can book on your Appointments page. Selecting a day shows its free times.
The free times are the ones your Appointments page offers: your opening hours, your staff's or your courts' hours, the notice you ask for, and the times already booked. A time your rule for people without a membership keeps from them, such as a time outside the hours it allows, does not show. A members-only service still shows its free times, and the booking page tells a visitor who is not a member that it is for members. The widget never shows who is free at a time, or which court.
Your Appointments page may be called Courts or Book on your storefront. See How customers book services.
When a visitor selects a time, the service's booking page opens in a small window over your website, with that day and time chosen:
- The visitor signs in, or creates an account, and books there. Where you let customers choose who they see or which court they play on, they choose on that page.
- They pay by card, or use a pass or class pack they already have. Where you offer it, they can also choose Charge to my account.
- When the booking is confirmed, the window closes and the widget shows Booking confirmed.
- If someone else booked the time in the meantime, the booking page says so, and the visitor picks another time there.
- If the visitor closes the window without booking, nothing changes.
- If the visitor's browser blocks pop-up windows, the booking opens in a new tab instead, and the widget does not show a confirmation.
The widget is told only that a booking was confirmed. It is never told who booked or what they paid.
Choose which services show#
In the Website embed section, with Services selected, the Services section sets which services the widget shows:
- Show everything (on): every service customers can book online, in the same order, including any you add later.
- Show everything (off): only the services you turn on, in the order you set. Turn each service on or off, and use the up and down arrows to move it. A service you add later stays off until you turn it on.
If you stop taking online bookings for a chosen service for a while, it leaves the widget. When customers can book it online again, it comes back in the same place.
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 services 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.
Your websites#
The websites you list under Your websites in the Website embed section apply to every widget. Only those websites can show the services 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 { createNaayyaServices } from 'https://www.naayya.com/plugin/v2/react.js'
import React from 'react'
const NaayyaServices = createNaayyaServices(React)
export function Services() {
return <NaayyaServices businessId="YOUR_EMBED_KEY" />
}