Updated 12/21/2024

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:

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.