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:

<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:

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:

<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:

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
• What customers see in website integrations
• Website integration troubleshooting