Next.js Calendly Integration Problems: Script Loading and Library Errors

Other Questions Calendly
1

I’m struggling to integrate Calendly into my Next.js 13.5 application. I’ve attempted multiple methods but keep running into different errors. Could someone point me in the right direction?

Method 1: Direct Script Integration

First, I tried using Calendly’s native script approach:

"use client";
import Head from "next/head";
import React, { useEffect } from "react";

export default function BookingWidget() {
  useEffect(() => {
    window.Calendly.createInlineWidget({
      url: "my-calendly-url",
      parentElement: document.querySelector("#booking-container"),
    });
  });
  
  return (
    <>
      <Head>
        <script
          src="https://assets.calendly.com/assets/external/widget.js"
          type="text/javascript"
          async
        ></script>
      </Head>
      <div
        id="booking-container"
        style={{ minWidth: 300, height: 600 }}
        data-auto-load="false"
      ></div>
    </>
  );
}

This gives me an error:

TypeError: Cannot read properties of undefined (reading 'createInlineWidget')

Method 2: React Calendly Package

Then I switched to the react-calendly npm package, but got this error:

Error: Object prototype may only be an Object or null: undefined

I’ve been debugging this for hours and can’t figure out what’s causing these issues. Has anyone successfully embedded Calendly in Next.js 13? Any suggestions would be greatly appreciated!

2

Had the exact same headache with Calendly in Next.js. Your first approach fails because the script hasn’t loaded when useEffect runs. I fixed it by checking if the Calendly object exists first. Here’s what worked:

useEffect(() => {
  const checkCalendly = () => {
    if (window.Calendly) {
      window.Calendly.initInlineWidget({
        url: "your-calendly-url",
        parentElement: document.querySelector("#booking-container")
      });
    } else {
      setTimeout(checkCalendly, 100);
    }
  };
  checkCalendly();
}, []);

Also spotted you’re using createInlineWidget - it should be initInlineWidget. That’s probably part of your problem. Script timing is always messy in Next.js since it handles execution differently than regular React.