Add Calendly to Next.js using an embed code or the official SDK
The fastest way to add Calendly to a Next.js site is to paste an embed code into a page component. Calendly provides a script tag that you can add to your Next.js file, and it will render a scheduling widget wherever you place it. If you need more control over how the widget behaves or looks, you can use Calendly's official npm package instead, which gives you React-specific tools to embed the calendar with custom settings.
Both methods work on any Next.js version, whether you're using the Pages Router or the App Router. The embed code method requires almost no setup; the npm package method takes a few more steps but lets you pass props and handle events in your component.
Key Takeaways
- Paste Calendly's embed script into your Next.js page component to add a scheduling widget with no npm package required.
- Use the @calendarize/react package if you need to customize the widget's appearance, pass configuration options, or handle booking events in your code.
- If you use the embed script, wrap it in a useEffect hook to ensure it loads after the page renders in the browser.
- Test the widget in your browser's developer tools to confirm the script loaded and the calendar appears before deploying to production.
Method 1: Using Calendly's embed code
Log into your Calendly account and go to Settings, then Embed. Copy the embed code Calendly provides — it will look like a script tag with a data attribute containing your calendar URL. In your Next.js page component, import useEffect from React and paste the script into a useEffect hook that runs once when the page loads.
The reason for useEffect is that Next.js renders components on the server first, and Calendly's script needs to run in the browser. If you paste the script directly into your JSX, it may not load correctly. Here's the pattern:
import { useEffect } from 'react'; export default function BookingPage() { useEffect(() => { const script = document.createElement('script'); script.src = 'https://assets.calendly.com/assets/external/widget.js'; script.async = true; document.body.appendChild(script); return () => document.body.removeChild(script); }, []); return ( <div className="calendly-inline-widget" data-url="https://calendly.com/your-username" style={{ minWidth: '320px', height: '630px' }} /> ); }
Replace your-username with your actual Calendly username. The div with the class calendly-inline-widget and the data-url attribute tells Calendly's script where to render the calendar. You can adjust the height and width in the style prop to fit your page layout.
Method 2: Using the Calendly React package
Install the official Calendly package by running npm install @calendarize/react in your project directory. This package exports a component you can import and use directly in your Next.js pages without manually creating script tags.
Import the InlineWidget component and pass your Calendly URL as the url prop. You can also pass other options like prefilled user details, custom colors, or event listeners:
import { InlineWidget } from '@calendarize/react'; export default function BookingPage() { return ( <InlineWidget url="https://calendly.com/your-username" styles={{ height: '630px' }} /> ); }
This approach is cleaner if you need to pass dynamic props or handle booking confirmations. The package handles the script loading for you, so you don't need useEffect.
Customize the widget appearance and behavior
Calendly's embed accepts several data attributes that change how the widget looks and works. You can hide the header, set a default meeting type, prefill the visitor's name and email, or redirect to a thank-you page after booking.
If you're using the embed code method, add these as data attributes to your div. For example, to hide the header and set a default meeting type:
<div className="calendly-inline-widget" data-url="https://calendly.com/your-username" data-hide-event-type-details="false" data-hide-gdpr-banner="false" style={{ minWidth: '320px', height: '630px' }} />
If you're using the React package, pass these options in an object prop. Check Calendly's documentation for the full list of available customization options, as they change with updates to the platform.
Handle timezone and prefilled information
Calendly automatically detects the visitor's timezone from their browser, but you can override it by adding a data-hide-gdpr-banner attribute or by passing timezone information in the URL. If you want to prefill the visitor's name or email so they don't have to type it, add those as URL parameters:
https://calendly.com/your-username?name=John+Doe&email=john@example.com
In a Next.js component, you can build this URL dynamically using the visitor's information from your app state or a form. This is especially useful if the user is already logged in and you want to skip the name and email fields.
Test before deploying
Open your Next.js page in a browser and check the developer console (F12 or right-click → Inspect) to confirm the Calendly script loaded without errors. The widget should appear on the page, and you should be able to click through a booking flow without leaving your site.
If the widget doesn't appear, check that your Calendly username is correct and that your account is active. If you're using the embed code method, make sure the script tag is inside the useEffect hook and that the div has the correct class name and data-url attribute. If you're using the React package, confirm that the package installed correctly by checking your package.json file.
Test on mobile as well, since the widget should be responsive and work on phones and tablets. Adjust the height and width props if the widget looks cramped or too large on smaller screens.
Frequently Asked Questions
Do I need a Calendly account to add it to my Next.js site?
Yes, you need an active Calendly account with at least one meeting type set up. You can create a free account at calendly.com, and the embed works with both free and paid plans.
Can I use Calendly with Next.js static generation?
Yes, but the widget only renders in the browser, not at build time. Use dynamic imports or useEffect to load the widget after the page hydrates. Static generation works fine because Calendly's script runs on the client side.
How do I know if someone booked a meeting through my embedded calendar?
Calendly sends booking confirmations to your email and syncs the event to your connected calendar (Google Calendar, Outlook, or iCal). You can also set up webhooks in Calendly's settings to send booking data to your own backend when someone schedules.
Can I style the Calendly widget to match my website's design?
Calendly offers limited styling options through data attributes and the height/width props. You can hide certain elements and adjust the container size, but you cannot deeply customize colors or fonts without upgrading to Calendly's Team or Pro plan, which includes more branding options.
What if the Calendly script fails to load?
Check your internet connection and confirm that calendly.com is not blocked by your firewall or browser extensions. If the script loads but the widget doesn't appear, verify your Calendly username is spelled correctly and that your account is active. Clear your browser cache and try again.