# What Customers See in Website Integrations

Understand the schedule views, filters, and booking actions customers see on your website

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

# What Customers See in Website Integrations

The v2 schedule widget shows your public class schedule on the page where you
place it. The exact classes, images, instructors, locations, and availability
come from your current Naayya schedule.

## Calendar View

### Desktop Display

Customers can switch between **Week** and **Month** views, move to the previous
or next period, or select **Today**. A selected day shows its scheduled classes
as cards.

Each class card can show its image, name, class label, instructor, description,
time, location, category, availability, and a booking button when those details
are available for that class.

### Mobile Display

The widget adapts its cards and detail actions to the available width. In a
narrow embed, the card image and booking action move into a stacked layout so
the class information remains usable.

### Customer Actions

- Switch between **Week** and **Month**.
- Move between periods with the previous and next controls, or return to
  **Today**.
- Select a day to see its classes.
- Select a class card to open its details.
- Select **Book** when the class is available.

## List View

### Display Elements

The current schedule view lists the selected day's classes below the calendar.
The day heading shows the date, whether it is **Today**, and the number of
classes or sessions. A card can show:

- the class image or an initial-based placeholder;
- the class name and description;
- instructor and location;
- start time and duration;
- category;
- remaining places or **Fully booked**; and
- a booking button when the class can be booked.

### Customer Actions

Customers can select a card to read its details. From the detail view they can
see the date and time, location, description, instructor information, and
availability, then choose the booking action when it is available.

## Classes View

### Display Elements

The v2 website integration is a schedule, rather than a separate class catalog
or search page. Customers see the class sessions in the selected day and can
move through the week or month to find another date.

### Customer Actions

Customers can navigate to a date, use the available filters, open class details,
and start a booking. The widget does not promise a separate text search or a
catalog view.

## Shop View

The website Schedule integration does not include a Shop view or product
browsing page. It shows class sessions and booking actions.

### Display Elements

The Schedule integration does not display product cards, prices, stock, or cart
controls.

### Customer Actions

Customers use this integration to browse classes and start a booking. Product
purchases stay on the shop or product pages you already maintain on your
website.

## Filter Behavior

### Visible Filters

When filters are enabled and data is available, customers can see dropdowns for
instructors, locations, and categories. A filter may not appear when there are
no values to choose from or when the business has hidden or pre-configured it.

### Category Legend

The schedule uses category names and, where a category colour is available, a
colour marker on the class card. The current widget does not show a separate
category chip legend.

### Pre-configured Filters

When you set `locations`, `teachers`, or `categories` in the embed code, the
schedule is limited to those values and the matching customer filter is hidden.
When you set `hide-filters`, all filter controls are hidden. Use the **Options**
and **Pre-filters** controls in Website Integration to generate these choices.

## Interactive Elements

### All Views Include

- **Week** and **Month** navigation.
- A loading state while schedule data is being prepared.
- A clear message and **Try again** action when the schedule cannot load.
- Class detail panels with a close action.
- A booking action that opens the Naayya booking page in a new tab.
- Brand styling from your generated Website Integration code.

### Mobile Optimizations

The widget uses a responsive card layout. On narrow embeds, the card stacks its
image, class information, availability, and booking action so customers can
read and tap the controls without the desktop layout overflowing.