This is a Next.js project bootstrapped with create-next-app.

This is a demo CRM application built to showcase how to integrate Zoom's Phone and Contact Center using Zoom Smart Embed, Zoom APIs, and OAuth authentication.

This application is designed as a reference project for developers building CRM tools that incorporate Zoom's communication platforms.

• main: Full working CRM with hardcoded data, an embedded Softphone using Zoom Phone, and mock Zoom behavior.
• phone: Connects to Zoom Phone via Smart Embed and API calls, uses real OAuth credentials.
• contact-center: Integrates Zoom Contact Center, API usage, and OAuth credentials

• Next.js – React-based web framework
• React – UI library
• TailwindCSS – Utility-first CSS
• Zoom Smart Embed – Zoom Phone & Contact Center interfaces
• Node.js API routes – For backend token exchange and API access
• Admin-Level OAuth App – Authorization mechanism for Zoom

1. Clone the repository:

   git clone https://github.com/your-org/zoom-crm-demo.git 
   *to clone a specific branch, run the command
   cd zoom-crm-demo

   Note: To clone a specific branch, run the command git clone --branch <branch-name> --single-branch <repo-url> in your terminal. Otherwise, clone the entire repo and switch to the respective branch based on your product pereference

2. Install dependencies:

   npm install

3. Copy .env.example to a .env file (see below for OAuth instructions)

4. Start the development server:

   npm run dev

1. Go to the Zoom App Marketplace
2. Create an Admin-level OAuth App
3. Under OAuth settings, add this redirect URI:

   https://your-ngrok-url.ngrok-free.app/api/auth/callback/zoom
   

4. Copy your Client ID and Client Secret into .env
5. To acess the phone APIs used in this app, add the following scopes when integrating:

   phone:read:list_call_logs:admin
   phone:read:call_log:admin
   phone:read:list_external_contacts:admin
   user:read:user:admin (This scope needs to be added for you to be able to authorize your app with Oauth using NextAuth.js library)
   

6. To access the contact center APIs, add the following scopes when integrating:

   contact_center_contact:read:admin
   contact_center_report:read:admin
   

7. Save your changes Please note that the routes used in this app were selected for demo purposes to fulfill specific needs of a CRM. When working on your cloned repo, use whichever routes are deemed necessary

This application makes use of Smart Embed for soft phone use. Both Contact Center and Phone have Smart Embed available. Follow the respective steps, based on which you are you working with, to configure the application with your account for use.

1. Head to the Zoom Phone Smart Embed app in the Zoom App Marketplace
2. Add a the app for yourself, scroll down to the 'Manage' section and select 'Configure App'
3. Add the 'redirect URI' you used in the configuration of your app and save the changes (a created ngrok link, for example) ** For further explanation, see our blog post on the process.

1. Log in to your profile at zoom.us/myhome and head to the "Contact Center Management" tab on the left menu
2. Scroll to integrations, and create a new one for your application. Here, you'll add in the home URL of the app where Smart Embed we'll be used (a created ngrok link, for example)
3. Back in your "Contact Center Management" menu, select the user whose credentials are being used within the app, and under 'Client Integration', add the previously created integration

/pages
  /api             → API routes for token handling and Zoom integration
/components        → Reusable React components (e.g., VoiceAuth, ContactCard)
/styles            → Tailwind styles and globals
.env               → Environment config for OAuth

This is a demo application meant for learning and reference purposes. Never expose secrets in public repositories. Use secure storage for sensitive values in production deployments.

This project is licensed under the MIT License.

Use of this sample app is subject to our Terms of Use.