How to customize position of Calendly popup trigger button in React component

Other Questions Calendly
1

I’m working with a booking widget from the react-calendly package in my Next.js application. I’ve successfully integrated the popup functionality, but I’m facing an issue with the trigger button placement.

Here’s my current implementation:

"use client";

import { Calendar } from "lucide-react";
import Price from "@/components/ui/price";
import ActionButton from "@/components/ui/action-button";
import { Service } from "@/types";
import useBooking from "@/hooks/use-booking";
import { PopupWidget } from "react-calendly";

interface ServiceInfoProps {
  service: Service
};

const ServiceInfo: React.FC<ServiceInfoProps> = ({ service }) => {
  const booking = useBooking();

  const handleBookingAdd = () => {
    booking.addService(service);
  }

  return (
    <div id="main-container">
      <h2 className="text-3xl font-bold text-gray-900">{service.title}</h2>
      <div className="mt-3 flex items-end justify-between">
        <p className="text-2xl text-gray-900">
          Starting at <Price amount={service?.cost} />
        </p>
      </div>
      <hr className="my-4" />
      <div className="flex flex-col gap-y-6">
        <div className="flex items-center gap-x-4">
          <h3 className="font-semibold text-black">Details:</h3>
          <p className="text-lg text-gray-900">
            {service.fullDescription}
          </p>
          <div>
            {service?.duration?.label}
          </div>
        </div>
      </div>
      <div className="mt-10 flex items-center gap-x-3">
        <ActionButton onClick={handleBookingAdd} className="flex items-center gap-x-2">
          Book Service
          <Calendar size={20} />
        </ActionButton>
        <PopupWidget
          url="https://calendly.com/myservice"
          rootElement={document.getElementById("main-container")!}
          text="Schedule consultation now!"
          textColor="#ffffff"
          color="#059669"
        />
      </div>
    </div>
  );
}

export default ServiceInfo;

The issue I’m encountering is that the scheduling button automatically appears in the bottom right corner of the screen by default. I need it to stay inline with my other action buttons instead of floating in that fixed position. How can I override this default positioning behavior?

2

The PopupWidget has a pageSettings prop that controls button behavior. Had this same positioning nightmare last year when I was adding Calendly to a booking flow. I used pageSettings with hideEventTypeDetails: true and hideLandingPageDetails: true, then managed everything through the prefill prop. But honestly? Just switch to InlineWidget - way better control. If you’re stuck with PopupWidget, try styles={{position: 'relative', width: 'auto', height: 'auto'}} and wrap it in a flex container. You need to override both position and dimensions because Calendly’s inline styles are stubborn.

3

The PopupWidget renders a default trigger button that gets absolutely positioned. You want to control when the popup opens without using their default button.

I hit this exact issue building a scheduling feature for our customer portal. Don’t fight with the default positioning - use the open prop to control popup state and hide their trigger button completely.

Here’s how I handled it:

const [isCalendlyOpen, setIsCalendlyOpen] = useState(false);

// In your JSX:
<ActionButton onClick={() => setIsCalendlyOpen(true)} className="flex items-center gap-x-2">
  Schedule consultation now!
  <Calendar size={20} />
</ActionButton>

<PopupWidget
  url="https://calendly.com/myservice"
  open={isCalendlyOpen}
  onModalClose={() => setIsCalendlyOpen(false)}
  text="" // Empty string hides the default button
/>

Now you’ve got complete control over trigger button appearance and positioning. The popup opens when your custom button gets clicked, and you don’t need any CSS overrides or positioning hacks.

This video walks through adding Calendly widgets step by step:

4

Use the styles prop on PopupWidget to override the default positioning. Try styles={{position: 'static', display: 'inline-block'}} instead of that fixed bottom-right placement. If that doesn’t work, wrap it in a div with custom CSS.

5

Had the same issue a few months ago. The PopupWidget creates an iframe that’s positioned absolutely by default. I fixed it by ditching the rootElement prop completely and wrapping PopupWidget in a container div with position: relative. The rootElement forces it to append to a specific DOM node, which screws up positioning. Also check you’re not importing default Calendly CSS that’s overriding your styles. Set your container div to display: flex and align-items: center to keep it inline with ActionButton.