Website Integration

Embed your booking calendar, programs, or product shop directly on your website. Customers can browse and book without leaving your site.

Integration Types#

Type	Best For	Display
Calendar	Regular schedules	7-day week view (desktop), daily list (mobile)
List	Mobile users	Daily schedule with Today/Tomorrow tabs
Programs	Course overview	Program cards with next class times
Shop	Products/merchandise	Product grid with prices and stock

Setup Process#

1. Choose Integration Type#

Go to Admin > Settings > Website Integration and select your preferred view.

2. Customize Appearance#

• Height: 300-1200px (default: 600px)
• Calendar Colors: Match your brand with custom primary, background, text, and border colors
• Filter Visibility: Show/hide search and filter controls
• Pre-filters: Set default locations, teachers, categories, or search terms

3. Get Embed Code#

Copy one of three embed methods:

Iframe (Recommended)#

Best for WordPress, Squarespace, Wix:

<iframe src="https://naayya.com/embed/your-studio/widget" 
        width="100%" height="600" frameborder="0"></iframe>

HTML + Script#

Best for basic websites:

<div data-naayya-calendar data-naayya-studio="your-studio"></div>
<script async src="https://naayya.com/plugin/v1/embed.js"></script>

JavaScript#

Best for custom applications:

<div id="my-calendar"></div>
<script src="https://naayya.com/plugin/v1/embed.js"></script>
<script>
  NaayyaCalendar.init('#my-calendar', 'your-studio', {
    defaultView: 'calendar',
    height: '600px'
  });
</script>

Customization Options#

Calendar Style Controls#

Customize colors to match your brand:

• Primary Color: Buttons, links, and accents (#F55E12 default)
• Background Color: Widget background (transparent default)
• Text Color: All text and labels (inherit default)
• Border Color: Card borders and dividers (#e5e7eb default)

Filter Controls#

• Show Filters: Location, teacher, category dropdowns
• Show Search: Search bar for programs/shop
• Pre-configure: Set default filters that customers can't change

Pre-filter Examples#

• Lock to specific location: data-naayya-locations="location-id"
• Show only yoga classes: data-naayya-categories="yoga"
• Default search term: data-naayya-search="beginner"
• Price range (shop): data-naayya-min-price="10" data-naayya-max-price="50"

Platform Installation#

WordPress#

1. Edit page/post → Add Custom HTML block
2. Paste iframe code → Publish

Squarespace#

1. Edit page → Add Code Block
2. Paste iframe code → Save

Wix#

1. Add HTML element to page
2. Paste iframe code → Update

Custom Website#

Use HTML + Script method for more control over positioning and styling.