NeetoCal allows you to embed your scheduling page directly into your website. Instead of sending clients to a separate link, they can book appointments while staying on your site, providing a seamless user experience.
How to access embed options?
Go to the Scheduling links tab in your dashboard.
Click on the specific scheduling link you wish to embed.
Click on Share.
Select Embed on a webpage.
From here, you can choose your embedding style and configure the display options.
Embed types
NeetoCal provides four ways to integrate the scheduling link into your site. Choose the one that fits your layout best:
1. Inline embed
Displays the scheduling link directly on your webpage so it's always visible and part of the page layout. It will look like this. This is ideal for dedicated booking sections, such as a 'Contact us' page or a service overview, where the calendar must be immediately visible upon loading.
2. Pop up via sticky button
This places a floating button on your webpage. When clicked, the scheduling link opens in a pop-up window like this. This is best for marketing landing pages where you want a "Book now" option to stay visible as the user scrolls.
3. Popup via custom trigger
This gives you the most control, as you can link the NeetoCal pop-up to any clickable element on your website—such as a navigation link, a call-to-action link, or your own custom-styled button like this.
How to set it up:
Create your element: Add a button or element to your website's code and give it a unique ID (e.g.,
my-booking-button).-
HTML
<button id="my-booking-button">Book a Meeting</button> Select the option: In NeetoCal, select Pop-up via custom trigger.
Link the ID: Enter your unique ID (e.g.,
my-booking-button) into the Element ID field in NeetoCal.Embed: Copy the Embed code and paste it into your website.
-
Important note on the Embed code: For demo purposes, the code you copy includes a sample button element. You can remove this button from the Embed code safely once you set up your own element to trigger the modal:
<!-- This is a demo button, you can use any element on your website instead. --> <!-- <button id="open-popup-button">Click to open popup</button> -->
4. Iframe embed
This embeds the scheduling link inside a fixed iframe on your page like this. Unlike the Inline embed (which adapts to your page's layout), the iframe provides an isolated, predetermined window into the booking interface that does not automatically adjust its size.
Customization options ✨
These options allow you to fine-tune the visual layout of your embed for a seamless, professional look.
1. Dynamic height
Dynamic height ensures the embed's height automatically adjusts in real-time to fit the content being displayed. This is key because it eliminates internal scrollbars. This feature is enabled by default for Inline embeds. You can disable this feature using the toggle switch if you prefer a fixed height. This feature is always enabled for Pop-up embeds (Pop up via sticky button and Popup via custom trigger).
2. Align content to left
This feature controls the horizontal appearance of the booking interface within its container. When enabled, it removes the default centering, maximum-width constraint and internal padding, pushing the booking interface to sit strictly against the left edge. This setting is perfect for modern, minimalist layouts, as it ensures the calendar aligns seamlessly with your website's main text and grid structure.
3. Hide details and cover image
This feature allows you to control the visibility of specific elements in your embedded scheduling.
What it does: When enabled, it hides the meeting title, duration, description, location (e.g., Google Meet), and any cover image associated with your scheduling link.
Why it’s great: This is ideal when your webpage already provides these details or has its own custom design. It prevents redundant information and helps maintain a clean look for your booking interface.
Advanced configuration
Pre-filling fields
You can pre-fill fields in your embedding to save time for your clients. This feature allows you to automatically populate information like names, email addresses, or answers to questions before clients access your booking page.
In the Embed settings, find the Query params section (bottom left).
In the "Enter key name" placeholder, type the field code (e.g; "name").
In the "Enter key value" placeholder, type the value you want to pre-fill (e.g; "Oliver")
Copy the code and paste it at the desired place.
When clients access your booking page through this link, they will see the form with the specified fields already filled in.
React applications
If you want to embed NeetoCal in your React app, check out the following examples: