How to iFrame Appoint.ly on your website?

In this tutorial, we will show you how to embed your Appoint.ly scheduling page into your website. This integration is implemented via iFrame.

An iframe is an HTML coding technique you can use to display a webpage within a webpage. iFrames are helpful when you are using a third party website (like Appoint.ly — to schedule meetings) and you want your website visitors to interact with it without leaving your website.

Step 1. Preparing a code

Copy the following HTML code:

<iframe src=”LINK” frameborder=”X” width=”Y” height=”Z”></iframe>

where:

LINK — your appointment’s type link from Appoint.ly

X — frameborder size in pixels (eg. 1px) or 0px (no border)

Y — width in pixels (eg. 1000px) or in percents (eg. 100%)

Z — height in pixels (eg. 1000px) or in percents (eg. 100%)

Step 2. Adding your data

Replace the “LINK” with the Appoint.ly scheduling link you want to be displayed on your webpage within in the iFrame. Replace X, Y and Z with the sizes you want.

You link should look like this (an example):

<iframe src=”https://appoint.ly/s/appointly-team/monika/call" frameborder=”1" width=”100%” height=”100%”></iframe>

or

<iframe src=”https://appoint.ly/s/appointly-team/monika/call" frameborder=”1" width=”1000px” height=”800px”></iframe>

Step 3. Inserting a code to the website

Log into your website HTML editor and add a code to the <body>.

That’s all!

And here is how it will look like:

iFrame — an example from our user’s website / www.jonathansamericanenglish.com/schedule-next

If you have any question, feel free to ask in comments or via e-mail hello@appoint.ly.