Add Calendly to Nextjs 13

There is a plugin available for reactjs that one can use to add Calendly to Nextjs i.e., react-calendly. The problem is if you want to customize the button to open popup or modal then you need to have Calendly's pro plan for it.

Here is the alternative for styling button as per your requirements with free Calendly's plan. Create a client-side component and then include it where you would like to display that button. You can pass the title as props to display on the button.

Here I styled the button as a link.

"use client";

const Calendlypopup = ({ title }) => {
  function handleClick() {
    Calendly.initPopupWidget({
      url: "https://calendly.com/your_scheduling_page",
    });
    return false;
  }

  return (
    <>
      <script
        src="https://assets.calendly.com/assets/external/widget.js"
        type="text/javascript"
      />
      <link
        href="https://assets.calendly.com/assets/external/widget.css"
        rel="stylesheet"
      />

      <button
        style={{
          border: "none",
          background: "#ffffff",
          color: "#6c757d",
          padding: "0",
        }}
        onClick={handleClick}
      >
        {title}
      </button>
    </>
  );
};

export default Calendlypopup;