调整Next.js中react-calendly弹窗激活按钮位置的方法

要把Calendly的预约按钮放在「加入购物车」按钮旁边，不能用默认的PopupWidget（它自带固定定位样式），应该用react-calendly提供的CustomPopupWidget组件，自定义触发按钮，这样就能完全控制按钮的位置和样式，和现有按钮保持一致的布局。

修改步骤 #

• 导入CustomPopupWidget组件（替换原有的PopupWidget）
• 用项目内置的Button组件作为触发元素，放在和购物车按钮同一个flex容器内
• 通过状态管理控制弹窗的打开/关闭

修改后的完整代码 #

"use client";

import { ShoppingCart } from "lucide-react";
import { useState } from "react";

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

interface InfoProps {
  data: Product
};

const Info: React.FC<InfoProps> = ({ data }) => {
  const cart = useCart();
  const [isCalendlyOpen, setIsCalendlyOpen] = useState(false);

  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>
      <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>
        {/* 自定义Calendly触发按钮 */}
        <Button 
          onClick={() => setIsCalendlyOpen(true)} 
          className="flex items-center gap-x-2 bg-[#78350F] hover:bg-[#662d0c]"
        >
          预约咨询
        </Button>
        {/* CustomPopupWidget控制弹窗 */}
        <CustomPopupWidget
          url="https://calendly.com/birminghamhub"
          rootElement={document.getElementById("root")!}
          open={isCalendlyOpen}
          onClose={() => setIsCalendlyOpen(false)}
        />
      </div>
    </div>
  );
}

export default Info;

关键说明 #

• 用useState管理弹窗状态，点击自定义按钮时打开弹窗，弹窗关闭时重置状态
• 自定义按钮复用项目的Button组件，样式可通过className完全自定义，和购物车按钮自动并排（同属一个flex容器）
• CustomPopupWidget仅负责渲染弹窗，不自带触发元素，完全由开发者控制触发逻辑和按钮样式

内容的提问来源于stack exchange，提问作者Aro