Any form you build in BlueSuite can be embedded on your own website with a single snippet. Visitors fill it out without leaving your site, and every submission arrives in your account as a request, with an appointment attached if you have online booking turned on.
The form renders directly into your page rather than inside a frame. That means it takes on your site’s width, scrolls with your page, grows to fit its own content, and inherits your fonts instead of looking like something bolted on.
This guide covers embedding. For building the form itself, see Client Forms and Online Booking.
You need a client form that is saved and Published. An unpublished form will not render for the public, which is the most common reason an embed comes up empty.
The same panel has the form’s public link, if you would rather share a link than embed anything.
It looks like this, with your own workspace and form names in place of the examples:
<!-- BlueSuite Client Form -->
<div id="bluesuite-form-book-a-visit"></div>
<script src="https://my.bluesuite.app/embed/v2/client-form.min.js" async></script>
<script>
window.BlueSuiteForms = window.BlueSuiteForms || [];
window.BlueSuiteForms.push({
target: '#bluesuite-form-book-a-visit',
workspace: 'your-workspace',
form: 'book-a-visit'
});
</script>Three things are going on:
Load the script once, then add a container and a push call for each form. Give every container a different id so each form knows where it belongs.
Use a Custom HTML block rather than a paragraph. A regular text block strips script tags out when you save, and you end up with an empty container and no error to explain it. Page builders like Elementor and Divi have their own HTML or code widget, which works the same way.
If your site is the BlueSuite website builder, you already have a lead form connected to your account and do not need to embed anything.
Render the container, then push the config once the component is on screen:
import { useEffect, useRef } from 'react'
export function BookingForm() {
const mounted = useRef(false)
useEffect(() => {
if (mounted.current) return
mounted.current = true
window.BlueSuiteForms = window.BlueSuiteForms || []
window.BlueSuiteForms.push({
target: '#bluesuite-form-book-a-visit',
workspace: 'your-workspace',
form: 'book-a-visit',
})
}, [])
return <div id="bluesuite-form-book-a-visit" />
}Load the script itself once for the whole app, with a normal script tag in your layout or document. The ref guard matters in development, where React deliberately runs effects twice and you would otherwise get two copies of the form.
Styling is set on the form itself, under Appearance in the form editor, not in the snippet. Change it there and every place that form is embedded updates at once.
Two settings matter most for an embed. Leave the background color empty so your own page shows through, and leave the font set to match your website so the form uses the type your site already loads. Our styles are scoped to the form, so nothing we ship can leak out and affect the rest of your page.
Embedding used to require creating an API key and pasting it into your website. It does not any more. The snippet carries only your workspace and form names, both of which are public anyway, and submissions are protected on our side with spam traps and rate limiting.
Nothing to do if you have an older form embedded. Those keep working exactly as they are. When you are ready to change the questions, take a booking, or accept photo uploads, build a client form and swap in the new snippet.
target matches the id on your container exactly, including the #The config was pushed twice. In React this usually means the effect guard is missing. On a regular website it usually means the snippet was pasted into both the page and a template that also renders on that page.
Because the form renders as part of your page, your own stylesheet can reach it. That is usually what you want, since it makes the form look native. If a site style is fighting the form, adjust the settings under Appearance first, and narrow any very broad rules your theme applies to inputs and buttons.
Online booking is part of the Advanced plan, and times only appear when a bookable team member is free. See Client Forms and Online Booking for what to check.