How to add additional fields in the event description with Scheduler API v3, such as a phone number.

Issue

In API v3, only "Reschedule" or "Cancel" fields are automatically included in booking event descriptions. To address this, you can manually include the phone number or other fields.

Steps to Include Phone Number

1. Retrieve Scheduler Configuration
   Use the endpoint to get your configuration:

   GET /v3/grants/{grant_id}/scheduling/configurations
   

   Replace {grant_id} with your Grant ID (e.g., 2f238a12-1234-1234-1234-9daea173094d).
   
   

2. Find the Phone Number Field Key or other field.
   Look in the additional_fields section of the response. Example:

   "additional_fields": {
   "multi_line_text_Long-text-Label_1": {
   "label": "Long text Label",
   "type": "multi_line_text",
   "required": false,
   "order": 1
   },
   "phone_number_Phone-Number-Label_1": {
   "label": "Phone Number Label",
   "type": "phone_number",
   "required": false,
   "order": 3
   },
   "text_Short-Text-Label_1": {
   "label": "Short Text Label",
   "type": "text",
   "required": false,
   "order": 2
   }
   }
   

   Here, the key is phone_number_Phone-Number-Label_1.
   
   
   

3. Update the Event Description
   In the Nylas Scheduler Editor UI, use the field key in the event description template:

   Phone number: ${phone_number_Phone-Number-Label_1}.
   
   Scheduler editor example:
   
   

   Template strings available:

   User_email: ${invitee_email}
   User_name: ${invitee}
   Duration: ${duration}
   Long txt: ${multi_line_text_Long-text-Label_1}
   Short txt ${text_Short-Text-Label_1}
   Phone number: ${phone_number_Phone-Number-Label_1}

   
   Scheduling page fields example:
   
   
   

4. Verify Changes
   Book an event using the scheduling page and check the description of the event to ensure the phone number is included as expected.
   
   
   
   

5. Automatically add event description and additional fields through the scheduler-editor component:

   Your user can set the event description and additional fields manually (as outlined in Step 3) from the Scheduler Editor or automatically through the Scheduler-Editor component, ensuring that every configuration includes the event description. Here are the steps:

1. Add additional fields names as variables in the scheduler component:
   const templateShortText = "text_Short-Text-Label_1";

   const templateLongText = "multi_line_text_Long-text-Label_1";

   const templatePhone = "phone_number_Phone-Number-Label_1";
2. Add event_booking.description and additional fields accordingly(you can add manually and fetch the configuration in order to see the additional field object structure).
   schedulerEditor.defaultSchedulerConfigState = {

   selectedConfiguration: {

   event_booking: {

   description:

   "User_email: ${invitee_email}\nUser_name: ${invitee}\nDuration:
   ${duration}\nLong txt: ${multi_line_text_Long-text-Label_1}\n
   Short txt: ${text_Short-Text-Label_1}\n
   Phone number: ${phone_number_Phone-Number-Label_1}",

   },

   requires_session_auth: false,
   // Creates a public configuration which doesn't require a session

   scheduler: {

   // The callback URLs to be set in email notifications

   rescheduling_url:
   `${window.location.origin}/reschedule/:booking_ref`,
   // The URL of the email notification includes the booking reference

   cancellation_url:
   `${window.location.origin}/cancel/:booking_ref`,

   additional_fields: {

   [templateShortText]: {

   type: "text",

   required: true,

   order: 1,

   label: "Short Text Label",

   },

   [templateLongText]: {

   type: "multi_line_text",

   required: true,

   order: 1,

   label: "Long text Label",

   },

   [templatePhone]: {

   type: "phone_number",

   required: true,

   order: 1,

   label: "Phone Number Label",

   },

   },

   },

   },

   }
   

This is how your configuration will be created:

Creating a new configuration:

As you can see, the event description is already populated.

The guest will see the additional fields on the booking page, which will appear in the event description as shown in Step 4.

Resources

• Scheduler API Docs
• Event description

Updated December 10, 2024 18:06