Embed on a webpage

NeetoCal allows you to easily embed your booking page into your website. Instead of sending clients to a separate page, your clients can book appointments directly on your site without leaving your page.

Embedding booking page on your website

1. Visit the Scheduling Links page.

2. Click on the scheduling link that you wish to embed.

3. Click on Share.

4. There, you will see the option Embed on a webpage.

5. Click on it to view the embed options.

6. NeetoCal provides the following embed/widget options to choose from:

   • Inline Embed

   • Pop-up via sticky button

   • Pop-up via custom trigger

Inline embed

Inline embedding loads the NeetoCal page directly inline with the other website content. It will look like Here is a demo.

Pop up via sticky button

Adds a sticky button to your webpage. When clicked, it opens the scheduling page in a popup window, Here is a demo.

Popup via custom trigger

When a user clicks a button on your website, you can make the NeetoCal page pop up. Here is a demo.

Determine the specific element in your web page that you want to make clickable to trigger the NeetoCal popup. Then set the "id" of the element to the one you provided on the "Element Id" in NeetoCal.

Add the script provided in NeetoCal to your website.

Note: The script does not add an element to your webpage. The above 2 steps must be done correctly for the script to work.

Example

Let's say you want to add the NeetoCal to your website as a popup when you click a button.

1. Add the button to your website. Assign an ID to the button, which can be anything you prefer. In this example, we'll use the "popup button":

<button id="popupButton" name="popupButton">Book a meeting</button>

2. Open NeetoCal and go to the meeting you want to display in the popup. Navigate to the Share tab. Select the Embed option and choose Popup via custom trigger.

3. Add the ID popup button to the Element Id field.

4. Copy the script provided on the right side of the share page and paste it onto your website.

Extra parameters

You can pass an extraParamsobject into the embed code to append additional parameters to the embed URL. This is useful for pre-filling meeting links with specific values, such as a client's name and email.

If you want to prefill a scheduling link with the name Oliver Smith and email [email protected], you can use itextraParams like this:

neetoCal.embed({
  ...
  extraParams: {
    name: "Oliver", 
    email: "[email protected]" 
  }
})

React applications

If you want to embed NeetoCal to your React app, check out the following examples:

1. Inline embed

2. Pop up via sticky button

3. Pop up via custom trigger