Putting booking on your website
A link or one line of code puts booking on your own site, on the websites you allow.
Updated
On this page
Embedding puts your live booking page inside your own website, so customers book without leaving it. Your services, hours and page design appear there automatically. It is off until you turn it on, and the page only loads on the websites you list. Any other site that tries to show it gets a short notice and a link to your hosted page instead.
Turn it on
Open Settings, Website embed.
Switch embedding on.
Add the address of every website that will show the page, using Add website, up to 20. You can paste several at once, separated by spaces or commas.
example.comalso coverswww.example.com;*.example.comcovers every subdomain. Anything you paste is tidied to a plain hostname, so https:// and paths do no harm.Save, choose how you want it to appear, and copy the code.
Three ways to add it
| Style | What visitors see | Good for |
|---|---|---|
| Inline | The booking steps sit on your page where you paste the code, and grow to fit, so there is no scrollbar inside a scrollbar. | A page called Book, or a section on your home page. |
| Button | A Book now button in a colour you choose. It opens the booking steps in a window over your page. Escape or the close button dismisses it. | A header, a home page, or a site with little room. |
| Link | A plain link to your hosted booking page. No script, nothing loads until it is clicked. | Email signatures, menus, and Wix, WordPress.com and the Squarespace Personal plan, where the script styles cannot run (see Site builders below). |
The inline code, with an example business name in it:
<script src="https://catchlinehq.com/embed.js" data-business="summit-plumbing" async></script>The button version adds a mode and a label. Your own code, with your business filled in, is on the Website embed page.
<script src="https://catchlinehq.com/embed.js" data-business="summit-plumbing" data-mode="button" data-label="Book now" async></script>Paste it into your site
| Builder | What works |
|---|---|
| Webflow | Inline, Popup button or Link, in an Embed element. |
| WordPress (your own hosting) | Inline, Popup button or Link, in a Custom HTML block. |
| WordPress.com | Link on every plan. The script styles need the Business plan or higher; lower plans remove script tags. |
| Squarespace | Inline, Popup button or Link on Business and Commerce plans, in a Code block. Personal plan: Link only. |
| Wix | Link. The Embed HTML element runs code inside a Wix frame, which the booking page refuses for safety. On a premium plan, Settings, Custom Code (body end) with the Popup button style also works. |
| GoDaddy Website Builder | Try Inline in an HTML section; if you see the could-not-load message after ten seconds, use Link. |
- Paste the code where the booking form or the button should appear, in the block the table names for your builder.
- The button label can be up to 40 characters and the colour any six-digit hex colour. Set both on the Website embed page and the code updates.
- The inline style can use a transparent background so it blends into your page. It is an option on the same page.
- The inline steps appear right after the code. To put them inside a particular box on your page instead, add
data-target="#book"to the script tag, wherebookis that box's id. - Test on the published site, not only in the editor. Some builders preview on a temporary address; add that address to the list too if you want the preview to work.
If the page shows a notice instead of the booking steps
- Online booking could not load on your-site.com. The most common message. Either that exact address is missing from the allowed list (add it and save; it takes about a minute), or the code is inside a site-builder frame (see the Site builders table). Open the browser console for the exact reason.
- This website is not on the allowed list. Appears only in browsers without frame protection; most browsers show the could-not-load message above instead. The address of the page showing the embed is not in your list. Add it, exactly as it appears in the browser, and save.
- Embedding is turned off. Switch it on and save.
- Booking page not found. The business name in the code does not match. Copy the code again from the Website embed page.
- The first three notices offer the hosted booking link, so a customer is never stuck. The fourth has nowhere to send them, which is why the name in the code has to match.
Bookings made through the embed are ordinary bookings: same confirmation text, same reminder, same inbox. The embed code stays the same when you connect your own domain; it always loads from catchlinehq.com.
Still stuck?
Email us with your business name and what you were trying to do. Screenshots help. If a page here does not match what you see in Catchline, say so and we will fix the page.
hello@catchlinehq.com