Attendee Calendar Integration Demo

A simple Node.js web application demonstrating how to use Attendee's managed calendar integration feature. Watch this demo to see the application in action. Read this guide to learn how to add the integration to your codebase.

Setup

1. Install dependencies:

   npm install

2. Configure environment variables:

   cp .env.example .env

   Edit .env and add your OAuth credentials:

   • GOOGLE_CLIENT_ID and GOOGLE_CLIENT_SECRET from your Google Calendar OAuth App
   • MICROSOFT_CLIENT_ID and MICROSOFT_CLIENT_SECRET from your Microsoft Calendar Azure App Registration
   • ATTENDEE_API_KEY from your Attendee account
   • ATTENDEE_API_URL for the Attendee instance you are using (defaults to https://app.attendee.com for the hosted instance)

3. Set up OAuth redirect URIs:

   Google Calendar OAuth App:

   • Add http://localhost:3000/auth/google/callback to authorized redirect URIs

   Microsoft Calendar Azure App Registration:

   • Add http://localhost:3000/auth/microsoft/callback to redirect URIs

4. Set up ngrok for webhook development:

   Ngrok creates a secure tunnel to your localhost so Attendee can send webhooks to your local application.

   Install ngrok:

   For macOS with Homebrew:

   brew install ngrok

   For Ubuntu/Debian:

   snap install ngrok

   Or download directly from ngrok.com

   Start the ngrok tunnel:

   ngrok http 3000

   Copy the generated HTTPS URL (e.g., https://abc123.ngrok-free.app) - you'll need this for webhook configuration.

5. Configure Attendee webhooks:

   In your Attendee dashboard:

   1. Go to Settings → Webhooks
   2. Click "Create Webhook"
   3. Enter your ngrok URL + /webhook/attendee (e.g., https://abc123.ngrok-free.app/webhook/attendee)
   4. Select these triggers:
      • calendar.events_update
      • calendar.state_change
   5. Click "Create" to save the webhook
   6. Copy the webhook secret from the dashboard
   7. Add the webhook secret to your .env file:

      WEBHOOK_SECRET=your_webhook_secret_from_attendee_dashboard
      

6. Run the application:

   npm start

   For development with auto-restart:

   npm run dev

7. Access the application: Open http://localhost:3000 in your browser

How it works

1. Authentication: Users sign in with Google or Microsoft Calendar OAuth
2. Calendar Integration: App automatically creates a calendar connection in Attendee with user's credentials
3. Calendar Synchronization: Attendee syncs calendar events and sends webhooks when events are updated
4. Bot Management: Users can add/remove meeting bots for upcoming calendar events
5. Data Storage: Data is stored in a simple JSON file (database.json)

Important Notes

• ngrok required for local development: Attendee needs to send webhooks to your local server
• Only events with meeting URLs: The app only displays calendar events that have meeting links