How to add a branded booking form to your website

Should you use a booking popup or an inline form?

Use a popup when booking is one action on a larger page. A customer can read your prices, location information and service description, then press Book an appointment. The form opens over the page and the customer can close it to return to the information underneath.

Use an inline form when booking is the main purpose of the page. The form sits within the page and adjusts its height as the customer moves through the steps. Leave enough horizontal space for it; a narrow sidebar is usually a poor place for a calendar and customer details.

For example, a mobile barber could put a booking button beside each service description and an inline form on a dedicated booking page. Both lead into the configured CalMov flow. The display choice does not change the service duration, travel rules or payment settings.

What should you set up before copying the code?

An embed displays the booking options configured for your business. It cannot create availability that is missing from your diary. First check the service location, duration and price, then confirm your working hours and any service-area rules. Open your booking page and check that an intended appointment can be selected.

In the Share tab, assign a public service key to every service you want to offer through the embed, including services customers can choose themselves. This is the readable identifier used by the website code. Keep it stable once the code is published. If you change it later, update any website buttons or forms that use the old key.

• Activate the services customers should be able to book.
• Check whether each appointment happens at the customer's address, at your venue or online.
• Set working hours long enough for the complete appointment and required travel.
• Decide whether to offer online payment as well as payment at the appointment, using the options available to your business.
• Check that you have access to a website block or template that permits custom HTML and scripts.

Approve the exact website addresses

Add the website origins that will host your form under Allowed website origins in the Share tab, one per line. For a site using both versions, enter https://example.com and https://www.example.com separately. An origin is the protocol and host, not a particular page: enter https://example.com rather than https://example.com/book. Use your own domain in place of this example.

Enable the embed and save the settings. A website builder may show previews on a different domain from the published website. Approve that exact preview origin if you need to test there, or test the published page. Remove temporary preview origins when you no longer need them. Adding a domain to this list does not publish a booking button on that site; the code still needs to be installed.

Add a booking button that opens a popup

Choose Modal dialog under Generate website code in the Share tab, select the service or services you want to preselect and press Copy code. Multiple selected services must share the same appointment location type: home visit, venue or online. Paste the generated code into a custom HTML block or your website template. Use the code from your own dashboard; the example below contains placeholders for the business slug and public service key.

You can change the button text and give it your website's existing button classes. Keep the data-calmov attributes intact. Load the CalMov script once on a page, even when the page contains several booking buttons. Publish the page and press the button on the approved website to check the result.

<button
  type="button"
  data-calmov-open="your-business"
  data-calmov-services="your-service"
>
  Book an appointment
</button>
<script src="https://www.calmov.com/embed/v1.js" async></script>

Place an inline booking form inside a page

Choose Inline booking flow, select your services and copy the generated code. Paste it where you want booking to appear, below enough information for the customer to understand what they are choosing. The example uses the same placeholders as the popup. The data-calmov-inline attribute identifies the business whose form should appear.

Let the embed adjust its height. Check that the website's surrounding section does not have a fixed height or hidden overflow that cuts off the final button. On mobile, give the form the available page width and check that a sticky navigation bar or chat widget does not cover the controls.

<div
  data-calmov-inline="your-business"
  data-calmov-services="your-service"
></div>
<script src="https://www.calmov.com/embed/v1.js" async></script>

Match the booking form to your business branding

Where your plan includes custom booking branding, save your theme and accent colour in CalMov's booking-page settings. The form uses those saved business settings. Styling the website button changes the button on your website; it does not change the theme inside the booking form.

The initial loading placeholder can be neutral while the business settings arrive. Once available, the loader follows the saved light or dark theme and accent colour before the booking form takes over. A dark booking form does not require a separate dark version of the website snippet. Check the transition on a slower connection as well as after the page has loaded.

Choose service selection behaviour separately from appearance. Lock services to the website selection is useful for a button beside one specific treatment. Customers can change selected services suits a general booking entry point. For a locked selection, supply the intended public service key in the generated code.

What happens after a customer opens the form?

For a home-visit-only business, the customer starts with their visit address, then chooses a service. UK bookings use a postcode and door or flat number. Where US booking is enabled, the form uses a ZIP code and full street address. Online and venue-only bookings skip the customer-address step. A business offering several location types asks for an address when the selected service needs one.

Once enough service and location information is available, CalMov can begin preparing availability while the customer continues. The customer chooses a day, then sees appointment times that fit the applicable service and travel rules. Loading the calendar is preparation; it does not mean a particular time has been reserved or a booking has been confirmed.

In the Pro flow, choosing a time creates a temporary reservation while the customer enters their details. The final step checks the booking before confirmation. If the customer chooses to pay online, check the final payment and booking status: returning from checkout can initially show payment processing while confirmation is still pending.

Test the published customer journey

Start with one service and a working day you know should have space. For a home visit, use a complete, recognisable address inside your service area. A ZIP code or vague place name alone is not a useful test of a street-address lookup. Repeat with a location outside your area to check that the customer gets a useful response.

A website-builder preview is not a substitute for checking the published page. Test using a phone as well as a desktop, and try keyboard navigation. If you test payments, use an explicitly configured Stripe test environment. Adding an embed to a live website does not put its payments into test mode.

• Open the form from each booking button and check the intended service is selected.
• Check the loading placeholder, saved theme and accent colour on a slower connection.
• Choose a date and time, go back and change the service or address, then check the revised options.
• Move through the form on a small screen and check that the continue button remains reachable.
• For a popup, check the close control, Escape key and return to the surrounding website.
• Complete a controlled test booking and verify the final status in the dashboard; a loading calendar or checkout redirect alone does not prove completion.
• Cancel the test appointment afterwards so it does not occupy real availability.

Troubleshoot a form that does not open or show times

If nothing happens when the button is pressed, check that the loader script is present and the button has the correct business slug. Some website editors remove scripts from ordinary text blocks. Use the editor's supported custom-code location and check whether an optimisation setting has delayed the script.

If the frame opens but booking is unavailable, check the exact website origin, saved embed settings, active services and public service keys. If it works on the published site but fails in preview, compare the two website origins before changing the booking configuration.

If the form loads but no appointment times appear, look at the booking inputs: service duration, working hours, date window, existing bookings and travel area. Check the address is recognised and try a known working day. Changing a popup to an inline form will not make an otherwise unavailable appointment bookable.