Version:
Only show these results:

Customizing the v2 Scheduling page

The custom options for Scheduling Pages offer a consistent streamlined experience for your users. Use the configuration block appearance with respective options within defaults to include customizations for Scheduling Pages.

These customizations work for both creating Schedule Editor and Scheduling Page on their own as well as when calling nylas.schedule.show as a function.

Theme and Color

Configure the theme of Scheduling Pages for your users to update the color to match your organization's design.

A series of three overlapping Nylas Scheduler pages with custom color schemes. From left to right, the pages use green, purple, and blue color schemes.

The code below shows how to include the changes to color.

{
"appearance": {
"color": "#990066"
},
...
}

Best Practices

The background color isn't configurable for the Scheduling Page. In addition, colors such as red, white, and black may confuse visitors.

Company Branding

Incorporate a custom logo and company name to change the branding at the top of the Scheduling Page to maintain consistency for your users.

The top of a Scheduler page with a custom logo. The custom logo on the page is circled in red. The company name in the tab title is circled in red.

The code below shows how to include a custom logo and company name.

{
"appearance": {
"logo": "https://example.com/logos/company_name.png"
"company_name": "Company Name",
},
...
}

User Interface Options

You're also able to change specific text as well as include robust redirecting with relevant data for enhanced customization and connectivity.

Custom Text

Control the displayed text for the submission button as well as the thank you text offered through the process on the Scheduling Page.

In these examples, the button's text reads Schedule Webinar, and the text after submitting offers additional instructions.

The Nylas Scheduler showing the details of a one-on-one coffee chat. The participant information fields are filled in with demo information. The custom "Schedule webinar" button is circled in red.

The Nylas Scheduler showing the details of a one-on-one coffee chat. The custom "Thank you" message is circled in red.

The code below shows how to include the changes to the submit button and the thank you text.

{
"appearance": {
"submit_text": "Schedule Webinar"
"thank_you_text": "You'll receive a Zoom link a few hours before your webinar is set to start. Thank you!"
},
...
}

Custom Thank You Page

For more control over the booking process, you can also specify a URL for users to visit after completed with the Scheduling Page. Use the thank_you_redirect booking configuration in the appearance object.

The code below shows how to include the URL for redirecting.

{
"appearance": {
"thank_you_redirect": "https://example.com/thanks"
},
...
}

Keep in Mind

Using a thank_you_redirect includes query string parameters for identifying the guest as well as the Scheduling Page. This is helpful for running business logic as well as creating customized messages for returning the user to your application.

The example URL below shows what information is also included.

https://example.com/thanks?start_time=1568141000&end_time=1568142800&page_slug=mike-pfiser-45min&tz=America/Chicago&name=Guest&email=guest%40company.com&location=Event%40Location%40TBD&edit_hash=12aqwe412&additional_values={}   

The data in the table below explains what is also included in the URL when redirecting users.

Query Parameter Type Description
start_time unix timestamp Start time of the event
end_time unix timestamp End time of the event
tz string Timezone setting on Scheduling Page for visitor using IANA time zone database
page_slug string Page slug where the booking took place
name string The name provided when booking the event
email string The email provided when booking the event
location string Location description of the event
edit_hash string Unique ID for cancelling or rescheduling a booking
event_id string Nylas Event id created for this booking
additional_values object Additional fields on the booking form for key-value pairs
custom query parameters string Any additional query parameters when visiting the Scheduling Page

To share a link that allows an attendee to cancel or reschedule a meeting, use the edit_hash value for reference. See the URL format below.

https://schedule.nylas.com/{page_slug}/reschedule/{edit_hash}
https://schedule.nylas.com/{page_slug}/cancel/{edit_hash}

Webhook Integration

Pass webhooks through your Scheduling Page customizations in the reminders configuration for more robust interactions with users.

Integrating webhooks allows your organization to perform business logic, send push notifications, or send custom emails with pre-populated data all within your application.

Nylas Scheduler services automatically send out emails including event details and instructions for recipients when bookings are confirmed, cancelled, or rescheduled.

Visit the Scheduler webhooks guide for more detailed examples of webhook configurations.

The sample below shows how to include webhooks in your configuration.

{
"reminders": [{
"delivery_method": "webhook",
"time_before_event": 60, // minutes
"webhook_url": "https://example.com/api/booking-webhook"
}],
}