Add Calling Communications to your Application with Two Lines of Code

What is the Azure Communication Services UI Library?

At the end of May, we released to public preview the Web UI Library for Azure Communication Services  which helps customers to integrate communication experience into their applications faster. In this blog, we're going to introduce the UI library and how you can integrate an interactive calling experience into your application with two lines of code.

Azure Communication Services provides platform SDKs for voice, video, and chat communication, in addition to phone number and SMS capabilities.  Those low-level SDKs and samples are a great place for many organizations to start, and end, their development journey.

But in many cases an organization may have limited resources and time. You might want to build a prototype super quickly to get your project funded. You might be worried about the engineering complexity behind the user experience, and keeping that interface modern, responsive, accessible, and beautiful. You might not want to worry about continual investment to add new features and fix issues.

That’s why we built the UI library. Developers can spend more time in other areas of their application, while knowing that they have high quality, responsive, accessible and delightful communications experiences ready for their customers.

UI Library supports core scenarios that helps your reach your exact customer:

1. Customizable and ready-to-use UX. You can move and customize components liberally with exposed interfaces. The UI library is entirely open-source, so you can fork the code or otherwise customize the user interface and connection to the ACS dataplane.
2. Bring your own identity. Like the rest of Azure Communication Services, the UI library built with an identity agnostic and application agnostic mindset.
3. Cross device support. Starting with Web (available today) and Mobile (later this year)

Watch it in action:

Calling Experience in Two-Lines of Code

The title was not only clickbait, but something you can do! With UI Library, developers can leverage out-of-the-box composites that they can add to their application with only two lines of code. Composites are available for both calling and chat capabilities. Getting started with the Web UI Library takes as little as two lines of code to embed a calling or chat experience:

Using Composites, developers have access to end to end calling and chat experiences that can be easily embedded into their applications. Below you see a sample calling experience that takes the user through call configuration and into the call screen.

Composites support basic customization which allows developers to change the theme and programmatically access callbacks and events. For example, we could make out calling composite, look like Teams:

If you want to learn even more about Composites and the UI Library visit: aka.ms/acsstorybook

Customize and Compose Components

The UI Library doesn’t stop there. You might be wondering what if I want to build something more custom and not rely on our implementation of a call or chat experience. The UI Library also supports such scenarios by proving developers a wide range of composable components they can use. From Video Gallery to Message Thread.  Visit our documentation, aka.ms.acsstorybook, to see the full set of controls and experiences you can build.

Components can be arranged in any layout and used to compose experiences based on developer requirements. For example, below we have arranged a collection of components on a page.

These components are also customizable in terms of theme but provide a much wider range of properties that can be overwritten. For example, lets imagine you want to support an experience that combines chat and calling, well with the basic components you can do that and more.

When it comes time to present, and the team wants everything to be on brand, you can do that to using built-in customization on the UI Library!

Please visit aka.ms/acsstorybook try out the UI library! Provide feedback here in the comments or through UserVoice. We’re continuously looking to make developing communication applications better better on the Azure platform with flexible tools that scale to your business and your vision.