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;

Add Calendly to Nextjs 13

Comments

React

Add responsive video to Nextjs using Bootstrap5

More from this blog

Improve Laravel development experience

DbGate - The Smartest SQL+noSQL Database Client

Add responsive video to Nextjs using Bootstrap5

How to create a middleware in Laravel?

Command Palette

Comments

React

Add responsive video to Nextjs using Bootstrap5

More from this blog