Embed booking page on your website

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.

NeetoCal provides following embed/widget options to choose from:

• Inline Embed

• Floating Pop-up

• Pop-up via element click
  

Here are the steps to embed NeetoCal booking page on a webpage:

1. Login to NeetoCal.

2. On the sidebar, click on Meeting Links.

3. Click on the meeting link that you wish to embed.

4. Click on Share.

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

6. Click on it to view the embed options.

There are multiple embed options to choose from.

Inline embed

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

Floating popup

A floating popup will be seen on your website. When a user clicks on this, NeetoCal page will pop up in a modal like Here is an demo.

Popup via element click

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.

Let's see an 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 element click.

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.

React apps

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

1. Inline embed

2. Floating popup

3. Element click