Website Integration

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

New setups use the v2 widget. You copy the code from Admin → Settings → Website Embed, 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 Embed. Naayya has already created your embed key and put it in the code. Select Copy embed code, or open See code to read the snippet first. The page also shows a live Preview of the embed.

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://www.naayya.com/plugin/v2/loader.js"></script>
<naayya-schedule business-id="YOUR_EMBED_KEY"></naayya-schedule>

Use the copied snippet rather than typing your own: it holds your embed key and any appearance choices you made. It also sets mode="inline" and hide-filters, so visitors see the schedule without filter controls unless you select Let visitors filter the schedule. If your site builder removes custom HTML tags, use its Custom HTML, Code, or Embed HTML block instead of a rich-text block.

What the schedule shows#

The schedule lists your public classes, workshops, and courses. Each card is labelled Class, Workshop, or Course, and the booking button depends on what it is:

• Classes show Book.
• Workshops show Book workshop. A Tickets from price appears only when the workshop has its own linked ticket product, not from a class pack or membership.
• Courses show View course, which opens the whole-course page in a new tab. When a single session can also be booked on its own and has its own price, a second button, Single session with that price, opens that session's checkout. A course does not appear in the schedule until it has an active, published whole-course program.

Appointments and retreats are not part of this schedule. Older snippets that include a kinds attribute keep working and show the same classes, workshops, and courses.

Options#

The Website Embed page writes business-id, mode, and hide-filters, plus your colour, font, and corner choices when you customize the embed. 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 Embed 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#

By default the embed follows your saved business brand, and the copied code has no colour overrides. When you change your brand, the embed on your website changes with it. The Appearance section says which style is in use.

To set different colours for the embed only, select Customize this embed and choose Button color, Background, Text color, Font, and Corner shape (Square, Soft, or Round). These choices are written into the snippet, so copy the code again and replace the old snippet on your website. The Preview is the real embed, and you can check it in Desktop and Mobile layouts.

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://www.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 snippet on the Website Embed page.

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, workshop, and course information. When a visitor selects a booking button, Naayya opens the hosted booking or course 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