# Show Your Services on Your Website
Add appointments and court hire to your website so visitors can pick a free time and book it in a Naayya window
Canonical URL: https://www.naayya.com/help-center/website-services-widget
Category: integrations
Last updated: 2026-11-07T12:00:00Z
# Show Your Services on Your Website
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](/help-center/website-integration) for the
guide to each builder.
## Add the services widget
1. Open **Admin → Settings → Storefront → Website embed**.
2. Under **Which widget?**, select **Services**.
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 services to appear, in the same kind of block
you would use for the schedule.
The code looks like this:
```html
```
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](/help-center/how-customers-book).
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](/help-center/website-integration#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](/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 { createNaayyaServices } from 'https://www.naayya.com/plugin/v2/react.js'
import React from 'react'
const NaayyaServices = createNaayyaServices(React)
export function Services() {
return
}
```
## Related
- [Website Integration](/help-center/website-integration)
- [Show your pricing on your website](/help-center/website-pricing-widget)
- [Show your gift cards on your website](/help-center/website-gift-cards-widget)
- [Website integration troubleshooting](/help-center/website-integration-troubleshooting)