Developers

Embeds

Two script tags put a SIGNL booker or form on any page you control: your own domain, no iframe wrangling. Both render the same page you already have at /<handle>/<slug>, so anything you change there (branding, questions, availability) shows up in the embed too. The src is your own SIGNL app URL. The embed derives everything else (the API calls it makes, the iframe it builds) from the origin that script tag loaded from.

Booking embed

public/booking-embed.js

<script
  src="https://<your-workspace-domain>/booking-embed.js"
  data-slug="strategy-call"
  data-handle="acme-coaching"
  data-accent-color="#6366f1"
  data-name="Jordan Lee"
  data-email="jordan@example.com"
  async
></script>

data-slug

required

The booking page or form's slug, the same one in its own SIGNL URL.

data-width

optional · default 100%

The iframe's width.

data-height

optional · default 700px

The iframe's height. It never changes: the form or booker fills the frame on every question and screen, and scrolls inside it if one screen is taller.

data-auto-height

optional · default off

Set to "true" to let the frame resize to fit whatever screen is showing, instead of staying at data-height.

data-handle

recommended

Your workspace handle (Settings, Public link). Booking page slugs are only unique inside a workspace, so with it the booker always opens your page; without it, the oldest page with that slug. The snippet SIGNL gives you includes it.

data-accent-color

theming

A hex colour (e.g. #6366f1) that overrides the booking page's accent colour for this embed only. Anything that is not a plain hex value is dropped rather than passed through.

data-name

identity handoff

Prefills the booker's name field with a name you already know about this visitor. A default value, not a lock: they can still edit it.

data-email

identity handoff

Prefills the email field the same way.

Form embed

public/form-embed.js

<script
  src="https://<your-workspace-domain>/form-embed.js"
  data-slug="apply"
  async
></script>

data-slug

required

The booking page or form's slug, the same one in its own SIGNL URL.

data-width

optional · default 100%

The iframe's width.

data-height

optional · default 700px

The iframe's height. It never changes: the form or booker fills the frame on every question and screen, and scrolls inside it if one screen is taller.

data-auto-height

optional · default off

Set to "true" to let the frame resize to fit whatever screen is showing, instead of staying at data-height.

Theming and identity handoff are booking-embed only today: a form has no accent colour of its own to override, and the shared registry described under Tracking already carries a form submission back to the visitor who was browsing, through the fingerprint stamped on the page it was linked from.

How the embed sits on your page

The embedded page has no background of its own: your page shows around the card. A form with a page colour set in its own appearance settings keeps that colour. The page tells the script its height and colour scheme as it changes, and the script sizes the frame to match. If you write the iframe by hand instead of using a script, add ?embed=1 to its URL and set style="color-scheme: dark" on the iframe for a dark page (light for a light one). Browsers draw a solid background behind a frame whose colour scheme differs from the page around it.

Know when a booking is confirmed

The booking embed fires a signl:booking-confirmed event on your page's window when someone books, so your own pixel or analytics can count it. Its detail holds the booked time (scheduledAt, an ISO time), the page's slug (pageSlug) and the length in minutes (durationMinutes). It carries no name, email or phone. It needs the booking script; a hand-written iframe posts the same message, which you can listen for yourself. To send people to a thank-you page instead, use the page's confirmation redirect.

window.addEventListener('signl:booking-confirmed', function (e) {
  // e.detail: { scheduledAt, pageSlug, durationMinutes }
  myPixel.track('Booked', { page: e.detail.pageSlug })
})

How identity handoff works

data-name and data-email only take effect on the embedded render (the page already knows it is inside an iframe from its own ?embed=1). That flag is a product default, not a lock. Anyone can add ?embed=1 to a copy-pasted link by hand and get the same prefill, so treat this as convenience, not access control: the values you pass only fill the name and email fields as defaults the visitor can still change before they book. A verified single-use link (sent from inside SIGNL, e.g. a cadence step) is the stronger signal and wins if both are present on the same page, because it carries a real token rather than a plain default.

This page is generated from the same list the product runs on, so it is never out of date. Something missing or unclear? Get help.