Effortlessly Schedule Meetings with a Custom Calendly Next.js Application
Tags: nextjs, typescript, calendly, vercel
Published: 2023-03-03 12:57:49

In this article I'll show you how to create your own appointment booking portal using [Calendly](https://calendly.com/). Additionally, you can use your own domain and all this is completely free of charge.

## Requirements
Before we start you need a running [Next.js](https://nextjs.org/) project. For this you can either use a current project or simply create a new one.

```
npx create-next-app@latest --ts
# or
yarn create next-app --typescript
# or
pnpm create next-app --ts
```

## Create component
To get started we will create a new component called `CalendlyForm` in the folder `components/` with the following lines of code.

```typescript
import Script from 'next/script'

const CalendlyForm = ({ type }: { type?: string }) => {
    const username = process.env.NEXT_PUBLIC_CALENDLY_USERNAME;
    const showDetails: number = process.env.NEXT_PUBLIC_CALENDLY_SHOW_DETAILS == "false" ? 1 : 0;
    const showCookies: number = process.env.NEXT_PUBLIC_CALENDLY_SHOW_COOKIES == "false" ? 1 : 0;

    return (
        <>
            <div className="calendly-inline-widget w-screen h-screen" data-url={`https://calendly.com/${username}${type ? `/${type}` : ''}?hide_landing_page_details=${showDetails}&hide_gdpr_banner=${showCookies}`}></div>

            <Script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js" async />
        </>
    )
}

export default CalendlyForm
```
The component accepts a variable called `type` that reflects the event type of Calendly. If you want to use more than one event type it can be passed here later.

## Environment Configuration
We also query some environment variables here that are meant to configure our Calendly Embed.

![environment variables](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ft8qbbqpoln03o9loo09.png)

## Implement component
Now we can use our component and display it on our website. In this example, we will simply place the `CalendlyForm` component on the index page of our [Next.js](https://nextjs.org/) project.

Simply add the component `<CalendlyForm />` into the `index.tsx` file and save it.

```typescript
import CalendlyForm from "../components/CalendlyForm";

export default function Home() {
  return (
    <>
      <CalendlyForm />
    </>
  );
}
```
Finally, we need to define the environment variables. If everything is now configured correctly, we should see our [Calendly](https://calendly.com/) booking form.

## Optional: Event types
To be able to use different event types we can now add another route. For this we simply create the file `[type].tsx` and fill it with the following code.

```typescript
import type { NextPage } from 'next'
import { useRouter } from 'next/router';
import CalendlyForm from '../components/CalendlyForm';

const Type: NextPage = () => {
    const router = useRouter();
    const { type } = router.query;

    return (
        <>
            {(type &&
                <CalendlyForm type={type.toString()} />
            )}
        </>
    )
}

export default Type
```
Again, we use our CalendlyForm component and this time include the type variable. We get this variable from the query variables. You can view and display the ID for the event type on your Calendly page. If you select an event here, it will be displayed at the top of the url.
For example: [https://calendly.com/sebiweise/30min](https://calendly.com/sebiweise/)<u>30min</u>

For example: [https://nextjs-calendlyframe.vercel.app/30min](https://nextjs-calendlyframe.vercel.app/30min)

[Demo](https://nextjs-calendlyframe.vercel.app/)

## Deployment
To host your appointment booking site now for free with your own domain you can simply use Vercel. To easily create your custom site you can use this button to make a copy of my Github repository and deploy to Vercel.


[![Deploy to Vercel](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fk6ppa8oeky0575lnd5w.png)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fsebiweise%2Fnextjs-calendlyframe&env=NEXT_PUBLIC_TITLE,NEXT_PUBLIC_DESCRIPTION,NEXT_PUBLIC_FAVICON,NEXT_PUBLIC_CALENDLY_USERNAME,NEXT_PUBLIC_CALENDLY_SHOW_DETAILS,NEXT_PUBLIC_CALENDLY_SHOW_COOKIES&project-name=calendlyframe&repo-name=calendlyframe)


Now you just need to connect your domain to Vercel

![Vercel domains](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/exn064gwl2kqviy7ypjm.png)

## Links
[Demo](https://nextjs-calendlyframe.vercel.app/)
[Github](https://github.com/sebiweise/nextjs-calendlyframe)
[Calendly](https://calendly.com/)
[Vercel](https://vercel.com/)