Add your Naayya class schedule to your own website. Visitors browse your classes and book without leaving your site, and the schedule styles itself to your brand.
The current widget (v2) is a web component: it renders directly in your page, with no iframe and no fixed height to manage. The older iframe widget (v1) still works but is being phased out, so set up new websites with the steps below.
Who this is for#
Business owners and managers who want their schedule on a site they run themselves (WordPress, Wix, Squarespace, GoDaddy, or any builder where you can paste HTML).
Get your embed key#
Go to Settings → Website Integration. Naayya issues a public embed key for your business and shows a ready-to-copy snippet. The key carries no private data, and you can re-theme or re-configure the widget later without changing the code on your website.
Add the schedule (2 lines)#
Paste these where you want the schedule to appear:
<script type="module" async src="https://naayya.com/plugin/v2/loader.js"></script>
<naayya-schedule business-id="YOUR_EMBED_KEY"></naayya-schedule>The script loads once. Every <naayya-schedule> on the page then renders on its own, so there is no extra setup per block.
Options#
Set these as attributes on the <naayya-schedule> element:
| Attribute | Values | What it does |
|---|---|---|
business-id |
embed key | Required. Your public embed key from Settings → Website Integration. |
mode |
inline (default), popup, float |
How the widget appears. See below. |
theme |
light (default), dark, auto |
Colour theme. auto follows the visitor's system setting. |
trigger-label |
text | Button text for popup and float modes. |
teachers |
comma-separated ids | Show only specific instructors (hides the filter). |
locations |
comma-separated ids | Show only specific locations. |
categories |
comma-separated names | Show only specific class categories. |
hide-filters |
present or absent | Hide all filter controls. |
Display modes#
inline: the schedule renders in place. Best for a dedicated Schedule or Classes page.popup: renders a button; clicking it opens the schedule in a pop-up.float: a floating button fixed to the bottom-right, opening the same pop-up. Good for a site-wide "Book a class" entry point.
<naayya-schedule business-id="YOUR_EMBED_KEY" mode="popup" trigger-label="Book a class"></naayya-schedule>Match your brand#
The widget picks up your studio brand automatically. To fine-tune, override any of these tokens from your own site's CSS (your CSS always wins):
naayya-schedule {
--naayya-color-primary: #2f3e35;
--naayya-color-surface: #f6f4ef;
--naayya-color-text: #2a2724;
--naayya-color-muted: #6b655c;
--naayya-color-accent: #8a6f52;
--naayya-radius: 16px;
--naayya-font: "Georgia", serif;
}The widget renders in an isolated Shadow DOM, so your site's styles and the widget's styles never interfere with each other.
React and Next.js#
For React apps, use the wrapper. It is safe for server-side rendering and accepts typed props (businessId, mode, theme, triggerLabel, teachers, locations, categories, hideFilters, plus style and className):
import { createNaayyaSchedule } from 'https://naayya.com/plugin/v2/react.js'
import React from 'react'
const NaayyaSchedule = createNaayyaSchedule(React)
export function Schedule() {
return <NaayyaSchedule businessId="YOUR_EMBED_KEY" mode="inline" theme="auto" />
}Where to paste it#
- WordPress: edit the page, add a Custom HTML block, paste the two lines, publish.
- Squarespace: edit the page, add a Code block, paste, save.
- Wix: add an Embed HTML element, paste, update.
- GoDaddy and others: use any HTML or embed section.
What the widget does not do#
Booking and payment happen on a hosted Naayya page, not inside the widget, and the widget shows only public class data. So a visitor's details are never exposed to your website.
Classic embed (v1, being phased out)#
If your site already uses the older iframe or data-naayya-calendar embed (https://naayya.com/plugin/v1/embed.js), it keeps working for now. There is no rush to change it, and we will give clear notice before v1 is retired. When you do move over, get an embed key as above and replace the old snippet with the two v2 lines; the old ?view= and data-naayya-* options map to the attributes in the table above.