# How to Easily Integrate a Calendly Calendar into Your Webflow Website? Tutorial3 minPublished on Mar 20, 2023Updated on ![Integrate a Calendly calendar into Webflow](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6712289654e10d30fb524384_64760069e93084646c9ef1c6_63f733df7615b2cf26dc5338_Open-Graph-webflow-calendly.png)Table of contents [ Copied](#)[ ](#)[ ](#)[ ](#) - [H2 Example](#) Use AI to summarize this article[ ChatGPT](#)[ Claude](#)[ Grok](#)[ Perplexity](#)[ Google AI](#)Key pointsCalendly is a **scheduling tool connected to your calendars** that **simplifies appointment booking** for users navigating your site. It is user-friendly, intuitive, and offers a multitude of features to customize your calendar according to your needs. In this article, we will introduce you to the tool and explore the various steps to integrate it into your **Webflow website.** ## Features and Benefits of Calendly: Adding [Calendly](/tools/calendly) to your website provides a simple and fast solution for connecting with prospects, clients, or candidates, who can view your availability in real-time and choose a time slot that works for them without the hassle of email exchanges or phone calls. You can: - Set your availability hours - Customize appointment types - Configure different calendars with distinct themes and additional options (for example, questions). - Manage confirmations and reminders, and much more. Additionally, if a schedule change is necessary, both parties receive a notification. ### **Seamless User Experience** Allow your users to schedule an appointment with you or your team seamlessly without leaving the page. ### Custom Scheduling Aligned with Your Brand: Customize the colors and appearance of your scheduling page to ensure it aligns with your branding. ### Quick Execution Customize and add Calendly to your website in just a few minutes. ## Creating an account or logging into Calendly You can [create a free Calendly account](https://calendly.com/) or opt for a paid subscription to access additional features. Once your account is created, you can create events, set your availability hours, and tailor your calendar to meet your needs. ## How to Generate Your Calendly Embed Code? Here are the steps to follow on the Calendly site: - Click on >**my account** - You will find the different **events**, for example, a 20-minute phone appointment - Click on > **share** - Three options are presented. Select > **Add to website** - Click on >** Online Embed** (add a scheduling page to your site) - Click on **continue** ![generate a Calendly embed](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6712289754e10d30fb524432_64760069e93084646c9eef00_63f752ca1880b5040575b152_integrate-embed-code-calendly-webflow.webp) - the embed code has been generated  - Copy the Calendly embed code or "Ctrl+C" ### **If you only wish to add the calendar, proceed as follows:** - Online Embed - Settings - Check > **hide event type details** - A new script is generated ![generate a Calendly embed](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6712289754e10d30fb524436_64760069e93084646c9eeeff_63f75366e3a0de7405cb6b29_generate-embed-calendly.webp) ## Integrating Calendly with Webflow: A Quick and Easy Guide Now that you have generated the Calendly embed code, you can integrate it on the desired page of your Webflow site. Here are the steps to follow: - Open your site in the Webflow editor - Create a **DIV Block** which you can name, for example: calendly-embed - Add an embed element or with the command "Ctrl+K" > Embed - Click on the Embed element to access its settings panel - Click on the Code tab - **HTML Embed Code Editor** opens - Paste the Calendly embed code or "Ctrl + V" ![designer webflow embed code](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6712289754e10d30fb52443b_64760069e93084646c9eef02_63f753c804c496c0cbbae7ba_designer-webflow-embed.webp) - Customize the display settings of the Calendly calendar if necessary - Save your changes and publish your website to see the Calendly calendar in action and test it! ![embed Calendly in Webflow and calendar rendering](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6712289754e10d30fb524440_64760069e93084646c9eef04_63f754107031b9d8b31b5a9e_embed-calendly-webflow.webp) ### **Customize the Appearance of Your Calendar** You can modify the appearance of your calendar on the Calendly site by customizing the colors, messages, and texts, as well as the availability hours, appointment types, and confirmations. You can also make your calendar responsive on Webflow and add CSS specifications by applying styles from the settings (for example, giving it a specific width and height). Adding a **Calendly calendar** to your **Webflow website** is an excellent way to **facilitate appointment booking** for your clients and prospects. Don't wait any longer to test this Webflow feature and **allow website visitors to schedule with you or your team.** If you want to follow a video tutorial, you can check out Florian's on our YouTube channel: And to go further, check out Thibaut's article: - [Implementing an Add to Calendar button in Webflow](/blog/add-to-calendar-button-webflow) [ ](#)![Digidop](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/670d65d7d25b0b7faea756ef_64760069e93084646c9ef274_icon-digidop.svg)DigidopWeb Agency[ ](/team/digidop-team)[ ](https://fr.linkedin.com/company/digidop)[ ](https://x.com/digidop_com)+1200 readers ## Stay ahead of the curve! Subscribe now for expert insights. [Subscribe ](https://digidop.substack.com/subscribe)![Preview Digidop Newsletter](https://cdn.prod.website-files.com/6705382c85d21c496de94fa5/671231c436687e9d40d995e9_newsletter-digidop.webp)[Preview Newsletter ](https://digidop.substack.com/) ## Suggested articles ![Collage of homepages from B2B SaaS agencies including Digidop, Vydera, FlowNinja, OFF+BRAND, Yuri & Neil, MetaLab, Shakuro and Ramotion](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6ab922fa556f97c19ea7db9a_Best%20B2B%20SaaS%20Agencies%20in%202026_EN.webp)DocumentationAll blog post ### Top 20 Web & Digital Agencies for B2B SaaS in 2026 [Top 20 Web & Digital Agencies for B2B SaaS in 2026](/blog/best-b2b-saas-agencies)Top 20 Web & Digital Agencies for B2B SaaS in 2026![Webflow Source interface showing AI agents, website editing, and role-based Views in a unified workspace.](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6a9fa9f8608ffcc774c47eb7_source%20(1).webp)NewsDevelopmentAll blog post ### Webflow launches Source. Our take on this shift. [Webflow launches Source. Our take on this shift.](/blog/webflow-launches-source)Webflow launches Source. Our take on this shift.![Citation rate by AI platform: ChatGPT 100%, Perplexity 100%, Gemini 67%, and Claude 0%.](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6a9044c13914f1d6ac3e9161_citation.jpg)DocumentationAIAll blog post ### Make Your Website Visible in ChatGPT, Perplexity, and AI Answers [Make Your Website Visible in ChatGPT, Perplexity, and AI Answers](/blog/make-your-website-visible-in-chatgpt-perplexity-and-ai-answers)Make Your Website Visible in ChatGPT, Perplexity, and AI Answers[See all articles ](/blog)Every great website   starts with a conversation[Talk to an expert ](/contact)[Book a call ](/calendly)![Abstract composition of black and gold metallic ribbons with elegant light reflections and smooth gradients. A premium background conveying luxury, modernity, and innovation.](https://cdn.prod.website-files.com/6705382c85d21c496de94fa5/6a69a346549deffabdf98afa_shape-cta-footer.webp)