Put booking on your website

Start with a saved, published booking link. You can share it directly or display the booking experience inside your website. Both use the same questions, calendar rules and communications.

Share a link

In Links, use Copy link. Add it to a website button, email, profile or chat. Use the link copied from the dashboard so that it points to the current published address.

You can add UTM campaign parameters to shared links for attribution. Keep private contact details out of URLs. Anyone with the ordinary booking link can book a real appointment.

Paste the website snippet

1. Open your booking link and choose Embed.
2. Under Script snippet, choose Copy snippet.
3. Paste it into an HTML/code block on your website. Your website editor must allow JavaScript.
4. Give the block the available width and let it grow with its contents. Load the script once per page.
5. Publish the website and check the result on desktop and mobile.

The embed uses your link's language and booking mode. Changes to the booking configuration are managed in Calberry; do not rebuild its questions by editing the snippet.

For a two-column form/calendar layout, choose a sufficiently wide content block. A narrow mobile block stacks the content on one page.

Use an AI editor

Under Embed, copy the Installation prompt for AI editors and paste it into your editor with the website project open. The prompt includes the current snippet, booking requirements, privacy and tracking instructions, and a test procedure.

Ask the editor to keep those requirements intact. It must not remove required fields, preselect follow-up consent, expose a private API key or add a second booking submission. For your own form or custom API interface, pass the prompt to someone comfortable with the technical embed reference.

Website builder notes

• WordPress: Use a Custom HTML block with a theme/editor that permits module scripts. Save and check the published page; an editor preview may not run scripts.
• Webflow: Use a code embed and publish the page. Allow room for the full form and calendar.
• Framer: An HTML embed is displayed inside a frame. Set enough height and check the mobile breakpoint; its consent and tracking connection needs additional care.
• React or Next.js: Use the script/web component integration. There is no separate Calberry npm React package to install at this stage.

Your developer can find the detailed snippet, consent handling and Framer requirements in the technical reference.

Test safely

Use More actions → Make a test booking in Calberry and open the generated test page separately. Check Meetings → Test bookings. A query parameter does not turn the normal embed into a sandbox.

On your website, verify that the embed loads, questions are readable and the calendar fits. Only make a real booking when you intend to test calendar invitations and configured emails; that booking is real and counts towards usage.

If the embed is blank

Check that the link is published, the script was preserved by the editor and the published website allows it to load. Check width and frame height. If the calendar loads without times, follow Why are no times available?.

Tracking events wait for tracking consent by default. A working embed can accept bookings without sending analytics events. See Tracking events and consent.