09 Sep How to Add Calendly to Next.js Website (Step-by-Step Guide)

Want to make booking meetings on your site super easy? Calendly is your new best friend. With just a few lines of code, you can add Calendly to your Next.js website and let users schedule calls without back-and-forth email threads. Sounds fun? Let’s get started!

🎯 What is Calendly?

Calendly is a scheduling tool that lets people book appointments directly to your calendar. Share a link, and boom—people see your availability and pick a time.

But we’re not just sharing a link today. We’re going to embed Calendly right inside your Next.js site. Like magic.

🛠️ What You’ll Need

• Basic knowledge of React and Next.js
• A Next.js project up and running
• A free Calendly account (go sign up at calendly.com)

📦 Step 1: Install Calendly SDK

First things first, open your terminal and run this:

npm install react-calendly

This package lets you easily embed Calendly in React and Next.js projects.

🗂️ Step 2: Create the Calendly Component

We’ll make a reusable Calendly component. Inside your components folder, create a new file called CalendlyEmbed.js.

Paste this in:

import { InlineWidget } from 'react-calendly';

const CalendlyEmbed = () => {
  return (
    <div style={{ height: '600px' }}>
      <InlineWidget url="https://calendly.com/YOUR-USERNAME/YOUR-EVENT" />
    </div>
  );
};

export default CalendlyEmbed;

Don’t forget to replace YOUR-USERNAME/YOUR-EVENT with your actual Calendly scheduling link.

📄 Step 3: Add it to Your Page

Now that our component is ready, let’s display it on a page. Open or create the page where you want Calendly to appear. For example, pages/schedule.js.

import CalendlyEmbed from '../components/CalendlyEmbed';

export default function SchedulePage() {
  return (
    <div>
      <h1>Book a Call With Me</h1>
      <p>Pick a time that works best for you!</p>
      <CalendlyEmbed />
    </div>
  );
}

Run your site with:

npm run dev

Go to http://localhost:3000/schedule, and you’ll see your slick Calendly embed in action.

⚙️ Extra Customizations

You can customize the way Calendly appears. The InlineWidget accepts extra props like:

• styles: Change height, width, etc.
• pageSettings: Customize colors, hiding certain fields, etc.

Example with styles:

<InlineWidget 
  url="https://calendly.com/YOUR-USERNAME/YOUR-EVENT"
  styles={{ height: '650px', width: '100%' }}
/>

🤹 Alternative: Use an Iframe Directly

Don’t want to install packages? You can also embed Calendly with a simple iframe.

Replace the code in your component with this:

const CalendlyEmbed = () => {
  return (
    <div>
      <iframe
        src="https://calendly.com/YOUR-USERNAME/YOUR-EVENT"
        width="100%"
        height="600"
        frameBorder="0"
      ></iframe>
    </div>
  );
};

This method is less flexible, but faster if you’re in a hurry.

🪄 Pro Tips for an Even Better Experience

• Use a button to show Calendly in a modal popup
• Track events with Google Analytics using Calendly’s event callback functions
• Use query params to pre-fill name and email

Example URL with pre-filled info:

https://calendly.com/your-username/event-name?name=John+Doe&email=john@example.com

⚡ Bonus Round: Modal Popup Calendly

Want Calendly to open in a modal instead of showing it on the page? You can do that too!

First, update your component to use PopupWidget:

import { PopupWidget } from 'react-calendly';

const CalendlyPopup = () => {
  return (
    <PopupWidget
      url="https://calendly.com/YOUR-USERNAME/YOUR-EVENT"
      rootElement={document.getElementById('__next')}
      text="Click Here to Schedule"
      styles={{ fontSize: '18px' }}
    />
  );
};

export default CalendlyPopup;

This will show a button, and when users click it—✨ a slick modal appears!

🧪 Common Issues

Problem: “Calendly isn’t showing up!”
Solution: Check if the URL is valid and if you’ve installed react-calendly.

Problem: Style looks off?
Solution: Set a fixed height like 650px on the embed container.

🎉 That’s a Wrap!

And boom! You’ve just added Calendly to your Next.js website. Your visitors can now schedule meetings without leaving the page. Super slick, super simple.

Here’s what you can do next:

• Try styling the embed with your brand colors
• Put the Calendly widget on different pages for different services
• Track events and improve your marketing funnel

With tools like Calendly, you can automate calendars, save time, and make your site feel ultra professional. 💼

So, what are you waiting for? Embed, schedule, relax!