Adding Calendly to Your Next.js Website

What you need before you start

Calendly is a scheduling tool that lets visitors book time with you directly from your website. To add it to a Next.js site, you need a Calendly account (the free tier works), your Calendly URL or embed code, and a Next.js project already running on your machine. You do not need to install extra packages — Next.js handles the embed code the same way any modern website does.

The simplest approach is to paste Calendly's embed script into a Next.js page component. Calendly provides two ways to do this: a link that opens Calendly in a popup, or an embedded widget that sits directly on your page. Both work in Next.js, but they require slightly different handling because Next.js runs on the server first, then the browser.

If you have never added third-party code to Next.js before, the key thing to know is that some code only works in the browser, not on the server. Calendly's embed script is one of those — you have to tell Next.js to load it only after the page reaches the visitor's browser.

Key Takeaways

The easiest method is to use Calendly's popup link, which requires only a single line of HTML and no extra setup.
If you want an embedded widget that sits on the page itself, you need to use Next.js's useEffect hook to load the Calendly script after the page renders in the browser.
Calendly's embed script must load on the client side, not the server side, or it will not work.
You can find your Calendly embed code by logging into Calendly, going to Integrations, and selecting Embed Calendar.

Using the popup link method (fastest)

The popup method is the quickest way to add Calendly to Next.js. You straightforward create a link that opens Calendly in a modal window when clicked. This requires no script setup and works when ready.

Open the Next.js page component where you want the link to appear. Add a standard HTML link with your Calendly URL. Your Calendly URL looks like https://calendly.com/yourname — you can find it by logging into Calendly and looking at your profile settings.

Here is what the code looks like:

<a href="https://calendly.com/yourname" target="_blank" rel="noopener noreferrer"> Schedule a meeting </a>

That link will open Calendly in a new tab. If you want it to open in a popup instead, add the class name calendly-popup to the link and include Calendly's popup script at the bottom of your page component. This method is reliable and requires almost no configuration.

Embedding a calendar widget on the page

If you want the calendar to appear directly on your page instead of in a popup, you need to embed the widget. This is more involved because Calendly's embed script must run in the browser after your page loads.

First, get your embed code from Calendly. Log in to your Calendly account, go to Integrations, select Embed Calendar, and copy the code block that starts with <div class="calendly-inline-widget">. This code tells Calendly where to place the calendar on your page.

In your Next.js component, import the useEffect hook from React at the top of the file:

import { useEffect } from 'react';

Then add the Calendly div to your component's return statement, and use useEffect to load the Calendly script after the page renders:

export default function SchedulePage() { useEffect(() => { const script = document.createElement('script'); script.src = 'https://assets.calendly.com/assets/external/widget.js'; script.async = true; document.body.appendChild(script); }, []); return ( <div> <h1>Book a time</h1> <div className="calendly-inline-widget" data-url="https://calendly.com/yourname"></div> </div> ); }

Replace https://calendly.com/yourname with your actual Calendly URL. The useEffect hook runs once when the page loads in the browser, creates a script tag, and tells the browser to fetch Calendly's widget code. The empty array [] at the end tells React to run this only once, not every time the component re-renders.

Using Next.js Script component (recommended for newer versions)

If you are using Next.js 11 or newer, the built-in Script component is the cleanest way to load Calendly. It handles browser-only loading automatically and gives you more control over when the script runs.

Import the Script component at the top of your page:

import Script from 'next/script';

Then add the Script component and your Calendly div in your return statement:

export default function SchedulePage() { return ( <div> <h1>Book a time</h1> <div className="calendly-inline-widget" data-url="https://calendly.com/yourname"></div> <Script src="https://assets.calendly.com/assets/external/widget.js" strategy="lazyOnload" /> </div> ); }

The strategy="lazyOnload" attribute tells Next.js to load the Calendly script after the page is interactive, which is usually what you want. Other options are afterInteractive (loads as soon as possible) and beforeInteractive (loads before the page renders — do not use this for Calendly).

Styling the embedded calendar

By default, the Calendly widget takes up the full width of its container and a fixed height. You can control its size by wrapping it in a div with custom CSS.

Add a style to your component or your CSS file:

<div style={{ height: '700px', maxWidth: '600px' }}> <div className="calendly-inline-widget" data-url="https://calendly.com/yourname"></div> </div>

The outer div controls the width and height. Adjust the numbers to fit your page layout. If you are using a CSS file instead of inline styles, you can target the calendly-inline-widget class directly and set width, height, and margin properties.

Calendly also lets you customize colors and fonts through your Calendly account settings. Those changes explore to any embed of your calendar, so you do not need to change code in Next.js to adjust the appearance.

Testing your calendar on localhost

After you add the code, run your Next.js development server with npm run dev and visit the page in your browser. If you used the popup link method, clicking the link should open Calendly in a new tab. If you embedded the widget, you should see the calendar appear on the page after a moment — it takes a second or two for Calendly's script to load and render.

If the calendar does not appear, open your browser's developer tools (press F12 or right-click and select Inspect), go to the Console tab, and look for error messages. The most common issue is a typo in your Calendly URL. Double-check that the URL matches exactly what you see in your Calendly account.

If you see an error about the script not loading, make sure you are connected to the internet — Calendly's script is hosted on their servers and must be downloaded from the web. The calendar will not work offline.

Deploying to production

Once your calendar works on localhost, it will work the same way when you deploy your Next.js site to production. Calendly's script loads from their servers, so you do not need to change anything in your code or configuration.

If you are deploying to Vercel (which is made by the Next.js team), the Script component works exactly as it does locally. If you are deploying to another hosting service like Netlify or AWS, the Script component still works — it is a standard Next.js feature that does not depend on the host.

After you deploy, visit your live site and test the calendar again to make sure it loads. Calendly's servers are reliable, but it is always good to verify that everything works in your production environment.

Frequently Asked Questions

Can I use Calendly with Next.js static generation?

Yes. Static pages are generated on the server at build time, but Calendly's script loads in the browser when the visitor arrives, so it works fine. The calendar will not appear until the page reaches the browser, but that is normal and expected.

What if Calendly is blocked by a browser extension or ad blocker?

Some ad blockers and privacy extensions block third-party scripts, including Calendly. There is no way to prevent this from your Next.js code — it is a choice the visitor's browser makes. Most visitors will not have this issue, but it is worth knowing that some people may not see the calendar.

Can I add multiple calendars to one page?

Yes. Add multiple divs with the calendly-inline-widget class, each with a different data-url pointing to a different Calendly calendar. Load the Calendly script once using useEffect or the Script component, and it will initialize all the calendars on the page.

Do I need a paid Calendly plan to embed the calendar?

No. The free Calendly plan includes the ability to embed your calendar on a website. All the methods described here work with any Calendly plan.

Why does the calendar not show up when ready when the page loads?

Calendly's script takes a moment to read and run. This is normal. The calendar usually appears within one to three seconds. If it takes longer than five seconds, check your internet connection and browser console for errors.

This guide is for general information only and is not medical, financial, legal, or other professional advice. For decisions specific to your situation, consult a qualified professional. See our Editorial Policy.