You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
*Composites* are turn-key solutions that implement common communication scenarios. You can add video calling experiences to your applications. Composites are open-source higher-order components that developers can take advantage of to reduce development time and engineering complexity.
15
15
16
-
## Composites overview
16
+
## Composites Overview
17
17
18
18
| Composite | Use Cases |
19
19
| :-------- | :-------- |
20
20
|[CallComposite](../../../quickstarts/ui-library/get-started-composites.md)| Calling experience that allows users to start or join a call. Inside the experience, users can configure their devices, participate in the call with video, and see other participants, including those ones with video turned on. For Teams interoperability, `CallComposite` includes lobby functionality so that users can wait to be admitted. |
21
+
|[ChatComposite](../../../quickstarts/ui-library/get-started-chat-ui-library.md)| The `ChatComposite` brings a real-time text messaging experience to users. Specifically, users can send and receive a chat message with events from typing indicators and read receipt. In addition, users can also receive system messages such as participant added or removed and changes to chat title. |
21
22
22
-
## Composites scenarios
23
+
## Composites Scenarios for Calling
23
24
24
-
### Joining a video/audio call
25
+
### Joining a Video/Audio Call
25
26
26
27
Users can join a call using the *Teams meeting URL* or they can set up an Azure Communication Services Call. This approach offers a simpler experience, just like the Teams application.
27
28
28
29
:::image type="content" source="../../media/mobile-ui/android-composite.gif" alt-text="Gif animation shows the pre-meeting experience and joining experience on Android.":::
29
30
30
-
### Pre-call experience
31
+
### Pre-call Experience
31
32
32
33
As a participant of the call, you can provide a name and set up a default configuration for audio and video devices. Then you're ready to jump into the call.
33
34
34
35
:::image type="content" source="../../media/mobile-ui/teams-meet.png" alt-text="Screenshot shows the pre-meeting experience, a page with a message for the participant.":::
35
36
36
-
### Call experience
37
+
### Call Experience
37
38
38
39
The calling composite provides an end-to-end experience, optimizes development time, and focuses on clean layout.
39
40
40
41
:::image type="content" source="../../media/mobile-ui/calling-composite.png" alt-text="Screenshot shows the meeting experience, with icons or video of participants.":::
41
42
42
43
The calling experience provides all these capabilities in one composite component, providing a clear path without complex code, which leads to faster development time.
43
44
44
-
### Quality and security
45
+
### Quality and Security
45
46
46
-
Mobile composites are initialized using [Azure Communication Services access tokens](../../../quickstarts/access-tokens.md).
47
+
Mobile composites for calling are initialized using [Azure Communication Services access tokens](../../../quickstarts/access-tokens.md).
47
48
48
-
### More details
49
+
### More Details
50
+
51
+
If you need more details about mobile composites for calling, see [use cases](../ui-library-use-cases.md#calling-use-cases).
The `ChatComposite` delivers real time text messaging experiences. With the flexibility and scalability in mind, the `ChatComposite` can adapt to different layout or views from your applications without complexibility. You could also choose to not have the `ChatComposite` view shown and only receive notifications to meet your different business needs.
| :::image type="content" source="../../media/mobile-ui/ios-chat-composite.gif" alt-text="Gif animation shows the chat experience on iOS."::: | :::image type="content" source="../../media/mobile-ui/android-chat-composite.gif" alt-text="Gif animation shows the chat experience on Android."::: |
64
+
65
+
66
+
### Quality and Security
67
+
68
+
Similar to the `CallComposite`, the `ChatComposite` also utilizes [Azure Communication Services access tokens](../../../quickstarts/access-tokens.md). To ensure only users with appropriate permission can access chat, their user tokens need to be added into a valid [chat thread](../../../quickstarts/chat/get-started.md) prior to starting the Chat experience.
69
+
70
+
### More Details
71
+
72
+
If you need more details about mobile composites for chat, see [use cases](../ui-library-use-cases.md#chat-use-cases).
49
73
50
-
If you need more details about mobile composites, see [use cases](../ui-library-use-cases.md).
51
74
52
75
## What UI artifact is best for my project?
53
76
@@ -59,10 +82,10 @@ These requirements help you choose the right client library:
Copy file name to clipboardExpand all lines: articles/communication-services/concepts/ui-library/includes/mobile-ui-use-cases.md
+37-15Lines changed: 37 additions & 15 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -6,9 +6,9 @@ ms.topic: include
6
6
ms.date: 09/14/2021
7
7
---
8
8
9
-
Use the call composite in the Azure Communication Services UI Library to create call experiences in your iOS and Android applications. By using a couple lines of code, you can easily integrate an entire call experience in your application. Composites in Communication Services manage the entire lifecycle of the call, from setup until the call ends.
9
+
Use the `CallComposite` and the `ChatComposite`in the Azure Communication Services UI Library to create call experiences in your iOS and Android applications. By using a couple lines of code, you can easily integrate an entire call and chat experience in your application. Composites in Communication Services manage the entire lifecycle of the call and chat, from setup until the call and chat end.
10
10
11
-
## Call use cases
11
+
## Calling Use Cases
12
12
13
13
You can use the call composite in Communication Services to create these use cases:
14
14
@@ -33,11 +33,7 @@ You can use the call composite in Communication Services to create these use cas
33
33
|| End a call |
34
34
|| Hold and resume a call after audio interruption |
35
35
36
-
## Supported identities
37
-
38
-
To initialize a composite and authenticate to the service, a user must have an Azure Communication Services identity. For more information, see [Authenticate to Azure Communication Services](../../authentication.md) and [Quickstart: Create and manage access tokens](../../../quickstarts/access-tokens.md).
39
-
40
-
## Teams interoperability
36
+
### Teams Interoperability
41
37
42
38
For [Teams interoperability](../../teams-interop.md) scenarios, you can use UI Library composites to add a user to a Teams meeting via Communication Services. To enable Teams interoperability, use the call composite. The composite manages the entire lifecycle of joining a Teams interoperability call.
43
39
@@ -47,41 +43,67 @@ The following figure shows an example of the user experience before a caller is
47
43
48
44
:::image type="content" source="../../media/mobile-ui/teams-meet.png" alt-text="Screenshot that shows the user experience before a caller is added to a Teams meeting.":::
49
45
50
-
## View shared content
46
+
###View shared content
51
47
52
48
Through the UI Library for mobile native platforms, call participants can view shared content when other participants share their screens during a Teams call. A remote participant can use stretch and pinch gestures to zoom in or out on the shared content in the call.
53
49
54
-
## Theming
50
+
###Theming
55
51
56
52
You can use the UI Library call composite for iOS and Android to create a custom theme of a caller's experience. To create the platform experience, pass a set of theming colors as shown in the following table. For more information, see [How to create your theme](../../../how-tos/ui-library-sdk/theming.md).
| :::image type="content" source="../../media/mobile-ui/android-color.png" alt-text="Screenshot that shows Android theming for a caller experience."::: | :::image type="content" source="../../media/mobile-ui/ios-dark.png" alt-text="Screenshot that shows iOS theming for a caller experience."::: |
61
57
62
-
## Screen size
58
+
###Screen size
63
59
64
60
You can adapt the Azure Communication Services call composite to adapt to screen sizes from 5 inches to tablet size. Use split mode and tablet mode in the call composite to get the dynamic participants' roster layout, provide clarity on the view, and focus on the conversation.
65
61
66
62
|Split mode | Tablet mode|
67
63
|---------|---------|
68
64
| :::image type="content" source="../../media/mobile-ui/meet-splitscreen.png" alt-text="Screenshot that demonstrates a split-screen view."::: | :::image type="content" source="../../media/mobile-ui/tablet-landscape.png" alt-text="Screenshot that demonstrates tablet mode."::: |
69
65
70
-
## Localization
66
+
###Localization
71
67
72
68
Localization is key to making products for users around the world and who speak different languages. UI Library supports 12 languages: English, Spanish, French, German, Italian, Japanese, Korean, Dutch, Portuguese, Russian, Turkish, and Chinese. It also supports right-to-left languages. For more information, see [How to add localization to your app](../../../how-tos/ui-library-sdk/localization.md).
73
69
74
-
## Accessibility
70
+
###Accessibility
75
71
76
72
Accessibility is a key focus of the call libraries. You can use a screen reader to make important announcements about call status and to help ensure that visually impaired users can effectively participate when they use the application.
77
73
78
-
## View Data Injection
74
+
###View Data Injection
79
75
80
76
Use the UI Library for mobile native platforms to give local and remote participants the option to customize how they appear as users in a call. A local participant can choose a local avatar, custom display name, navigation's title and subtitle on Setup screen when a call begins. A remote user can create a customized avatar when they join the meeting. For more information, see [How to customize pre-meeting view](../../../how-tos/ui-library-sdk/data-model.md).
81
77
82
78
:::image type="content" source="../../media/mobile-ui/ios-composite.gif" alt-text="GIF animation that shows the pre-meeting experience and joining experience on iOS.":::
| Chat types | Join an Azure Communication Services chat thread |
87
+
| Chat actions | Send a chat message |
88
+
|| Receive a chat message |
89
+
| Chat events | Show typing indicators |
90
+
|| Show a read receipt |
91
+
|| Show when a participant is added or removed |
92
+
|| Show changes to the chat title |
93
+
94
+
### Flexibility
95
+
96
+
The `ChatComposite` was designed to fit into different layouts and views in your application. For example, you could choose to place Chat in a navigation view, modal view or some other view. The `ChatComposite` would adjust itself and ensure the user has a seamless experience.
| :::image type="content" source="../../media/mobile-ui/chat-fullscreen.png" alt-text="an image that shows the chat experience on iOS in a navigation view."::: | :::image type="content" source="../../media/mobile-ui/chat-modal.png" alt-text="an image that shows the chat experience on iOS in a modal view."::: |
101
+
102
+
## Supported Identities
103
+
104
+
To initialize a composite and authenticate to the service, a user must have an Azure Communication Services identity. For more information, see [Authenticate to Azure Communication Services](../../authentication.md) and [Quickstart: Create and manage access tokens](../../../quickstarts/access-tokens.md).
105
+
106
+
## Recommended Architecture
85
107
86
108
Initialize a composite by using an Azure Communication Services access token. It's important to get access tokens from Azure Communication Services through a trusted service that you manage. For more information, see [Quickstart: Create and manage access tokens](../../../quickstarts/access-tokens.md) and the [trusted service tutorial](../../../tutorials/trusted-service-tutorial.md).
87
109
@@ -96,7 +118,7 @@ Call and chat client libraries must have the context for the call they join. Lik
96
118
| Retrieve and pass join information for the call or chat | Pass through call and chat information to initialize components |
97
119
| Retrieve and pass user information for any custom data model | Pass through a custom data model to components to render |
title: Quickstart - Integrate chat experiences in your app by using UI Library
3
+
titleSuffix: An Azure Communication Services quickstart
4
+
description: Get started with Azure Communication Services UI Library composites to add Chat communication experiences to your applications.
5
+
author: dhiraj
6
+
ms.author: jorgegarc
7
+
ms.date: 11/29/2022
8
+
ms.topic: quickstart
9
+
ms.service: azure-communication-services
10
+
zone_pivot_groups: acs-plat-web-ios-android
11
+
ms.custom: mode-other
12
+
---
13
+
14
+
# Quickstart: Add chat with UI Library
15
+
16
+
Get started with Azure Communication Services UI Library to quickly integrate communication experiences into your applications. In this quickstart, learn how to integrate UI Library chat composites into an application and set up the experience for your app users.
17
+
18
+
Communication Services UI Library renders a full chat experience right in your application. It takes care of connecting to ACS chat services, and updates participant's presence automatically. As a developer, you need to worry about where in your app's user experience you want the chat experience to launch and only create the ACS resources as required.
19
+
20
+
::: zone pivot="platform-web"
21
+
22
+
[!INCLUDE [UI Library with Web](./includes/get-started-chat/web.md)]
23
+
24
+
::: zone-end
25
+
26
+
::: zone pivot="platform-android"
27
+
28
+
[!INCLUDE [UI Library with Android](./includes/get-started-chat/android.md)]
29
+
30
+
::: zone-end
31
+
32
+
::: zone pivot="platform-ios"
33
+
34
+
[!INCLUDE [UI Library with iOS](./includes/get-started-chat/ios.md)]
35
+
36
+
::: zone-end
37
+
38
+
## Clean up resources
39
+
40
+
If you want to clean up and remove a Communication Services subscription, you can delete the resource or resource group.
41
+
42
+
Deleting the resource group also deletes any other resources associated with it.
43
+
44
+
Learn more about [cleaning up resources](../create-communication-resource.md#clean-up-resources).
Get the sample Android application for this [quickstart](https://github.com/Azure-Samples/communication-services-android-quickstarts/tree/main/ui-library-quick-start) in the open source Azure Communication Services [UI Library for Android](https://github.com/Azure/communication-ui-library-android).
11
+
Get the sample Android application for this [quickstart](https://github.com/Azure-Samples/communication-services-android-quickstarts/tree/main/ui-calling) in the open source Azure Communication Services [UI Library for Android](https://github.com/Azure/communication-ui-library-android).
Get the sample iOS application for this [quickstart](https://github.com/Azure-Samples/communication-services-ios-quickstarts/tree/main/ui-library-quick-start) in the open source Azure Communication Services [UI Library for iOS](https://github.com/Azure/communication-ui-library-ios).
11
+
Get the sample iOS application for this [quickstart](https://github.com/Azure-Samples/communication-services-ios-quickstarts/tree/main/ui-calling) in the open source Azure Communication Services [UI Library for iOS](https://github.com/Azure/communication-ui-library-ios).
0 commit comments