react-calendly

Install the react-calendly package using npm or yarn to integrate Calendly into your React application.

npm install --save react-calendly

yarn add react-calendly

If you want to use your own UI component (like a custom styled button) to trigger the Calendly popup, use the PopupModal component. You can control its visibility using the open prop and handle closing via onModalClose.

import { PopupModal } from "react-calendly";

class CustomButtonExample extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isOpen: false };
  }

  render() {
    return (
      <div>
        <button onClick={() => this.setState({ isOpen: true })}>
          Custom Button
        </button>
        <PopupModal
          url="https://calendly.com/acmesales"
          open={this.state.isOpen}
          onModalClose={() => this.setState({ isOpen: false })}
          rootElement={document.getElementById("root")}
        />
      </div>
    );
  }
}

The InlineWidget component embeds the Calendly scheduling page directly into your application's layout. It requires a url prop pointing to your Calendly scheduling page.

import React from "react";
import { InlineWidget } from "react-calendly";

const App = () => {
  return (
    <div className="App">
      <InlineWidget url="https://calendly.com/your_scheduling_page" />
    </div>
  );
};

export default App;

The PopupWidget component renders a floating widget that opens a Calendly modal.

Note: Because react-calendly uses React Portals, you must provide the rootElement prop (typically document.getElementById('root')) to ensure the modal is correctly inserted into the DOM.

import React from "react";
import { PopupWidget } from "react-calendly";

const App = () => {
  return (
    <div className="App">
      <PopupWidget
        url="https://calendly.com/your_scheduling_page"
        rootElement={document.getElementById("root")}
        text="Click here to schedule!"
        textColor="#ffffff"
        color="#00a2ff"
      />
    </div>
  );
};

The PopupButton component renders a standard button that, when clicked, triggers the Calendly popup modal. Like PopupWidget, it requires the rootElement prop for React Portal support.

import React from "react";
import { PopupButton } from "react-calendly";

const App = () => {
  return (
    <div className="App">
      <PopupButton
        url="https://calendly.com/your_scheduling_page"
        rootElement={document.getElementById("root")}
        text="Click here to schedule!"
      />
    </div>
  );
};

The PageSettings object allows you to customize the appearance and behavior of the embedded Calendly iframe. Note that some styling options require a Calendly Pro plan.

You can pass tracking parameters to the Calendly URL using the Utm type to support marketing attribution and CRM integration.

Supported keys:

• utmCampaign
• utmSource
• utmMedium
• utmContent
• utmTerm
• salesforce_uuid: Used for Salesforce integration.

const utm: Utm = {
  utmSource: 'newsletter',
  utmMedium: 'email',
  salesforce_uuid: '12345-abcde'
};

You can pre-populate Calendly scheduling forms with user information using the Prefill type. This is useful for reducing friction during the booking process.

Supported fields include:

• name: Full name
• email: User's email address
• firstName: First name
• lastName: Last name
• location: User's location
• guests: An array of guest names (strings)
• date: A JavaScript Date object
• customAnswers: An object containing custom question responses using keys a1 through a10 (e.g., { a1: 'Response' }).

const prefill: Prefill = {
  name: 'John Doe',
  email: 'john@example.com',
  firstName: 'John',
  lastName: 'Doe',
  customAnswers: {
    a1: 'Answer to question 1'
  }
};