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
Copy file name to clipboardExpand all lines: articles/communication-services/tutorials/virtual-visits/sample-builder.md
+23-22Lines changed: 23 additions & 22 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -14,7 +14,7 @@ ms.subservice: calling
14
14
15
15
# Sample Builder
16
16
17
-
The Azure Communication Services Sample Builder is a no-code tool designed to help teams rapidly launch virtual appointment experiences—without needing to write custom code. Whether you're running a healthcare clinic, financial consultation, or support center, the sample builder lets you prototype, customize, and deploy real-time customer interactions that can integrate directly with Microsoft Teams and Bookings.
17
+
The Azure Communication Services Sample Builder is a no-code tool designed to help teams rapidly launch virtual appointment experiences—without needing to write custom code. Whether you're running a healthcare clinic, financial consultation, or support center, the sample builder lets you prototype, customize, and deploy. These samples can integrate directly with Microsoft Teams and Bookings.
18
18
19
19
👉 **Launch the Sample Builder**: [Go to the Sample Builder](https://ms.portal.azure.com/#view/Microsoft_Azure_VirtualVisitsBuilder/SampleBuilder.ReactView)
20
20
@@ -36,6 +36,7 @@ The Sample Builder can help:
36
36
37
37
### How It Works
38
38
This sample is built on top of Azure Communication Services UI components and composites, providing a robust, accessible, and consistent user interface out of the box. It serves as both a deployment tool and a reference architecture for best practices in communication-driven experiences.
39
+
39
40
The Sample Builder creates a hybrid virtual visit solution by integrating:
40
41
- Microsoft 365 services such as Bookings and Microsoft Teams (for scheduling and provider-side meetings)
41
42
- Azure services such as Azure Communication Services, App Service, and optional Azure Monitor (for web experience, analytics, and real-time communication)
@@ -54,7 +55,7 @@ Virtual Appointment Flow (Using Microsoft Bookings):
54
55
This architecture ensures that providers can join virtual appointments using Microsoft Teams. In the same call, consumers can access a fully branded, browser-based experience—no Teams account required.
55
56
56
57
### What You Get
57
-
Once the tutorial and Sample Builder have been completed, the Sample Builder provides:
58
+
Upon deployment, the Sample Builder provides:
58
59
- A fully deployed Azure web app
59
60
- Microsoft Teams meeting integration
60
61
- Custom UI implementation powered by Azure Communication Services composites
@@ -70,14 +71,14 @@ The following tutorial goes into more depth on how you can set this up.
70
71
71
72
72
73
73
-
##Tutorial: Building a Virtual Appointment Sample
74
+
# Tutorial: Building a Virtual Appointment Sample
74
75
In this section, we're going to use a Sample Builder tool to deploy a Microsoft 365 + Azure hybrid virtual appointments application to an Azure subscription. This application is a desktop and mobile-friendly browser experience, with code that you can use to explore and make the final product.
75
76
76
-
###Step 0: Configure Microsoft 365 Bookings (Optional)
77
+
## Step 0: Configure Microsoft 365 Bookings (Optional)
77
78
78
-
The Sample builder provides an option to configure the sample using M365 Bookings. This allows the bookings app to power the consumer scheduling experience and create meetings for providers.
79
+
The Sample builder provides an option to configure the sample using Microsoft 365 Bookings. This functionality allows the bookings app to power the consumer scheduling experience and create meetings for providers.
79
80
80
-
**If you don't want to use bookings, feel free to skip this step**. This is optional when creating a sample as you can select Rooms instead.
81
+
**If you don't want to use bookings, feel free to skip this step**. This step is optional when creating a sample as you can select Rooms instead.
81
82
82
83
If you do want to use Bookings, create a Bookings calendar and get the Booking page URL from https://outlook.office.com/bookings/calendar.
83
84
@@ -94,17 +95,17 @@ And then, make sure "Add online meeting" is enabled.
94
95
95
96
96
97
97
-
###Step 1: Creating a Sample in the Builder
98
+
## Step 1: Creating a Sample in the Builder
98
99
99
-
####Prerequisites
100
+
### Prerequisites
100
101
To use the Sample Builder, you need:
101
102
- An active Azure subscription
102
103
- Admin permissions to deploy resources in Azure
103
104
- Access to Microsoft Bookings (if you plan to enable scheduling integration)
104
105
105
106
**Launch the Sample Builder**: 👉 [Sample Builder](https://ms.portal.azure.com/#view/Microsoft_Azure_VirtualVisitsBuilder/SampleBuilder.ReactView)
106
107
107
-
You can also navigate to the page within the Azure Communication Services resource in the Azure Portal. If you’re planning to integrate with Microsoft Bookings, skip ahead to Using with Microsoft Bookings to learn how the app connects with scheduling workflows. Return to this step upon setup.
108
+
You can also navigate to the page within the Azure Communication Services resource in the Azure portal. If you’re planning to integrate with Microsoft Bookings, skip ahead to Using with Microsoft Bookings to learn how the app connects with scheduling workflows. Return to this step upon setup.
108
109
109
110
**Follow the step-by-step wizard.**
110
111
@@ -114,15 +115,15 @@ You can also navigate to the page within the Azure Communication Services resou
114
115
4. Select and customize the Post-Call experience
115
116
5. Preview your configuration live, including your brand colors and features available
116
117
117
-
As you progress through the wizard, click through different setting to see what functionality is available. Different setups provide different features, experiences, and options.
118
+
As you progress through the wizard, select through different setting to see what functionality is available. Different setups provide different features, experiences, and options.
118
119
119
-
[](../media/virtual-visits/sample-builder-themes-4.25.png#lightbox)
120
+
[](../media/virtual-visits/sample-builder-themes-4.25.png#lightbox)
120
121
121
122
122
-
###Step 2: Deploy
123
-
At the end of the Sample Builder wizard, you are met with three options. You can deploy to Azure, download the code as a zip, or clone to Github. The sample builder code is publicly available on [GitHub](https://github.com/Azure-Samples/communication-services-virtual-visits-js).
123
+
## Step 2: Deploy
124
+
At the end of the Sample Builder wizard, you're met with three options. You can deploy to Azure, download the code as a zip, or clone to GitHub. The sample builder code is publicly available on [GitHub](https://github.com/Azure-Samples/communication-services-virtual-visits-js).
124
125
125
-
[](../media/virtual-visits/sample-builder-landing-4.25.png#lightbox)
126
+
[](../media/virtual-visits/sample-builder-landing-4.25.png#lightbox)
126
127
127
128
The easiest method to get a working sample is to **Deploy to Azure**. Deployment launches an Azure Resource Manager (ARM) template that deploys the themed application you configured.
128
129
@@ -132,7 +133,7 @@ After walking through the ARM template, you can **Go to resource group**.
132
133
133
134

134
135
135
-
###Step 3: Test
136
+
## Step 3: Test
136
137
The Sample Builder creates three resources in the selected Azure subscriptions. The **App Service** is the consumer front end, powered by Azure Communication Services.
137
138
138
139

@@ -141,27 +142,27 @@ Opening the App Service's URL and navigating to `https://<YOUR URL>/VISIT` allow
141
142
142
143

143
144
144
-
###Step 4: Set deployed app URL in Bookings
145
+
## Step 4: Set deployed app URL in Bookings
145
146
146
147
If using Bookings, enter the application URL followed by "/visit" in the "Deployed App URL" field at https://outlook.office.com/bookings/businessinformation. Otherwise, ignore this step.
147
148
148
-
## Going to production
149
-
Congrats! You've deployed a custom sample. As you transition to production, consider the following
149
+
#Further Actions
150
+
Congrats! You deployed a custom sample. As you try it out, consider the following
150
151
151
152
### Launching patterns
152
-
Consumers often want to join their virtual appointment directly from the reminders sent by Bookings. To support this, Bookings lets you specify a URL prefix that will be included in those reminders. For example, if your prefix is `https://<YOUR URL>/visit`, the reminders will direct users to `https://<YOUR URL>/visit?MEETINGURL=<MEETING URL>`.
153
+
Consumers often want to join their virtual appointment directly from the reminders sent by Bookings. To support this functionality, Bookings allows to you specify a URL prefix that is included in those reminders. For example, if your prefix is https://<YOURURL>/visit, the reminders directs users to https://<YOURURL>/visit?MEETINGURL=<MEETINGURL>.
153
154
154
155
### Integrate into your existing app
155
156
The app service generated by the Sample Builder is a standalone experience optimized for desktop and mobile browsers. If you already have an existing website or mobile app, you can adapt the provided code to fit into your current codebase.
156
157
157
158
For more flexibility and customization, consider using:
158
-
-**UI SDKs** – [Prebuilt, production-ready web and mobile UI components](../../concepts/ui-library/ui-library-overview.md) that allow you to match your existing look and feel.
159
+
-**UI SDKs** – [Prebuilt, production-ready web and mobile UI components](../../concepts/ui-library/ui-library-overview.md) that allow you to match your existing look and feel. The sample builder is built on top of our customizable composite. Read here to learn more
159
160
-**Core SDKs** – Access the underlying [Calling](../../quickstarts/voice-video-calling/get-started-teams-interop.md) and [Chat](../../quickstarts/chat/meeting-interop.md) services directly to build fully custom experiences.
160
161
161
162
### Identity & security
162
-
The sample app issues ACS access tokens without user authentication. In production, implement secure user auth (e.g., Azure AD B2C). [Azure Communication Services user access tokens](../../quickstarts/identity/access-tokens.md)
163
+
The sample app issues ACS access tokens without user authentication. In production, implement secure user auth. [Azure Communication Services user access tokens](../../quickstarts/identity/access-tokens.md)
163
164
164
-
##Next steps
165
+
# Next steps
165
166
-[Overview of virtual appointments](../../concepts/interop/virtual-visits/overview.md)
166
167
-[Learn about Teams controls](../../concepts/interop/guest/teams-administration.md).
167
168
-[Govern user experience in Teams meetings](../../concepts/interop/virtual-visits/govern-meeting-experience.md)
0 commit comments