JavaScript API

The widget's JavaScript API is a single global function, cauliflower(command, ...args), plus a window.Cauliflower object with the same methods. This page lists every command, option, callback and event. For installation and a guided setup, start with Website widget.

Calling commands

The loader snippet defines cauliflower() as a queue before embed.js arrives. Commands you call early are stored and run, in order, as soon as the script loads. After that, calls run immediately.

cauliflower("init", { workspace: "acme" });
cauliflower("identify", { email: "[email protected]" });
cauliflower("form", { router: "inbound", selector: "#demo-form" });

Once embed.js has loaded, window.Cauliflower exposes the commands as methods, which is convenient when you want a return value:

const result = await window.Cauliflower.route({ router: "inbound", lead: { email: "[email protected]" } });

cauliflower("route", …) returns the same promise once the script has loaded, but returns nothing while calls are still being queued. Use callbacks or events when you can't be sure the script has loaded. Unknown commands log a warning, and errors thrown by a command are logged to the console instead of breaking your page.

Commands

init

Sets the workspace. Call it before any other command.

identify

Stores lead fields for the rest of the page view. They're merged into every route call (values passed to route win) and used to prefill booking links opened with open and inline. Only string values are used for prefill.

cauliflower("identify", { email: "[email protected]", name: "Jane Cooper", company: "Acme" });

form

Binds one or more forms to a router. On submit, the form's fields are routed and the outcome is shown to the visitor.

When selector matches nothing yet, the widget keeps checking for about 10 seconds so forms rendered after page load are still bound. A form is never bound twice.

route

Routes a lead you've collected yourself and shows the outcome exactly like a bound form.

cauliflower("route", {
  router: "inbound",
  lead: { email: "[email protected]", first_name: "Jane", company: "Acme", company_size: "201-1000" },
  onBooked: function (meeting) {
    console.log("Booked with", meeting.host.name, "at", meeting.start_time);
  },
  onDisqualified: function (result) {
    console.log("Disqualified:", result.reason);
  },
});

The promise rejects when the request fails, for example when the email is missing, the router is paused or doesn't accept website submissions, the site isn't an allowed origin or the visitor hits the rate limit. The error event fires in the same cases.

open

Opens a booking link in the modal.

document.querySelector("#talk-to-sales").addEventListener("click", function () {
  cauliflower("open", { link: "product-demo", prefill: { email: "[email protected]" } });
});

inline

Embeds a booking page inside an element on your page. The iframe fills the element's width, starts at 640px high and resizes to fit its content as the visitor moves through the steps.

<div id="calendar"></div>
<script>
  cauliflower("inline", { link: "product-demo", target: "#calendar", prefill: { company: "Acme" } });
</script>

Inline embeds don't take callbacks. Listen for the booked event instead.

close

Closes the open modal or message card, if any. The close event fires with reason: "user".

on

Registers a handler for a widget event. Handlers registered with on receive the event's data as their only argument.

cauliflower("on", "booked", function (meeting) {
  window.dataLayer && window.dataLayer.push({ event: "meeting_booked", host: meeting.host.name });
});

Callbacks

Callbacks are passed in the options of form, route and open, and only fire for that call.

For a lead sent to a calendar, the order is onRouted, then onBooked if they book, then onClose.

Events

Events fire for every widget interaction on the page, no matter which command started it. Subscribe with on, or listen for the matching cauliflower:<event> browser event on window, where the data is in event.detail.

reason is "user" when the visitor closed it from your page (close button, backdrop click or Escape) or you called close. It's "done" when the booking page closed itself, for example with its Close button after booking, or when the widget replaced one modal with another.

window.addEventListener("cauliflower:routed", function (e) {
  console.log("Outcome:", e.detail.outcome);
});

window.addEventListener("cauliflower:booked", function (e) {
  console.log("Meeting", e.detail.uid, "starts", e.detail.start_time);
});

Browser events are handy when another script, such as your analytics or tag manager, needs to react without touching the widget setup.

Route response

route, onRouted, onDisqualified, onAssigned and the routed, disqualified and assigned events all receive this object.

{
  "outcome": "book",
  "token": "q3Zt8kLm…",
  "booking_url": "https://cal.example.com/r/q3Zt8kLm…",
  "embed_url": "https://cal.example.com/r/q3Zt8kLm…?embed=1",
  "message": "Pick a time with one of our specialists",
  "redirect_url": null,
  "redirect_delay_seconds": null,
  "reason": null,
  "meeting_type": { "title": "Product demo", "duration_minutes": 30 },
  "assigned_user": null,
  "brand": { "name": "Acme", "color": "#1f8a5b" }
}

Booked meeting

onBooked and the booked event receive the meeting as the booking page saw it:

Data attributes

For simple pages you can skip JavaScript entirely:

<script src="https://cal.example.com/embed.js" data-workspace="acme" async></script>

<form data-cauliflower-router="inbound" data-cauliflower-submit="after" action="/thanks" method="post">
  <input name="email" type="email" required />
  <button type="submit">Request a demo</button>
</form>

<a href="#" data-cauliflower-link="product-demo">Book a call</a>

data-workspace only works on a plain script tag like the one above, not with the loader snippet. A plain script tag doesn't define the cauliflower() queue, so use the loader snippet if you also call commands. Attributes are read once when the page loads; bind elements added later with form or open.

Related