---
title: How to embed Calendly link with your websites using iFrame?
description: "# Steps to embed the Calendly link on your website ### Open you project Please, navigate to the ‘Sites’ on the left menu bar and open your project ![](https://crmhelpdocs.com/wp-content/uploads/2023/10/image-575-1024x444.png) ### Add the ‘Custom Code’ element Please, choose the location where…"
url: "https://crmhelpdocs.com/docs/how-to-embed-calendly-link-with-your-websites-using-iframe/"
updated: "2023-10-12"
category: Calendar
---

# How to embed Calendly link with your websites using iFrame?

# Steps to embed the Calendly link on your website

### Open you project

Please, navigate to the ‘Sites’ on the left menu bar and open your project

![](https://crmhelpdocs.com/wp-content/uploads/2023/10/image-575-1024x444.png)

### Add the ‘Custom Code’ element

Please, choose the location where you want to place the calendar and drag the ‘Custom Code’ element there.

![](https://crmhelpdocs.com/wp-content/uploads/2023/10/image-576-1024x518.png)

### Add the embedding code

💡 `<iframe src="Your calendar link" style="width:320px;height:630px;"></iframe>`

This is the format of the embedded code. Your calendar link will be like `https://calendly.com/abc/zyz"`

When you need specific width and height of the calendar, then use

`style="width:320px;height:630px;`

You can modify the values as per your requirements

Finally, save and publish the website.