Create a request with the Embed

The Scheduler Embed lets your users create Scheduling Requests from inside your application. Once a request is created, your application decides how to present it to the recipient.

You’ll need the Sandbox set up first.

Copy your Embed secrets #

An Embed secret was created with your Sandbox. On the Hill Valley Futures page, under Embed authorization, copy the Public key (EMB_…) and the Embed secret (ESK_…).

Generate an Embed Token on your server #

The Embed authenticates with an Embed Token, a JWT your server signs with the Embed secret. Add the Sandbox’s Organizational Unit ID to the payload:

jwt_payload = {
  iss: embed_public_key, # EMB_...
  iat: Time.now.to_i,
  exp: Time.now.to_i + (60 * 60 * 4),
  aud: "scheduler_embed",
  jti: SecureRandom.uuid,
  organizational_unit_id: "hill_valley_futures_sandbox",
}

embed_token = JWT.encode(jwt_payload, embed_secret, "HS256")

In production, use the organizational_unit_id your application chose when provisioning the customer’s Managed Organizational Unit.

Embed authentication covers every field of the token.

Add the Embed to your page #

The Embed is a Web Component, so it works in a plain HTML page, with a frontend framework such as React or Vue, or in a server-rendered page.

Install the package:

npm i -S cronofy-scheduler-embed

Import it in your JavaScript:

import "cronofy-scheduler-embed";

Then add the element to your page, with the Embed Token from your server:

<cronofy-scheduler-button
  id="my-scheduler-button"
  embed-token="{EMBED_TOKEN}"
  correlation-id="flux-capacitor-1"
  recipient-email="{YOUR_EMAIL}"
  recipient-name="The Recipient"
  event-summary="Discuss Flux Capacitor project"
  event-duration-minutes="30"
></cronofy-scheduler-button>

Use your own email address as the recipient, so you receive the invitation when you book.

Create a request #

Open the page and click the button. The Scheduler opens with Hill Valley Futures’ members, Selection Rules, and Templates. Choose Doc Brown as the host and send the request.

When the request is created, the button emits a cronofyschedulerrequestcreated event with the Scheduling Request:

document
  .getElementById("my-scheduler-button")
  .addEventListener("cronofyschedulerrequestcreated", (event) => {
    const request = event.detail.scheduling_request;
    console.log(request.scheduling_request_id, request.primary_select_url);
  });

Book it as the recipient #

primary_select_url is the recipient’s booking page. Your application could email it, show it in a chat, or open it straight away. Here, open it yourself:

1. Open the primary_select_url in your browser.
2. Pick one of the times offered. They’re within Doc’s working hours, Monday to Wednesday, 09:00 to 17:00.
3. Confirm the time.

The event is booked into Doc’s test calendar, and you receive the invitation.

Your webhook URL then receives a scheduling_request_time_chosen webhook with the booked event. If the meeting is later rescheduled, declined, or cancelled, it receives a webhook for that too, so your application can keep its own records up to date.

In your product #

Next #

Create a request with the API to do the same from your application’s code, without a person in the loop.