# 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](https://docs.cronofy.com/developers/getting-started/set-up-a-sandbox/index.md)
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:

```ruby
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](https://docs.cronofy.com/api-reference/managed-scheduling/managed-organizational-units/provision/index.md)
the customer's Managed Organizational Unit.

[Embed authentication](https://docs.cronofy.com/api-reference/authorization/embed-authentication/index.md)
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:

```bash
npm i -S cronofy-scheduler-embed
```

Import it in your JavaScript:

```javascript
import "cronofy-scheduler-embed";
```

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

```html
<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:

```javascript
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:

- Open the `primary_select_url` in your browser.

- Pick one of the times offered. They're within Doc's working hours, Monday
to Wednesday, 09:00 to 17:00.

- Confirm the time.

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

Your [webhook URL](https://docs.cronofy.com/developers/getting-started/set-up-a-sandbox/index.md)
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.

> **INFO:** **Offer times in your own page.** Instead of sending the recipient to
Cronofy's booking page, your application can list the times and book one
itself. Keep the `scheduling_request_id`, then see
[Build your own booking page](https://docs.cronofy.com/developers/getting-started/headless-selection/index.md).

## In your product
### In an applicant tracking system
Recruiters open the Embed from a candidate's profile, or while writing them a
message, with the candidate passed in and the interview's ID as the
`correlation-id`. The scheduling link goes into the message, for example
through a merge field, and the webhooks create and update the interview
record.

### In talent management
Managers open the Embed from an employee's profile to book a one-to-one or a
review, with the employee passed in and the meeting's ID as the
`correlation-id`, and the webhooks add it to the employee's record.

### In a CRM
Reps open the Embed from a contact or deal, and put the scheduling link in an
email or a sequence step. The webhooks log the meeting against the deal.

### In healthtech
Staff open the Embed from a patient's record to send them a booking link for
an appointment, and the webhooks add it to the patient's record.

## Next
[Create a request with the API](https://docs.cronofy.com/developers/getting-started/first-api-request/index.md)
to do the same from your application's code, without a person in the loop.



---
[Read in HTML](https://docs.cronofy.com/developers/getting-started/first-embed-request/)