# Nylas-hosted Scheduling Pages

Source: https://developer.nylas.com/docs/v3/scheduler/hosted-scheduling-pages/

Nylas automatically generates a hosted Scheduling Page when you [create a public Configuration](/docs/v3/scheduler/#create-a-configuration) with a slug. Hosted Scheduling Pages provide the scheduling UI and booking flow without you needing to embed components in your project.

## How hosted Scheduling Pages work

When you [create a public Configuration](/docs/v3/scheduler/#create-a-configuration) with a slug, Nylas automatically generates a hosted Scheduling Page at `book.nylas.com/<SLUG>`. This page handles...

- Date and time selection for booking events.
- Collecting guest information using booking forms.
- Displaying booking confirmation information and sending confirmation messages.
- Optimizing the Scheduling Page for mobile devices.
- Automatic language detection and localization.

## Redirect users to hosted Scheduling Page

If you're using a hosted Scheduling Page in your project, you need to redirect your users to it. The following example redirects the user to the Scheduling Page after they click a button.

```tsx
function ScheduleButton() {
  const handleClick = () => {
    window.open("https://book.nylas.com/<SLUG>", "_blank");
  };

  return <button onClick={handleClick}>Schedule a Meeting</button>;
}
```

## Subscribe to webhook notifications

If you want to receive real-time updates when bookings are made using your Scheduling Page, you can subscribe to [`booking.created` webhook notifications](/docs/reference/notifications/scheduler/booking-created/).

> **Info:** 
> **You need to have a functioning webhook endpoint to receive webhook notifications**. For more information, see [Using webhooks with Nylas](/docs/v3/notifications/).

```bash
curl --request POST \
  --url "https://api.us.nylas.com/v3/webhooks" \
  --header 'Accept: application/json' \
  --header 'Authorization: Bearer <NYLAS_API_KEY>' \
  --header 'Content-Type: application/json' \
  --data '{
    "triggers": ["booking.created"],
    "url": "<WEBHOOK_URL>"
  }'
```

## Customize hosted Scheduling Page

You can specify certain settings to customize your hosted Scheduling Pages.

### Pre-fill the booking form

Hosted Scheduling Pages support URL query parameters to pre-fill booking form fields. This lets you pass known values (for example, the guest's name or email address) directly in the link to your Scheduling Page. Hosted Scheduling Pages support the following query parameters:

- `name`: The guest's name.
- `email`: The guest's email address.
- Any keys in `additional_fields` that you defined in your [Configuration](/docs/reference/api/configurations/post-configurations/).

> **Success:** 
> **Query parameters persist on rescheduling, cancellation, and booking confirmation pages**.

For example, the following URL pre-fills the guest's name, email address, and an additional field (`patient_id`):

```bash
https://book.nylas.com/us/<NYLAS_CLIENT_ID>/meet-nylas/?name=Leyah&email=leyah@example.com&patient_id=a1234
```

You can add `__readonly` to any query parameter in the URL to make a pre-filled field read-only (for example, `?name__readonly=Leyah`).

### Set the page time zone

Hosted Scheduling Pages load in the guest's detected time zone by default. To force a specific one, add a `timezone` query parameter set to an [IANA time zone name](https://www.iana.org/time-zones), such as `America/New_York`. This is useful when a guest's detected zone is wrong, for example when they connect through a VPN.

```bash
https://book.nylas.com/us/<NYLAS_CLIENT_ID>/meet-nylas/?timezone=America/New_York
```

Unlike the pre-fill parameters, `timezone` doesn't support the `__readonly` suffix. It sets the page's initial time zone, but the guest can still change it in the time zone picker.

### Customize Scheduling Page style


You can style Nylas-hosted Scheduling Pages to match your brand's aesthetic. Nylas supports the following pre-defined keys in the `appearance` object:

- `color`: The primary color of the Scheduling Page.
- `company_logo_url`: A URL that points to the company logo. If not set, the Scheduling Page displays the Nylas logo.
- `submit_button_label`: Custom text for the Submit button. If not set, the button uses the default "Submit" label.
- `thank_you_message`: A custom "thank you" message to display on the Confirmation page.

The following examples add the company logo URL, primary color, submit button label, and "thank you" message options to the Scheduler Editor.

```html [hostedStyling-HTML/Vanilla JS]

<script>
  import { defineCustomElement } from "https://cdn.jsdelivr.net/npm/@nylas/web-elements@latest/dist/cdn/nylas-scheduler-editor/nylas-scheduler-editor.es.js";
  defineCustomElement();
</script>

<nylas-scheduler-editor>
  <div slot="custom-page-style-inputs">
    <label>Company logo URL</label>
    <input-image-url name="company_logo_url"></input-image-url>

    <label>Primary color</label>
    <input-color-picker name="color"></input-color-picker>

    <label>Submit button label</label>
    <input-component name="submit_button_label" type="text"></input-component>

    <label>Thank you message</label>
    <text-area-component
      name="thank_you_message"
      placeholder="You'll receive an email confirmation soon."
    >
    </text-area-component>
  </div>
</nylas-scheduler-editor>


```

```tsx

  <div slot="custom-page-style-inputs">
    <div>
      <label>Company logo URL</label>
      
    </div>

    <div>
      <label>Primary color</label>
      <div className="color-picker-container">
        
      </div>
    </div>

    <div>
      <label>Submit button label</label>
      <div>
        
      </div>
    </div>

    <div>
      <label>Thank you message</label>
      <div>
        
      </div>
    </div>
  </div>
</NylasSchedulerEditor>;


```