Embeding calendly into react activation button position

Question

I want to add calendly from this npm package react-calendlyto my Next.js app in a react functional component. I've added the popup widget like this

"use client";

import { ShoppingCart } from "lucide-react";

import Currency from "@/components/ui/currency";
import Button from "@/components/ui/button";
import { Product } from "@/types";
import useCart from "@/hooks/use-cart";
import { PopupWidget } from "react-calendly";

interface InfoProps {
  data: Product
};

const Info: React.FC<InfoProps> = ({ data }) => {
  const cart = useCart();

  const onAddToCart = () => {
    cart.addItem(data);
  }


  
  return (
    <div id="root">
      <h1 className="text-3xl font-bold text-gray-900">{data.name}</h1>
      <div className="mt-3 flex items-end justify-between">

        <p className="text-2xl text-gray-900">
          From <Currency value={data?.price} />
        </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">Description:</h3>
          <p className="text-lg text-gray-900">
            {data.longDesc}
          </p>
          <div>
            {data?.size?.value}
          </div>
        </div>
        {/*  <div className="flex items-center gap-x-4">
          <h3 className="font-semibold text-black">Color:</h3>
          <div className="h-6 w-6 rounded-full border border-gray-600" style={{ backgroundColor: data?.color?.value }} />
        </div> */}
      </div>
      <div className="mt-10 flex items-center gap-x-3">
        <Button onClick={onAddToCart} className="flex items-center gap-x-2">
          Add To Cart
          <ShoppingCart size={20} />
        </Button>
        <PopupWidget
        url="https://calendly.com/birminghamhub"
        /*
         * react-calendly uses React's Portal feature (https://reactjs.org/docs/portals.html) to render the popup modal. As a result, you'll need to
         * specify the rootElement property to ensure that the modal is inserted into the correct domNode.
         */
        rootElement={document.getElementById("root")!}
        text="Click here to schedule an apointment!"
        textColor="#ffffff"
        color="#78350F"
      />
      </div>
    </div>
  );
}

export default Info;

My problem is

The activation button is always displayed by default at the bottom right corner of the page. I want it to be positioned next to the add to cart.

Can you help, please?

Answer 1

I think the value in the rootElement is wrong.

rootElement={document.getElementById("root")!}

Change the code above as below

rootElement={document.getElementById("root")}