# How to Add Calendly to a Next.js Website Embedding a scheduling tool like Calendly into a Next.js app is a common requirement for portfolios, SaaS products, agency sites, and personal brands. The good news: Calendly offers several integration paths. The right one depends on how your Next.js project is structured, what level of control you need over the UI, and how Calendly fits into your data flow. ## What Calendly Offers for Web Integration Calendly provides three primary embedding methods: - **Inline embed** — Calendly loads directly inside a `
` on your page - **Popup widget** — A floating button triggers the scheduler in an overlay - **Popup text** — A hyperlink opens the scheduler in a modal All three rely on Calendly's embed script, which loads external JavaScript from Calendly's CDN. In a standard HTML site, you'd drop that script tag into `` and add a `
` with specific data attributes. In Next.js, the approach needs adjustment because of how the framework handles rendering and script loading. ## Why Next.js Requires a Different Approach Next.js is a React-based framework with **server-side rendering (SSR)** and **static site generation (SSG)** built in. This creates two complications: 1. **Window is not defined on the server.** Calendly's embed script references `window` and `document`, which don't exist during server rendering. Dropping the script in naively will throw hydration errors or break your build. 2. **Script loading timing matters.** Next.js manages the document `` through its own `` component (Pages Router) or `metadata` API (App Router). Third-party scripts need to load at the right phase. Understanding these constraints shapes which method you'll use. ## Method 1: Using Next.js `