About
Floating Cal.com booking button using @calcom/embed-react. Loads the Cal inline embed via getCalApi() and is hidden on routes where booking would be off-brand.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds CalFloatingButton to your project and fits it to your theme.
Code
How CalFloatingButton is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import CalFloatingButtoninline from "@/components/ui/cal-floating-button"
export default function Demo() {
return <CalFloatingButtoninline />
}
Dependencies
More by Jason Mohab-Ali
View all
Alqemist Interactive Demo
9
Qreatify Super Agent Card
5
Alqemist Security
4
Alqemist Hero
4
Alqemist How It Works
3
Alqemist Cta
2
What Saa SApp Shell
2
FirstReply Product Detail flow