Build with HTML - Cancel and Reschedule examples

Question and Answers
1

On this page, Scheduler Quickstart guide: set up Scheduler | Docs, HTML there’s examples to create scheduling pages and examples of the scheduler pages for users. I have them working.

Where can I find an HTML example for the Cancel and Reschedule pages?

Thanks in advance.

2

Hi @mariense - thanks for posting. Are you looking for the specific configuration for displaying reschedule / cancel components?

3

Hi Ram, I’m looking for the JavaScript code for those pages. For example, I have this for the Scheduler pages. But can’t find examples for the Cancel and Reschedule pages.

I’ll have a page like so for the Cancel page, and want to have the JavaScript code to make it work:
mywebsitexyz.com/events/scheduler-cancel.php?HFNYC34jsdkljfLYdqfVM2fUMtlCAwGKJFG6Q=

JS code for the Scheduler pages:

    <!-- Configure the Nylas Scheduling Component with a Configuration ID. -->
    <script type="module">
      import { defineCustomElement } from "https://cdn.jsdelivr.net/npm/@nylas/web-elements@latest/dist/cdn/nylas-scheduling/nylas-scheduling.es.js";

      defineCustomElement();

      const nylasScheduling = document.querySelector("nylas-scheduling");
      nylasScheduling.schedulerApiUrl = "https://api.us.nylas.com";

      // Get the Configuration ID from the URL (`?config_id=<NYLAS_SCHEDULER_CONFIGURATION_ID>`).
      const urlParams = new URLSearchParams(window.location.search);

      // If `config_id` doesn't exist, throw a `console.error`.
      if (!urlParams.has("config_id")) {
        console.error(
          "No Scheduler Configuration ID found in the URL. Please provide a Configuration ID."
        );
      }

      // Set the Configuration ID.
      nylasScheduling.configurationId = urlParams.get("config_id");
    </script>
4

Hi Ram, any updates. Thanks.

5

@mariense let me circle back to this in the next few days.

6

@mariense did you happen to resolve this?

7

No, not yet. For now I just don’t give the choice to re-schedule or cancel via my link. But would like to. Thanks.

8

So for cancel and reschedule pages, we need to include additional nylasScheduling configuration parameters:

For cancel (domain/cancel/:booking_ref)
nylasScheduling.cancelBookingRef = "Booking Reference";

For reschedule (domain/reschedule/:booking_ref):
nylasScheduling.rescheduleBookingRef = "Booking Reference";

Adding these on the respective pages will ensure the correct flow for cancel / reschedule are displayed to the user.

9

I feel I’m getting close, but not working yet.

My url looks like:
…/events/scheduler-cancel.php?booking_ref=999888666555444333

the code between my body tags looks like:

    <div class="grid gap-0 h-full place-items-center my-4">
      <div class="grid gap-4">
		  
        <!--<nylas-scheduling />-->
		  
		<!--<NylasScheduling cancelBookingRef="<?php echo $booking_ref; ?>"/>-->
		  
		<nylas-scheduling cancelBookingRef="<?php echo $booking_ref; ?>"/>

      </div>
    </div>
	

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

      defineCustomElement();

      const nylasScheduling = document.querySelector("nylas-scheduling");
      nylasScheduling.schedulerApiUrl = "https://api.us.nylas.com";
	  
      // Get the booking ref from the URL (`?booking_ref=<SCHEDULER_BOOKING_REFERENCE>`).
      const urlParams = new URLSearchParams(window.location.search);
	  
      // If `booking_ref` doesn't exist, throw a `console.error`.
      if (!urlParams.has("booking_ref")) {
        console.error(
          "No booking reference found in the URL."
        );
      }
	  
      nylasScheduling.cancelBookingRef = urlParams.get("booking_ref");	  
	  //alert (urlParams.get("booking_ref"));
	  
    </script>

What can I do different to make it work?
Nothing is displayed to the page.

Thanks in advance

10

Well, I’ll be damned, for the heck of it, I changed:

https://cdn.jsdelivr.net/npm/@nylas/web-elements@latest/dist/cdn/nylas-scheduler-editor/nylas-scheduler-editor.es.js

to:

https://cdn.jsdelivr.net/npm/@nylas/web-elements@latest/dist/cdn/nylas-scheduling/nylas-scheduling.es.js

and it’s working.

1 Like
11

@mariense glad its working and thanks for the update!