Docs
  • All For Customers guides
  • Credits, memberships, and orders
  • Customer FAQ
  • Health information and consent
  • Join an online class or appointment
  • Manage bookings and appointments
  • Profile, payment methods, and settings
  • Wallet and gift cards
  • Your customer account
  • All For Instructors guides
  • Instructor FAQ
  • Manage Attendance
  • Manage Your Profile
  • My Work Overview
  • View Your Payslips
  • View Your Schedule and Attendees
  • All Getting Started guides
  • Attendance policy
  • Booking Policies
  • Choose the order customers see
  • Contracts
  • Features
  • Find your settings
  • Manage Locations and Resources
  • Media Library
  • Notification Settings
  • Plan Features
  • Platform Overview
  • Quick Start Guide
  • Reports
  • Studio Profile & Social Links
  • Switch offerings on and off
  • Using the Agent
  • Waivers & Terms
  • All Customer Management guides
  • Check people in at the entrance
  • Coupons
  • Customer Bookings
  • Customer Credit Expiry
  • Customer Details
  • Customer List
  • Export Data
  • Leads Management
  • Manage Discounts and Promotional Codes
  • Manage Family memberships
  • Products & Credits
  • Referrals
  • All Classes guides
  • Activity Categories
  • Booking Availability on Class Sessions
  • Calendar
  • Cancelling and Deleting Class Sessions
  • Closing Bookings on a Class
  • Creating Classes
  • Editing Future Class Instances
  • Instructor Assignments on Class Instances
  • Managing, Extending, and Deleting Class Series
  • Set up online classes and appointments
  • Waitlists for Classes
  • Workshop vs Course: Which One Should You Use?
  • All Services guides
  • Create Services
  • How Customers Book Services
  • Manage Resources for Services
  • Set Availability Schedules
  • All Appointments guides
  • Customers Managing Their Appointments
  • Reschedule or Cancel Appointments
  • View and Manage Appointments
  • All Pricing guides
  • Class Coverage for Products
  • Creating Memberships
  • Creating Packs
  • Product Settings Guide
  • Product Types Overview
  • Share Class Packs and Memberships Online
  • All Products guides
  • Creating Physical Products
  • All Troubleshooting guides
  • Common Issues & Solutions
  • All Payments & Billing guides
  • Abandoned Checkout Recovery
  • Annual summary
  • Billing details and invoices
  • Booking & Checkout Settings
  • Gift Cards
  • Invoice vs Receipt: What Naayya Provides
  • Manage hardware
  • Manage sales points
  • Payment Methods & Payouts
  • Payment Review
  • Payment Troubleshooting
  • Point of Sale
  • Record Offline Payments
  • Set Up Get Paid
  • Tax Settings
  • Usage
  • Use Naayya POS on iPad
  • All Integrations guides
  • Add a Lead Form to Your Website
  • Add your schedule to a Lovable app
  • Add your schedule to Framer
  • Add your schedule to Shopify
  • Add your schedule to Squarespace
  • Add your schedule to Webflow
  • Add your schedule to Wix
  • Add your schedule to WordPress
  • Manage integrations
  • Show Your Gift Cards on Your Website
  • Show Your Pricing on Your Website
  • Show Your Services on Your Website
  • Website Integration
  • Website Integration Troubleshooting
  • Website settings
  • What Customers See in Website Integrations
  • All Email Marketing guides
  • Create Instagram Content
  • Domain Verification Setup
  • Getting Started with Email Marketing
  • Managing Email Templates
  • Sending Email Campaigns
  • Sending Quick Emails
  • Using the Email Designer
  • All Automations guides
  • Editing an Automation
  • Getting Started with Automations
  • All Team & Access guides
  • Access Control
  • Adding Staff Members
  • Instructor profiles on a staff page
  • Instructor Status Management
  • Managing Instructor Profiles
  • People Overview
  • Provider Profiles
  • Public Profiles for Staff Who Teach
  • Roles & Permissions
  • Staff Management
  • User Roles
  • All Finance guides
  • Create a payslip
  • Pay rules
  • Payouts
  • Payslips
  • All Performance guides
  • Attendance Rates
  • Class Fill %
  • Retention Rates
  • Session Feedback Stats
  • All Community / Feedback guides
  • Private Feedback
  • Reviews
DocsNaayya appBlogContact support
  1. Docs
  3. Integrations
  5. Add your schedule to a Lovable app
Open app

Add your schedule to a Lovable app

Add the Naayya schedule to a React app built with Lovable

Use this if your website is a React app built with Lovable, or another tool that writes React code.

Add the schedule#

  1. In Naayya, open Admin → Settings → Storefront → Website embed. Under Website code, in Where is your website built?, choose Lovable, then select Copy React code. The code is a React component called NaayyaSchedule.
  2. In Lovable, ask it to add the component, for example: "Create src/components/NaayyaSchedule.tsx with this code, and show <NaayyaSchedule /> on the page where people book." Paste the code after your message.
  3. Check the page in Lovable's preview, then publish.

The schedule keeps working when visitors move between pages of your app and come back.

What your visitors see#

The schedule shows your public classes, workshops and courses, in the look you set under Appearance in the Website embed section. A change you make there shows on your website the next time a page loads, without new code.

When a visitor selects Book, Naayya's booking page opens in a small window over your website. Sign-in and payment happen on that Naayya page. When the booking is confirmed, the schedule says so. See What customers see in website integrations.

Related#

  • Website integration
  • Website integration troubleshooting
PreviousAdd a Lead Form to Your WebsiteNextAdd your schedule to Framer

On this page