Add Rich Communication Experiences to Existing Apps
Rich Communication Experiences at Scale
(Implementation complexity: Medium, 1-5 days)
Azure Communication Services (ACS) brings rich communication APIs to all your applications across any device, on any platform, using the same reliable and secure infrastructure that powers Microsoft Teams.
- Embrace Remote-first world approach & reach customers anywhere with a fully managed communication platform - Deliver video, voice, chat, and text messaging experiences anywhere your users are - across your applications, websites, and mobile platforms.
- In-App, In-Context customer communication - Integrate into existing applications in just a few lines on code
- Scale with a global platform used by Microsoft Teams - Use a reliable global platform trusted by millions of users daily.
- Build on a secure and compliant cloud - Reach more users without compromising security, using the most secure and compliant cloud.
If you don’t have Azure Account:
Start freeMeet Azure Communication Services | Enterprise-grade Video, Voice, & Chat experiences
Step 1: Voice & Video Calling - Add High quality audio and video (0.5 day)
Overview
The sample has both a client-side application and a server-side application.
The client-side application is a React/Redux web application that uses Microsoft's Fluent UI framework.
This application sends requests to an ASP.NET Core server-side application that helps the client-side application connect to Azure.
Follow steps here: https://aka.ms/ACS-CallingSample
Low latency capabilities for an uninterrupted calling experience. Build and control the communication experiences you want. Seamlessly shift between voice and video calls in a multichannel communication experience.
Here's what the sample looks like:
When you press the "Start a call" button, the web application fetches a user access token from the server-side application. This token is then used to connect the client app to Azure Communication Services.
Once the token is retrieved, you'll be prompted to specify the camera and microphone that you want to use. You'll be able to disable/enable your devices with toggle controls:
Once you configure your display name and devices, you can join the call session. You'll then see the main call canvas where the core calling experience lives.
When you press the "Start a call" button, the web application fetches a user access token from the server-side application.
This token is then used to connect the client app to Azure Communication Services. Once the token is retrieved, you'll be prompted to specify the camera and microphone that you want to use. You'll be able to disable/enable your devices with toggle controls:
Components of the main calling screen:
- Media Gallery: The main stage where participants are shown. If a participant has their camera enabled, their video feed is shown here. Each participant has an individual tile which shows their display name and video stream (when there is one)
- Header: This is where the primary call controls are located to toggle settings and participant side bar, turn video and mix on/off, share screen and leave the call.
- Side Bar: This is where participants and settings information are shown when toggled using the controls on the header. The component can be dismissed using the 'X' on the top right corner. Participants side bar will show a list of participants and a link to invite more users to chat. Settings side bar allows you to configure microphone and camera settings.
Step 2: Chat - Enrich app experiences with chat capabilities that strengthen real-time connection (1-2 days)
Launch into a session with a single click, for real-time response. Personalize customer conversations with an agent chat interface. Easily manage growing customer service needs with a fast time to resolution.
Overview
The sample has both a client-side application and a server-side application.
The client-side application is a React/Redux web application that uses Microsoft's Fluent UI framework.
This application sends requests to an ASP.NET Core server-side application that helps the client-side application connect to Azure.
Follow steps here:https://aka.ms/ACS-ChatSample
Here's what the sample looks like:
When you press the "Start a Chat" button, the web application fetches a user access token from the server-side application. This token is then used to connect the client app to Azure Communication Services. Once the token is retrieved, you'll be prompted to specify your name and emoji that will represent you in chat.
Once your configure your display name and emoji, you can join the chat session. Now you will see the main chat canvas where the core chat experience lives.
Components of the main chat screen:
- Main Chat Area: This is the core chat experience where users can send and receives messages. To send messages, you can use the input area and press enter (or use the send button). Chat messages received are categorized by the sender with the correct name and emoji. You will see two types of notifications in the chat area: 1) typing notifications when a user is typing and 2) sent and read notifications for messages.
- Header: This is where the user will see the title of the chat thread and the controls for toggling participant and settings side bars, and a leave button to exit the chat session.
- Side Bar:This is where participants and setting information are shown when toggled using the controls in the header. The participants side bar contains a list of participants in the chat and a link to invite participants to the chat session. The settings side bar allows you to configure the chat thread title.
Step 3: SMS - Integrate SMS into existing applications, fastest growing method of connecting with customers (2-3 days)
Deliver important information to users anytime, anywhere. Improve on-the-go interactions with rich media integrations and seamless connections.
Integrate SMS into existing applications and workflows with Azure services Logic Apps and Event Grid.
Follow steps here: https://aka.ms/ACS-SMS
