With Zocks Scheduling, you can add your booking form to any page of your own website. Paste one short snippet into your website builder, and the booking form appears right on your page. No coding needed.
You can show the form in two ways:
Inline: the booking form sits directly in your page.
Popup: a button on your page opens the booking form in a modal on top of it.
Before you start
You need:
Your booking link. This is the same link you already share with clients. It looks like https://booking.zocks.io/your-firm/advisor-name, or https://booking.zocks.io/your-firm for your whole firm. Copy it from Zocks, or from the address bar when you open your own booking page.
Access to edit your website, or someone who has it. If you can't edit the site yourself, send them this article and your snippet.
Tip: Keep Zocks and your website editor open in separate browser tabs. Your site's own design can affect how the form looks, so always check the live page when you're done.
Quick start
Copy your Zocks booking link.
Pick a snippet (inline form or popup button) and add your link to it.
Paste the snippet into your website using your builder's HTML or Embed block.
Publish, then open the live page and make a test booking.
Choose which booking link to use
The link you use decides what visitors see.
If you want visitors to… | Use this link |
Book one specific advisor | |
Book one specific meeting type directly | |
Book whoever is available at your firm | |
Book whoever is available at your firm, one specific meeting type directly |
With the firm link, visitors pick a meeting type and a time from your whole team's availability. Zocks assigns the advisor, and the confirmation shows who they'll meet.
Note: The firm link only works when firm-wide booking is turned on for your account.
A personal scheduling link that Zocks generated for a client works too. Paste it exactly as it is.
Copy your snippet
Choose Inline for a "Book a meeting" or contact page. Choose Popup for a call-to-action button in your header or footer. If you're not sure, go with Inline.
In the snippet, replace the link in data-url with your booking link. That's the only change you need to make.
Inline form
<div
data-zocks-booking
data-url="https://booking.zocks.io/your-firm/advisor-name"
></div>
<script async src="https://booking.zocks.io/embed/v1.js"></script>
Popup button
<button
data-zocks-booking
data-mode="popup"
data-url="https://booking.zocks.io/your-firm/advisor-name"
>
Book a meeting
</button>
<script async src="https://booking.zocks.io/embed/v1.js"></script>
You can change the button text to anything you like.
The inline form is 764 pixels tall. When a step needs more room, the form scrolls inside its box, so your page never jumps around. The popup opens as a fixed-size window.
Add the snippet to your website
Every website builder has a block for pasting code, but the name differs. If your builder isn't listed below, look for a block called HTML, Embed, Code, or Custom Code.
WordPress
Edit the page where you want the form.
Click + to add a block and search for Custom HTML.
Paste your snippet into the block.
Click Update (or Publish).
Using Elementor? Add an HTML widget and paste the snippet there.
Note: On WordPress.com, pasting code requires the Business plan or higher. Self-hosted WordPress sites can paste code directly.
Squarespace
Edit the page and click + where you want the form.
Choose the Code block.
Delete the sample text, paste your snippet, and click Apply.
Click Save, then Publish if the page isn't live yet.
Note: Code blocks require the Squarespace Business plan or higher. The form appears on the published page, not in the editor preview.
Wix
In the editor, click + Add Elements.
Choose Embed Code, then Embed HTML.
Click Enter Code, paste your snippet, and click Update.
Drag the box to where you want it and make it as wide as your content area.
Click Publish.
Note: The form appears on the published site, not in the editor preview.
Webflow
Open the page in the Designer and open the Add panel.
Drag an Embed element onto the page.
Paste your snippet into the code editor and click Save & Close.
Click Publish.
Note: Embeds appear on the published site, not in the Designer canvas.
Other website builders
Find the block for adding HTML or custom code, paste the snippet, and publish. If there's no such block, use the iframe option below, or send the snippet to whoever manages your website.
If your builder removes the snippet
Some website plans and embed blocks remove <script> tags but allow an iframe. If the snippet disappears when you save, paste this instead:
<iframe
src="https://booking.zocks.io/your-firm/advisor-name?embed=1"
title="Book a meeting"
width="100%"
height="900"
style="border: 0"
></iframe>
Replace the link as before, and keep ?embed=1 at the end. It makes the form fit the box instead of looking like a whole page inside your page.
You can add branding options to the end of the link too: &hideLogo=1, &hideAll=1, &hideAccountName=1, &hideProfilePhoto=1, &hideUserName=1, or &brandColor=1d4ed8 for a color. For example: ?embed=1&hideLogo=1.
Compared with the standard snippets, the iframe option has a few trade-offs:
You set the height yourself (900 suits most pages), and the form scrolls inside the box if it needs more room.
There's no popup mode and no auto-resize option.
If the booking page can't load, the box stays blank instead of showing a link.
Check that it works
Open the live page in your browser, not the editor preview.
Check that you see Book a meeting with your branding. Click through the steps. The form should stay the same size and scroll inside its box when a step is taller.
Check the page on a phone as well.
Make a test booking, then cancel it.
Match the form to your website
By default, the embedded form shows your account's branding (logo, firm name, advisor name and photo, and brand color), just like your standalone booking page. To blend it into your site, add any of these settings to the first line of your snippet.
Setting | What it does |
data-brand-color="#1d4ed8" | Uses a different accent color. Any hex color works, with or without the #. |
data-hide-logo | Hides your firm's logo. |
data-hide-account-name | Hides the firm name at the top of the form. |
data-hide-profile-photo | Hides the advisor's photo. |
data-hide-user-name | Hides the advisor's name at the top of the form. |
data-hide-all | Hides all four of the above at once. |
data-height="900" | Changes the form's height in pixels. The default is 764. Enter the number only, without px (data-height="768px" is ignored). The form scrolls inside its box when a step needs more room. |
data-auto-resize | Makes the form grow and shrink to fit each step instead of scrolling inside a fixed box. Your page shifts slightly each time the height changes. |
data-min-height="600" | Works only with data-auto-resize. Keeps the form at least this tall, in pixels. |
To hide everything except one element, hide all, then name what to keep with ="false". This example hides the photo and both names, but keeps the logo:
<div
data-zocks-booking
data-url="https://booking.zocks.io/your-firm/advisor-name"
data-hide-all
data-hide-logo="false"
></div>
Note: These settings can only hide elements or change the color. A website can never add its own logo or name to the form, or show anything your account settings keep hidden. This protects your clients from look-alike pages.
Troubleshooting
1. Nothing appears where the form should be
Make sure the page is published and that you're looking at the live page, not the editor preview. Most builders hide embedded code in preview.
Check that you pasted the whole snippet, including the <script> line.
Some builders remove code pasted into a normal text block. Use the block named for your builder above.
2. Nothing appears, and the browser console mentions https
Your page must be served over https://. The booking form can't connect to a page loaded over plain http://. Turn on https for your site (your builder may call it SSL) and republish.
3. You see "The booking form could not be displayed here" and a link
The snippet loaded, but the booking page behind it didn't respond. This is usually caused by a typo in the data-url link. Click Open the booking page. If it doesn't open your booking page in a new tab, fix the link in your snippet. If you used the firm link, check that firm-wide booking is turned on for your account.
Visitors who see this message can still book through the link, so nobody gets stuck.
4. The form looks cramped or has its own scrollbar
Give the block the full width of your content area. The form scrolls inside its box when a step needs more room. To show more at once, add data-height="900" to the first line of your snippet.
5. It works on a computer but looks wrong on a phone
The form needs about 320 pixels of width. Remove any fixed width or large side padding your builder added to the block.
6. It shows for you but not for a colleague
An ad blocker or privacy extension can block embedded content. Ask your colleague to try in a private window or with extensions turned off.
Still stuck? Contact Zocks support and include the page address and the snippet you pasted.
For developers
The snippets above work without writing any JavaScript. If your site is a single-page app, or you want to react to events in the booking flow, you can mount the form programmatically:
<div id="booking"></div>
<script
async
src="https://booking.zocks.io/embed/v1.js"
onload="mount()"
></script>
<script>
function mount() {
Zocks.initWidget({
target: "#booking",
url: "https://booking.zocks.io/your-firm/advisor-name",
onBookingConfirmed: function (booking) {
// e.g. send an analytics conversion event
},
});
}
</script>
initWidget takes the same settings as the attributes above: url, mode ("inline" or "popup"), height, autoResize, minHeight (with autoResize only), className, brandColor, hideAll, hideLogo, hideAccountName, hideProfilePhoto, and hideUserName. It also supports these callbacks:
Callback | Fires when |
onReady | The booking flow has loaded. |
onResize | The form was resized to fit its content (only with autoResize). Receives the new height in pixels. |
onStepChange | The visitor moves between steps. |
onBookingConfirmed | A booking was made. Receives the time, meeting type, and status, nothing else. |
onError | The widget couldn't start, or the flow couldn't load. |
A hide flag set to false keeps that element visible even when hideAll is set. An omitted flag inherits hideAll.
The returned handle exposes open() and close() (popup mode), destroy(), and the read-only mode and iframe properties. If your framework adds embed elements after the page loads, call Zocks.scan() to mount them.
Good to know
Privacy. Your page only ever receives the booking's time, meeting type, and status. Client names, email addresses, and messages stay inside the booking flow and never reach your site.
Browser history. Inside an embed, the flow doesn't add a history entry for each step. A visitor's Back button leaves your page instead of stepping back through the form.
Including the script twice is safe. The second copy is ignored.
Your page must be served over https. Otherwise, initWidget throws a configuration error.
Versioning. The version is in the script URL (/embed/v1.js). Any breaking change would ship under a new URL, so your existing snippet keeps working.
Scheduling is available on the Ultimate plan.