# Build with HTML - Cancel and Reschedule examples

**URL:** <https://forums.nylas.com/t/build-with-html-cancel-and-reschedule-examples/710>\
**Category:** Question and Answers\
**Tags:** scheduler\
**Created:** [May 22, 2025, 6:45pm UTC](https://forums.nylas.com/t/build-with-html-cancel-and-reschedule-examples/710 "2025-05-22T18:45:44Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![mariense](https://avatars.discourse-cdn.com/v4/letter/m/779978/32.png) [@mariense](https://forums.nylas.com/u/mariense)\
**Post date:** [May 22, 2025, 6:45pm UTC](https://forums.nylas.com/t/build-with-html-cancel-and-reschedule-examples/710/1 "2025-05-22T18:45:44Z")

</div>

On this page, [Scheduler Quickstart guide: set up Scheduler | Docs](https://developer.nylas.com/docs/v3/getting-started/scheduler/), 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.

---

<div class="post-metadata">

**Author:** ![ram](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.nylas.com/ram/32/3_2.png) [@ram](https://forums.nylas.com/u/ram)\
**Post date:** [May 23, 2025, 8:37pm UTC](https://forums.nylas.com/t/build-with-html-cancel-and-reschedule-examples/710/2 "2025-05-23T20:37:20Z")

</div>

Hi @mariense - thanks for posting. Are you looking for the specific configuration for [displaying reschedule / cancel components](https://nylas-scheduler-ui-components.pages.dev/docs/web-elements/scheduler/nylas-cancel-booking-form/)?

---

<div class="post-metadata">

**Author:** ![mariense](https://avatars.discourse-cdn.com/v4/letter/m/779978/32.png) [@mariense](https://forums.nylas.com/u/mariense)\
**Post date:** [May 24, 2025, 12:35am UTC](https://forums.nylas.com/t/build-with-html-cancel-and-reschedule-examples/710/3 "2025-05-24T00:35:20Z")

</div>

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=](http://mywebsitexyz.com/events/scheduler-cancel.php?HFNYC34jsdkljfLYdqfVM2fUMtlCAwGKJFG6Q=)

JS code for the Scheduler pages:

```auto
    <!-- 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>

```

---

<div class="post-metadata">

**Author:** ![mariense](https://avatars.discourse-cdn.com/v4/letter/m/779978/32.png) [@mariense](https://forums.nylas.com/u/mariense)\
**Post date:** [June 14, 2025, 2:26am UTC](https://forums.nylas.com/t/build-with-html-cancel-and-reschedule-examples/710/4 "2025-06-14T02:26:41Z")

</div>

Hi Ram, any updates. Thanks.

---

<div class="post-metadata">

**Author:** ![ram](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.nylas.com/ram/32/3_2.png) [@ram](https://forums.nylas.com/u/ram)\
**Post date:** [June 16, 2025, 6:05pm UTC](https://forums.nylas.com/t/build-with-html-cancel-and-reschedule-examples/710/5 "2025-06-16T18:05:20Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ram](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.nylas.com/ram/32/3_2.png) [@ram](https://forums.nylas.com/u/ram)\
**Post date:** [July 3, 2025, 7:06pm UTC](https://forums.nylas.com/t/build-with-html-cancel-and-reschedule-examples/710/6 "2025-07-03T19:06:35Z")

</div>

@mariense did you happen to resolve this?

---

<div class="post-metadata">

**Author:** ![mariense](https://avatars.discourse-cdn.com/v4/letter/m/779978/32.png) [@mariense](https://forums.nylas.com/u/mariense)\
**Post date:** [July 4, 2025, 5:57pm UTC](https://forums.nylas.com/t/build-with-html-cancel-and-reschedule-examples/710/7 "2025-07-04T17:57:26Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![ram](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.nylas.com/ram/32/3_2.png) [@ram](https://forums.nylas.com/u/ram)\
**Post date:** [July 8, 2025, 3:22pm UTC](https://forums.nylas.com/t/build-with-html-cancel-and-reschedule-examples/710/8 "2025-07-08T15:22:20Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![mariense](https://avatars.discourse-cdn.com/v4/letter/m/779978/32.png) [@mariense](https://forums.nylas.com/u/mariense)\
**Post date:** [July 9, 2025, 12:14am UTC](https://forums.nylas.com/t/build-with-html-cancel-and-reschedule-examples/710/9 "2025-07-09T00:14:44Z")

</div>

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:

```auto
    <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

---

<div class="post-metadata">

**Author:** ![mariense](https://avatars.discourse-cdn.com/v4/letter/m/779978/32.png) [@mariense](https://forums.nylas.com/u/mariense)\
**Post date:** [July 9, 2025, 12:39am UTC](https://forums.nylas.com/t/build-with-html-cancel-and-reschedule-examples/710/10 "2025-07-09T00:39:46Z")

</div>

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

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

```

to:

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

```

and it’s working.

---

<div class="post-metadata">

**Author:** ![ram](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.nylas.com/ram/32/3_2.png) [@ram](https://forums.nylas.com/u/ram)\
**Post date:** [July 9, 2025, 5:55pm UTC](https://forums.nylas.com/t/build-with-html-cancel-and-reschedule-examples/710/11 "2025-07-09T17:55:06Z")

</div>

@mariense glad its working and thanks for the update!