Install and Embed

Setting up the Embed involves the following steps, all covered on this page:

Generate Embed Tokens on your server #

Generate an Embed Secret in the Cronofy Developer Dashboard, and use it on your server to sign an Embed Token for each page view. Embed authentication covers both, with example code in several languages.

Install the Embed JS #

The Cronofy embedded scheduler is available from the cronofy-scheduler-embed NPM package. You can install it by running in your terminal:

npm i -S cronofy-scheduler-embed

In your front end JavaScript code you must then import the embedded scheduler library before you can use the embeddable elements and APIs. This can be done by importing the scheduler library module within your JavaScript application:

import "cronofy-scheduler-embed";

Use tokens to authenticate the Embed #

Once you have installed the embedded Scheduler library you can then include the cronofy-scheduler-button element within your pages HTML:

<cronofy-scheduler-button
  id="my-scheduler-button"
  embed-token="{EMBED_TOKEN}"
  correlation-id="event-1234"
  recipient-email="doc@evenitron.com"
  recipient-name="Dr Emmet Brown"
  recipient-organization-name="Evenitron"
  event-summary="Driving lessons - Marty & Doc"
  event-duration-minutes="45"
></cronofy-scheduler-button>

The following element attributes are supported to setup and customize the initial state of the Scheduler:

embed-token Required  #

correlation-id Required  #

recipient-email Recommended  #

This will be the email address of the person selecting the time. This address will be invited to the calendar event created when a time is chosen.

recipient-name Optional  #

recipient-organization-name Optional  #

event-summary Optional  #

If this is not provided, the defaults for the user will be used.

event-duration-minutes Optional  #

Receiving the request link in your UI #

The cronofy-scheduler-button element emits events which your application can listen for. You can register the event listener using addEventListener:

document
  .getElementById("my-scheduler-button")
  .addEventListener("cronofyschedulerrequestcreated", function(event) {
    console.log("Cronofy Scheduler request created", event);
  });

The event emitted contains details of the request in the detail attribute:

{
  "scheduling_request": {
    "scheduling_request_id": "srq_52b65401a5d87bb4f0bee44e",
    "slot_selection": "pending",
    "primary_select_url": "https://app.cronofy.com/r/234ebnd",
    "dashboard_url": "https://app.cronofy.com/scheduler/requests/52b65401a5d87bb4f0bee44e",
    "summary": "Driving test - Marty & Doc",
    "duration": { "minutes": 30 },
    "recipient_operations": {
      "view_url": "https://app.cronofy.com/rts/VFbnUVCv"
    },
    "recipients": [
      {
        "email": "doc@evenitron.com",
        "display_name": "Dr Emmet Brown",
        "slot_selector": true,
        "select_url": "https://app.cronofy.com/r/234ebnd"
      }
    ],
    "event": {
      "summary": "Driving test - Marty & Doc"
    },
    "coordinator_sub": "acc_6717a49426e06a0ef69d01dc"
  }
}

UI state events #

The cronofy-scheduler-button element will also emit the following events for closer UI integration:

• cronofyschedulerrequestcreated - When the Scheduling request has been created
• cronofyschedulerdialogopened - When Scheduler dialog is opened
• cronofyschedulerdialogclosed - When Scheduler dialog is closed
• cronofyschedulererror - When the Scheduler encountered an error, such as the users account being disabled or when the auth token is invalid. See a more detailed summary here.

You can register the event listener using addEventListener:

document
  .getElementById("my-scheduler-button")
  .addEventListener("cronofyschedulerdialogopened", function(event) {
    console.log("Cronofy Scheduler dialog opened", event);
  });

Element methods and properties #

The SchedulerButtonElement provides several methods and properties that can be called from JavaScript to inspect the current state of the Scheduler dialog, as well as methods to open and close the popup.

We have kept these close to the HTML spec for the Dialog element.

They can be invoked against the DOM element - for example:

document
  .getElementById("my-scheduler-button")
  .show()

open  #

A Boolean value indicating whether a dialog is currently open or not.

show()  #

Displays the Scheduler dialog as a modal. Note that if the dialog is already open then calling this method does nothing.

close()  #

Closes the Scheduler dialog if it is open. Note that if the dialog is already closed then calling this method does nothing.

Set your webhook URL #

Set the URL to receive webhooks about the Scheduling Requests your users create in the Cronofy Developer Dashboard, where you copied the Embed Secret:

1. Go to the “Credentials” section of your application settings
2. Add the URL in the “Embedded Scheduler webhook callback URL” field and press “Save webhook URL”

This will begin sending webhooks for any of your Scheduling Requests to the given URL. You can disable these webhooks by updating the field to an empty value.

See Scheduling Request webhooks for what they contain.

Embedding the cancel button in your page #

Once you have installed the embedded Scheduler library you can then include the cronofy-scheduler-cancel-button element within your pages HTML:

<cronofy-scheduler-cancel-button
  id="my-cancel-button"
  embed-token="{EMBED_TOKEN}"
  scheduling-request-id="{SCHEDULING_REQUEST_ID}"
></cronofy-scheduler-cancel-button>

The following element attributes are supported to setup and customize the initial state of the Scheduler:

embed-token Required  #

scheduling-request-id Required  #

UI state events #

The cronofy-scheduler-cancel-button element will also emit the following events for closer UI integration:

• cronofyschedulerrequestcancelled - When the Scheduling request has been cancelled
• cronofyschedulerdialogopened - When cancel dialog is opened
• cronofyschedulerdialogclosed - When cancel dialog is closed
• cronofyschedulererror - When the cancel dialog encountered an error, such as the users account being disabled or when the auth token is invalid. See a more detailed summary here.

You can register the event listener using addEventListener:

document
  .getElementById("my-cancel-button")
  .addEventListener("cronofyschedulerdialogopened", function(event) {
    console.log("Cronofy cancel Scheduling request dialog opened", event);
  });

Element methods and properties #

The SchedulerCancelButtonElement provides functions and properties that can be called from JavaScript to inspect the current state of the dialog, as well as methods to open and close the popup.

We have kept these close to the HTML spec for the Dialog element.

They can be invoked against the DOM element - for example:

document
  .getElementById("my-cancel-button")
  .show()

open  #

A Boolean value indicating whether a dialog is currently open or not.

show()  #

Displays the cancel dialog as a modal. Note that if the dialog is already open then calling this method does nothing.

close()  #

Closes the cancel dialog if it is open. Note that if the dialog is already closed then calling this method does nothing.