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

Other Questions Calendly
1

I’m having trouble integrating a Calendly widget into my Next.js 13.5 application. I’ve attempted two different methods but keep running into errors. Any help would be appreciated.

Problem 1: Direct Script Implementation

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

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

export default function BookingWidget() {
  useEffect(() => {
    window.CalendlyWidget.setupInlineEmbed({
      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 throws an error:

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

Problem 2: Using react-calendly Package

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

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

I’ve been struggling with this for days. Has anyone successfully implemented Calendly in Next.js 13.5? What am I missing here? Thanks for any suggestions!

2

This is a super common issue with Next.js SSR. The Calendly script hasn’t finished loading when your useEffect runs, so window.CalendlyWidget doesn’t exist yet. I hit this exact problem last month. Here’s what worked for me: First, add a check like if (window.CalendlyWidget) before calling it. Even better - add an event listener that waits for the script to actually load. What really solved it though was moving the script tag to _document.js instead of using Head in the component. This way Calendly loads before any component tries to use it. That second react-calendly error usually means you’ve got conflicting versions or the library doesn’t play nice with your Next.js version.

3

try using next/script instead of Head for loading the calendly script. had the same issue and that fixed it for me. also, add a timeout in your useEffect to wait for the script to load before calling setupInlineEmbed.