Booking forms and lead forms
Add a Grout form to a website Grout does not host, with a script or an iframe.
Every form you put on a website lives on one page: Admin → Forms
(/admin/forms). It has two sections — Booking forms, which take a booking
end to end, and Lead forms, which capture an enquiry — each a table with its
own "Add …" button in the section header.
Reach it from Forms in the sidebar, under Grow.
Create an embeddable booking form
Under Booking forms, add a form. Each row carries a Copy link button with that form's own link — enough on its own for a business card, an email signature or a social profile, with nothing to embed.
A form's own page is one page of cards:
| Card | What it sets |
|---|---|
| Status | Whether it is live — the Enabled switch saves the moment you flip it. |
| Details | Its name, headline, button color and whether visitors may enter a coupon. Edit it with the card's pencil. |
| Services | Which services it offers. |
| Frequencies | Which recurring plans it offers. |
| Coupons | Every coupon works on every form until you switch it off here. |
| Questions | The questions this form asks, and the shared questions every form asks. |
| Put it on your website | Its code for any other website, its link, and — under For a web developer — an iframe and its form key. |
Bookings created through an embed use the same server-side pricing, availability, notifications, and tracking pages as the native booking form.
On the website Grout hosts for you
Nothing to embed or paste — booking and lead forms are already there; see Forms on your own site. The rest of this page is for a website Grout does not host.
Use the script widget
A form's Put it on your website card under Admin → Forms prints the snippet with the address and your company already filled in. Copy it from there rather than typing one. Written out, it is:
<script
src="https://app.example.com/embed.js"
data-company="your-company"
data-form="your_form_id"
></script>The loader is one file for the whole of Grout and names no company by itself,
so data-company is what tells it which one to open — it is your company's
slug, the same one in your booking links. A snippet without it renders nothing
and says so in the browser console rather than framing a page that answers
"not found".
The script adds a lazy-loading iframe and uses the form's configured accent color. The iframe resizes itself automatically to the height the form renders at — data-height="760" only sets its starting height before that first measurement arrives.
Use an iframe
Use an iframe when you want to control its surrounding layout:
<iframe
src="https://app.example.com/c/your-company/embed/your_form_id"
style="width: 100%; height: 760px; border: 0"
title="Book online"
></iframe>Server-to-server work
There is no React component or other installable package yet — use the script widget or an iframe. For server-to-server work such as listing, cancelling, or rescheduling bookings, use the REST API with an API key.
Lead forms
A lead form captures an enquiry rather than a booking. Under Lead forms, "Add lead form" asks which type you want — Hello bar (a strip across the top of the page), Pop-up (a box over the page), Slide-in (a box in the corner) or Inline block (a block inside the page) — each with a thumbnail of where it sits. Choosing one creates the form, paused, with an email-only field, and lands on its own page.
That page is one page of cards: Preview (how it looks), Details (its name and its fields) and Display (when and where it appears), each edited with its pencil, beside Status (the Enabled switch and how it is doing) and Put it on your website. There, list the sites allowed to run it, one address per line — it shows on no other site, and on none at all while that list is empty — then copy the snippet under Code for your website. Paste it once, anywhere on the site; it decides by itself when and where to show.
The Forms page shows each lead form's row with how many times it was shown and how many times it was submitted.