/communication-services-virtual-visits-js

Azure Communication Services Virtual Appointments Sample

Primary LanguageTypeScriptMIT LicenseMIT

vv-banner.png

Azure Communication Services Virtual Appointments

Deploy to Azure

Azure Communication Services Virtual Appointments is a web app you can host to provide your customers with a branded virtual consultation experience.

Features

  • Rich communications experience. Includes lobby, calling, and chat experiences for your users. Browser-based and mobile-friendly, users won't need to install any apps.
  • Quick customization options for colors, themes, and features via a .json config file.
  • Integration with Microsoft Teams. Let your staff host and join meetings using familiar Teams UI, while the clients join the same call via your custom branded web app using Teams interoperability.
  • Scheduling powered by Microsoft Bookings. Configure Bookings to allow your clients to schedule appointments and receive join links to your own hosted app. Learn more about how to configure Microsoft Bookings.
  • Industry. A virtual appointment template with pre-selected theme color schemes.
  • Post Call Surveys. Customizable surveys to collect valuable feedback like quality of services or net promoter score after call ends. Learn more about how to configure post-call surveys.
  • Open source and customizable meeting UI controls. The app is built using Azure Communication Services UI Library which has many options for customizing layouts, rendering, and behaviors.

Getting Started

There are two ways to start using this app:

  • Use the Azure Communication Services Sample Builder. The Sample Builder is a wizard that lets you quickly make common customization choices, set up Microsoft Bookings integration, and deploy the app to your Azure subscription. See here for more information about the Builder.
  • Configure and deploy manually. Follow the rest of this readme to learn how to get up and running locally, create a new Azure deployment, or update an existing one.

Code Structure

  • /client: Frontend client.
  • /server: Server app.
  • /deploy: ARM templates and scripts for quick Azure deployment.
  • /server/src/defaultConfig.json : Sample configuration file and schema description. The config file contains customization settings that can be done without changing the app: themes and colors, text captions, and feature toggles.

Local Setup

Prerequisites

Install Dependencies

  • Run npm i from both the /client and /server folders to install the dependencies for each project.
cd client
npm i

cd server
npm i

Build and Run

Development mode:

  • You can run the server and client separately, or run the whole project together in development mode.
  • Hot reload is enabled for both methods (webpackdevserver for client and ts-node-dev for server).
  • The client will be running on port 3000 and the server will be running on port 8080.
  • Use the client port 3000 to access the different routes. For example, localhost:3000/book and localhost:3000/visit
  • Use the server port 8080 to access server APIs.
  • To run the entire project together, use the following commands.
cd client
npm run build:project
npm run start:project
  • You can also build and start the server and client components separately by running the build and start commands appended with client and server.
  • For server individual launch, there won't be access to client routes, but you can still access the server APIs like /config. To build and start the server individually, use the following commands.
cd server
npm run build:server
npm run start:server
  • For client individual launch, if the server is not running, access to client routes is limited. To build and start the client individually, use the following commands.
cd client
npm run build:client
npm run start:client

Production mode:

  • This runs the client and server as a single application.
  • Unlike development mode, the server will serve both the routes and the server APIs.
  • The server will be running on port 8080. For example, localhost:8080/book and localhost:8080/visit.
  • The built files will be put in the location YOUR_REPO_ROOT/dist and the server will be started from this location.
npm run package
npm run start:prod

Environment Variables

Where do I set this?

End to End tests

Learn more about how to run end to end tests

Updating Your Sample

Once a new release is published in this repo, you can update your deployed app with the latest package using Azure CLI.

For example:

  • Download new sample.zip

  • Deploy using Azure CLI:

    az webapp deployment source config-zip --resource-group <group-name> --name <app-name> --src <path-to-release.zip>

You can also deploy the same release package using the Kudu service UI or REST API, see Deploy ZIP or WAR for details.

Trademark

Trademarks This project may contain trademarks or logos for projects, products, or services. Authorized use of Microsoft trademarks or logos is subject to and must follow Microsoft’s Trademark & Brand Guidelines. Use of Microsoft trademarks or logos in modified versions of this project must not cause confusion or imply Microsoft sponsorship. Any use of third-party trademarks or logos are subject to those third-party’s policies.

License

MIT