Open Knock Scheduling from your own form
Knock Scheduling can work as a standalone scheduling experience or as the next step in a form or signup flow you already have.
By default, a person enters their email directly in Knock Scheduling. Knock uses that email to identify and enrich the person, apply your routing and qualification rules, and find the right meeting availability.
If you already collect the person's email somewhere else, you don't need to ask for it again.
You can pass the email directly to Knock Scheduling and open the scheduling modal whenever you're ready.
Common use cases
For example, you can use Knock Scheduling after:
- A user completes a signup flow inside your product
- A prospect submits your website form
- A HubSpot form is submitted
- A Marketo form is submitted
- A Typeform is completed
- Any custom form or flow where you already know the person's email
Your form continues to work as usual. Knock simply takes over the scheduling experience when you decide to open it.
How it works
The flow is simple:
- Your form or product collects the person's email.
- Pass the email to
Knock.scheduling.load(). - Knock AI identifies and enriches the person and starts looking for relevant meeting times in the background.
- Submit your form or complete your own workflow.
- Call
open()when you want to show Knock Scheduling.
Because Knock can start preparing the scheduling experience as soon as the email is available, the meeting picker can often open directly with available times.
Basic example
const scheduling = window.Knock.scheduling.load({
magicLinkId: 'your-magic-link-id',
email: 'jane@acme.com',
});
scheduling.open();The magicLinkId determines which Knock scheduling configuration should be used.
The email lets Knock skip asking for the person's email again and immediately start identification, enrichment, routing, and availability lookup.
Load Knock before opening the modal
The Knock tag loads asynchronously, so window.Knock might not be available immediately when your page loads.
Use the following helper:
function withKnock(callback) {
if (window.Knock) {
callback(window.Knock);
} else {
window.addEventListener(
'knock:ready',
() => callback(window.Knock),
{ once: true }
);
}
}Full example
In this example, the visitor enters their email into your existing form.
As soon as the email is available, Knock starts preparing the scheduling experience in the background.
Your form is submitted normally. Once your submission is complete, Knock Scheduling opens.
Your existing form submission is not replaced. You can continue sending the form data to your CRM, backend, marketing automation platform, or any other system you use.
Knock handles the scheduling experience that comes after it.
load(options)
Knock.scheduling.load() prepares the scheduling experience and returns a scheduling handle.
Option | Required | Description |
magicLinkId | Yes | The Knock meeting link and scheduling configuration to use. |
email | No | The person's email address. When provided, Knock can skip its email step and start preparing the scheduling experience immediately. |
onStatusChange | No | Callback that runs when the scheduling flow changes status. |
Example
const scheduling = Knock.scheduling.load({
magicLinkId: 'your-magic-link-id',
email: 'jane@acme.com',
});If the email you provide is invalid, Knock ignores it and asks the person for their email normally.
Scheduling handle
load() returns a handle you can use to control the scheduling modal.
Member | Description |
open() | Opens the scheduling modal. You can call it even if availability is still loading. |
close() | Closes the scheduling modal if it is currently open. |
status | Returns the current scheduling status. |
Open scheduling
scheduling.open();If meeting times are still being prepared, Knock displays its normal loading state and automatically shows available times when they are ready.
Listen for scheduling statuses
You can use onStatusChange to react to different stages of the scheduling experience.
Knock.scheduling.load({
magicLinkId: 'your-magic-link-id',
email: 'jane@acme.com',
onStatusChange: (event) => {
console.log(event.status, event);
},
});Available statuses:
Status | Meaning | Additional data |
loading | Knock is preparing the scheduling session or looking for available times. | |
email_submitted | The email was accepted. | email |
slots_found | Meeting times are available. | slots: { count, first } |
no_slots_found | No meeting times can be offered. | reason: 'disqualified' | 'no_slots' |
booked | The person confirmed a meeting. | meeting: { startDateTime, endDateTime } |
error | An error occurred. | message |
closed | The scheduling modal was closed. | closedReason |
When should I call load()?
For the fastest experience, call load() as soon as you know the person's email.
You don't need to wait until the form has been submitted.
This allows Knock to identify and enrich the person, evaluate the scheduling flow, and begin finding availability while they are still completing your experience.
Then call open() whenever you want to show the meeting picker.
Example flow
A prospect visits your website and completes your existing demo request form.
Your form collects:
Name: Jane Smith
Email: jane@acme.com
Company: Acme
As soon as Jane's email is available, you pass jane@acme.com to Knock.
Your form can still submit Jane's information to HubSpot, Marketo, Salesforce, your backend, or any other destination.
Once that process finishes, you open Knock Scheduling.
Jane doesn't need to enter her email again. Knock already knows who she is and can continue directly into the appropriate scheduling experience.