# Install and Embed Setting up the Embed involves the following steps, all covered on this page: **Setting up the Embed** Diagram of the steps to set up the Embed: secrets generated in Cronofy are used on your server to generate tokens, which your front end uses, with the Embed JS installed, to authenticate the Embed. ```mermaid flowchart TD Enable_generate_Cronofy_Embed_secrets[Enable & generate Cronofy Embed secrets] -- Add to your server --> Use_secrets_to_generate_tokens Use_secrets_to_generate_tokens[Use secrets to generate tokens] -- Pass to your front-end --> Use_tokens_to_authenticate_the_Embed[Use tokens to authenticate the Embed] Install_the_Embed_JS[Install the Embed JS] -- Add to your front-end --> Use_tokens_to_authenticate_the_Embed ``` - Enable and generate the Embed secrets in Cronofy, and add them to your server. - Your server uses the secrets to generate tokens and passes them to your front end. - Install the Embed JS and add it to your front end. - Your front end uses the tokens to authenticate the Embed. ## 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](https://docs.cronofy.com/api-reference/authorization/embed-authentication/index.md) 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](https://www.npmjs.com/package/cronofy-scheduler-embed). 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 > **WARNING:** Please note that the Embedded Scheduler does not work when the browser limits cookie and local storage access, such as in incognito or private browsing mode. Once you have [installed the embedded Scheduler library](#install-the-embed-js) you can then include the `cronofy-scheduler-button` element within your pages HTML: ```html ``` The following element attributes are supported to setup and customize the initial state of the Scheduler: ##### `embed-token` *(required)* The JWT generated for each page view, as described in [Embed authentication](https://docs.cronofy.com/api-reference/authorization/embed-authentication/index.md). ##### `correlation-id` *(required)* Your ID for the request, which can be used for reconciling future webhooks and API responses. ##### `recipient-email` *(recommended)* The email address of the recipient of the scheduling request. 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)* The name of the recipient. ##### `recipient-organization-name` *(optional)* The organization the recipient is representing. ##### `event-summary` *(optional)* The summary of the event, which appears as the name of the event in the calendar. If this is not provided, the defaults for the user will be used. ##### `event-duration-minutes` *(optional)* Sets the value for the duration to the number of minutes specified. ### 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`: ```javascript 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: ```json { "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.](https://docs.cronofy.com/api-reference/managed-scheduling/embedded-scheduler/error-states/index.md) You can register the event listener using `addEventListener`: ```javascript 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: ```javascript document .getElementById("my-scheduler-button") .show() ``` ##### `open` A [`Boolean`](https://docs.cronofy.com/api-reference/fundamentals/data-types/index.md) 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: - Go to the "Credentials" section of your application settings - 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](https://docs.cronofy.com/api-reference/managed-scheduling/scheduling-requests/webhooks/index.md) for what they contain. ## Embedding the cancel button in your page Once you have [installed the embedded Scheduler library](#installation) you can then include the `cronofy-scheduler-cancel-button` element within your pages HTML: ```html ``` The following element attributes are supported to setup and customize the initial state of the Scheduler: ##### `embed-token` *(required)* The JWT generated for each page view, as described in [Embed authentication](https://docs.cronofy.com/api-reference/authorization/embed-authentication/index.md). ##### `scheduling-request-id` *(required)* The ID of the scheduling request to be cancelled. ### 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.](https://docs.cronofy.com/api-reference/managed-scheduling/embedded-scheduler/error-states/index.md) You can register the event listener using `addEventListener`: ```javascript 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: ```javascript document .getElementById("my-cancel-button") .show() ``` ##### `open` A [`Boolean`](https://docs.cronofy.com/api-reference/fundamentals/data-types/index.md) 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. --- [Read in HTML](https://docs.cronofy.com/api-reference/managed-scheduling/embedded-scheduler/installing-and-embedding/)