nylas-booking-form

The nylas-booking-form element allows users to book an event. It collects participants’ information including their name, email address, and any additional fields configured for the Scheduling Page.

PreviewCode

import { NylasBookingForm } from '@nylas/react';

export default function NylasBookingFormExample() {
return (
<div className="inline-block border border-dashed border-gray-300 min-w-[400px] rounded-md p-4">
  <NylasBookingForm />
</div>
);
}

Properties

selectedLanguage?

Name	selectedLanguage
Description	The selected language.
Type	LANGUAGE_CODE.de | LANGUAGE_CODE.en | LANGUAGE_CODE.es | LANGUAGE_CODE.fr | LANGUAGE_CODE.ja | LANGUAGE_CODE.ko | LANGUAGE_CODE.nl | LANGUAGE_CODE.sv | LANGUAGE_CODE.zh | undefined

selectedTimeslot?

Name	selectedTimeslot
Description	The selected time slot.
Type	undefined | { start_time: Date; end_time: Date; emails?: string[] | undefined; capacity?: number | undefined; event_id?: string | undefined; master_id?: string | undefined; calendar_id?: string | undefined; }

Standalone properties

The following props are automatically configured when used within NylasScheduling. Set these props manually only if you’re using the component independently.

bookingInfo?

Name	bookingInfo
Description	The booking information.
Type	undefined | { primaryParticipant: NylasSchedulerBookingParticipant; startTime?: Date | undefined; endTime?: Date | undefined; timezone?: string | undefined; language?: string | undefined; guests?: NylasSchedulerBookingParticipant[] | undefined; additionalFields?: Record<string, { value: string; type?: string | undefined; readOnly?: boolean | undefined; }> | undefined; }

configSettings?

Name	configSettings
Description	The Configuration settings for the Scheduler.
Type	undefined | { configuration_id: string; booking?: { additional_fields: Record<string, string>; additional_guests: { email: string; name: string; }[]; booking_ref: string; booking_ref_salt: string; guest: { email: string; name: string; }; timezone: string; email_language: string; event_data: { location: string; when: { start_time: Date; end_time: Date; end_timezone: string; start_timezone: string; object: string; }; }; event_organizer: { name: string; email: string; is_organizer: boolean; }; } | undefined; scheduler: { available_days_in_future: number; min_cancellation_notice: number; min_booking_notice: number; rescheduling_url?: string | undefined; cancellation_url?: string | undefined; cancellation_policy?: string | undefined; hide_additional_guests?: boolean | undefined; hide_cancellation_options?: boolean | undefined; hide_rescheduling_options?: boolean | undefined; additional_fields?: Record<string, AdditionalFields> | undefined; confirmation_redirect_url?: string | undefined; organizer_confirmation_url?: string | undefined; }; organizer: { name: string; email: string; }; slug: string; appearance: Appearance; booking_type: string; name: string; }

eventInfo?

Name	eventInfo
Description	The booked event. Used to track if a booking is created in an eventOverride.
Type	undefined | { booking_id: string; organizer: { email: string; name: string; is_organizer?: boolean | undefined; }; title: string; description: string; status: string; event_id: string; location: string; booking_ref: string; }

isLoading?

Name	isLoading
Description	The loading state.
Type	boolean | undefined

themeConfig?

Name	themeConfig
Description	The theme configuration.
Type	any

Events

Event	Description
backButtonClicked	Fired when the cancel button is clicked.
bookingFormError	Fired when an error occurs in the booking form validation.
bookingFormSubmitted	Fired immediately after the book button is clicked. The booking form validation is not complete at this point.
detailsConfirmed	Fired when the book button is clicked and the form validation is complete and successful. This event is fired before the booking request is sent.
emailChanged	Fired when the email is changed.
nameChanged	Fired when the name is changed.

CSS parts

Part	Description
nbf	The booking form host.
nbf__button-ghost	The ghost button.
nbf__button-outline	The outline button.
nbf__button-primary	The primary button.
nbf__checkbox-component	The checkbox component.
nbf__date-component
nbf__dropdown	The dropdown component.
nbf__dropdown-button	The dropdown button.
nbf__dropdown-content	The dropdown content.
nbf__input-textfield	The input textfield.
nbf__input-wrapper	The input wrapper.
nbf__radio-button-group	The radio button group.
nbf__textarea-component	The textarea component.

Code samples

The nylas-booking-form element is automatically included in the main NylasScheduling component. The following code samples show how to use the element on its own.

StandaloneEvent handlersCustom theme

<nylas-booking-form
  booking-info='{
    "primaryParticipant": {
      "name": "John Doe",
      "email": "[email protected]"
    },
    "startTime": "2024-01-15T10:00:00Z",
    "endTime": "2024-01-15T11:00:00Z",
    "timezone": "America/New_York"
  }'
  config-settings='{
    "configuration_id": "your-config-id",
    "scheduler": {
      "additional_fields": {
        "phone": {
          "type": "phone_number",
          "label": "Phone Number",
          "required": false
        }
      }
    }
  }'
  on-details-confirmed="handleBookingConfirmed"
  on-booking-form-error="handleBookingError">
</nylas-booking-form>

function handleNameChange(event) {
  console.log('Name changed:', event.detail);
}

function handleEmailChange(event) {
  console.log('Email changed:', event.detail);
}

function handleBackButton(event) {
  console.log('Back button clicked');
}

function handleBookingConfirmed(event) {
  console.log('Booking confirmed:', event.detail);
  // Handle the booking data
}

<nylas-booking-form
  booking-info="..."
  config-settings="..."
  theme-config='{
    "--nylas-primary": "#007bff",
    "--nylas-base-100": "#ffffff",
    "--nylas-border-radius": "8px"
  }'>
</nylas-booking-form>