# Website Integration

Add your Naayya class schedule to your website so visitors can browse classes and start a booking

Canonical URL: https://www.naayya.com/help-center/website-integration
Category: integrations
Last updated: 2026-09-19T14:00:00Z

# Website Integration

Add your Naayya class schedule to your own website. Visitors can browse
upcoming classes, open class details, and start a booking from the widget.

New setups use the v2 widget. You create the code in **Admin → Settings →
Website Integration**, then paste it into your website.

## Who this is for

Business owners and managers who run their own website and can paste HTML into
it. The widget works with site builders that provide an HTML, Custom HTML, or
Code block, including WordPress, Squarespace, Wix, and GoDaddy.

## Get your embed key

Open **Admin → Settings → Website Integration**, choose **Schedule**, and select
**Customize**. When the preview looks right, select **Get Code**. Naayya
generates a ready-to-copy v2 snippet for your schedule.

## Add the schedule (2 lines)

Paste the generated code into the HTML or code block where you want the
schedule to appear. A minimal v2 snippet looks like this:

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

Use the generated snippet when you have set a height, style, or pre-filter in
the Website Integration page. If your site builder removes custom HTML tags,
use its Custom HTML, Code, or Embed HTML block instead of a rich-text block.

## Options

If you edit the v2 element yourself, these attributes control its display:

| Attribute | Values | What it does |
|---|---|---|
| `business-id` | embed key | Required. Identifies the schedule to show. Keep the value from the generated snippet. |
| `mode` | `inline` (default), `popup`, `float` | Shows the schedule in place, behind a button, or behind a floating button. |
| `theme` | `light` (default), `dark`, `auto` | Sets the widget's colour theme. `auto` follows the visitor's system setting. |
| `trigger-label` | text | Button text for `popup` and `float` modes. |
| `teachers` | comma-separated ids | Pre-filters the schedule to selected instructors. |
| `locations` | comma-separated ids | Pre-filters the schedule to selected locations. |
| `categories` | comma-separated names | Pre-filters the schedule to selected class categories. |
| `hide-filters` | present or absent | Hides the filter controls. |

### Display modes

- **`inline`**: shows the schedule where you place the element. This is the
  default and the mode produced by the Website Integration page.
- **`popup`**: shows a button that opens the schedule in a pop-up.
- **`float`**: shows a floating button that opens the schedule. Use it as a
  site-wide booking entry point only when it fits your site's layout.

For example:

```html
<naayya-schedule business-id="YOUR_EMBED_KEY" mode="popup" trigger-label="Book a class"></naayya-schedule>
```

## Match your brand

Use the **Style** controls in **Customize** to set colours, typography, spacing,
button shape, and card treatment. Use **Preview** to check the result in the
**Desktop** and **Mobile** layouts, then select **Get Code** to copy the
updated snippet.

## React and Next.js

If your site is a React or Next.js application, Naayya provides a React
wrapper for the same schedule widget:

```jsx
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" />
}
```

Keep the `businessId` value from the generated Website Integration snippet.

## Where to paste it

- **WordPress**: edit the page and add a **Custom HTML** block.
- **Squarespace**: edit the page and add a **Code** block.
- **Wix**: add an **Embed HTML** element.
- **GoDaddy and other builders**: use an HTML or embed section that accepts
  custom elements.

## What the widget does not do

The schedule widget displays public class information. When a visitor selects
**Book**, Naayya opens the booking page in a new tab. The widget does not
provide an in-widget checkout.

## Classic embed (v1, being phased out)

If your site already uses the older iframe or `data-naayya-calendar` embed, it
remains available for compatibility. New setup and current widget improvements
use v2. To move an existing site, replace the old snippet with the generated
v2 code and review the result in your website preview.

## Related

- [Add a lead form to your website](/help-center/website-lead-form)
- [What customers see in website integrations](/help-center/website-integration-customer-view)
- [Website integration troubleshooting](/help-center/website-integration-troubleshooting)