Integrating Calendly Webhooks with Next.js 15, Prisma, and Neon Cloud DB

In the ever-evolving world of web development, staying updated with the latest tools and practices is crucial. If you're a Next.js 15 developer using the new App Router, along with Prisma ORM and Neon Cloud DB, you're in the right place. This blog post will guide you through integrating Calendly webhooks to automatically insert contact data into your database, streamlining your workflow and reducing manual errors.

What Are Webhooks?

Let's start with the basics. Webhooks are a way for one application to send real-time data to another application whenever a specific event occurs. Think of them as digital messengers that deliver information from one place to another without you having to lift a finger.

Why Use Calendly Webhooks?

Calendly is a popular scheduling tool that helps you manage appointments effortlessly. By using webhooks, you can automatically transfer contact data from Calendly to your database whenever a new meeting is scheduled. This integration ensures that your database is always up-to-date with the latest contact information, allowing your team to work more effectively.

Setting Up Calendly Webhooks with Next.js 15

Here's a comprehensive guide to setting up Calendly webhooks for your Next.js 15 application using the App Router:

Step 1: Create a Webhook API Route

In Next.js 15, the App Router allows you to define API routes in a more modular way. To set up a webhook endpoint, create a new file in the app/api/webhook/route.js directory:

import { PrismaClient } from '@prisma/client';
import crypto from 'crypto';
const prisma = new PrismaClient();
export async function POST(req) {
    try {
        const signature = req.headers.get('Calendly-Webhook-Signature');
        const body = await req.text();
        const signingKey = process.env.CALENDLY_SIGNING_KEY;
        // Verify the signature
        const hash = crypto.createHmac('sha256', signingKey).update(body).digest('hex');
        if (!crypto.timingSafeEqual(Buffer.from(signature), Buffer.from(hash))) {
            return new Response('Invalid signature', { status: 401 });
        }
        const contactData = JSON.parse(body);
        // Extract relevant information
        const { email, name } = contactData.payload.invitee;
        const eventType = contactData.event;
        // Insert data into Neon Cloud DB using Prisma
        await prisma.contact.upsert({
            where: { email },
            update: { name, eventType },
            create: { email, name, eventType },
        });
        return new Response(JSON.stringify({ message: 'Webhook received and data inserted' }), {
            status: 200,
            headers: { 'Content-Type': 'application/json' },
        });
    } catch (error) {
        return new Response(JSON.stringify({ error: 'Error processing webhook' }), {
            status: 500,
            headers: { 'Content-Type': 'application/json' },
        });
    }
}

Step 2: Deploy Your Next.js App

Deploy your Next.js application on Vercel to make your webhook endpoint publicly accessible. Vercel provides a seamless deployment process, and your API routes will be hosted as serverless functions.

Step 3: Configure Calendly Webhooks

Configuring the Calendly environment to register a webhook involves a few straightforward steps. Here's how you can set it up to ensure your application receives the necessary data from Calendly:

Obtain Calendly API Key

1. Log in to Calendly: Go to Calendly and log in to your account.
2. Access API & Webhooks: Navigate to the "Integrations" section, usually found under account settings or a similar menu.
3. Generate Personal Access Token (PAT): This works on all plans and is necessary for authenticating your requests to Calendly's API.

Set Up the Webhook

1. Create a Webhook Subscription: Use Calendly's API to create a webhook subscription. You can do this via a tool like Postman or directly in your code. Here's an example using a cURL command:

   curl -X POST https://api.calendly.com/webhook_subscriptions \
   -H "Content-Type: application/json" \
   -H "Authorization: Bearer YOUR_API_KEY" \
   -d '{
     "url": "https://your-app.vercel.app/api/webhook",
     "events": ["invitee.created", "invitee.canceled"],
     "organization": "https://api.calendly.com/organizations/YOUR_ORG_ID",
     "scope": "organization",
     "signing_key": "YOUR_SIGNING_KEY"
   }'
   

   • url: This is the endpoint in your application where Calendly will send the webhook data.
   • events: Specify the events you want to listen for, such as invitee.created or invitee.canceled.
   • organization: This is the URL of your organization in Calendly. You can find this in your Calendly account settings.
   • scope: Specify either "organization" or "user" depending on your needs.
   • signing_key: This key is used to verify the signature of incoming requests.

Step 4: Test Your Integration

Before going live, it's crucial to test your integration thoroughly. Use tools like Postman to simulate webhook requests and ensure that your endpoint processes the data correctly. Check that the data is accurately inserted into your Neon Cloud DB.

Step 5: Handle Webhook Data

1. Parse Incoming Data: Ensure your endpoint correctly parses the JSON data sent by Calendly.
2. Process the Data: Use Prisma's upsert method to handle both new and existing contacts efficiently.

Conclusion

By integrating Calendly webhooks with your Next.js 15 application, you can automate the transfer of contact data to your database, improving efficiency and accuracy. This setup allows your team to focus on what they do best—building amazing web apps—without getting bogged down by manual data entry.

If you found this guide helpful, why not share it with your fellow developers or leave a comment below? For more tips on integrating tools and automating workflows, explore our related articles. Happy coding!