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
+32-23Lines changed: 32 additions & 23 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -14,17 +14,23 @@ 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, it 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 real-time customer interactions that 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
21
-
This tutorial describes concepts for virtual appointment applications. After completing this tutorial and using associated Sample Builder, you will understand common use cases that a virtual appointments application delivers, the Microsoft technologies that can help you build those uses cases, and have built a sample application integrating Microsoft 365 and Azure that you can use to demo and explore further. You can learn more concepts about virtual appointments in the [overview](../../concepts/interop/virtual-visits/overview.md).
21
+
This tutorial introduces key concepts for building virtual appointment applications. After completing this tutorial and using the Sample Builder, you will:
22
+
23
+
- Understand common use cases for virtual appointments
24
+
- Explore Microsoft technologies that support these scenarios
25
+
- Deploy a working sample application that integrates Microsoft 365 and Azure
26
+
27
+
Learn more foundational concepts in the virtual appointments [overview](../../concepts/interop/virtual-visits/overview.md).
22
28
23
29
### Capabilities
24
30
The Sample Builder can help:
25
31
-**Deploy a working virtual visit experience in minute**s—minimal code required
26
-
-**Try new features early**—test UI capabilities that haven’t fully entered the Azure Communications Services UI library
27
-
-**Customize the consumer experience** with a prebuilt user interface, optional pre-call survey, post-call survey, waiting room, and more
32
+
-**Try new features early**—test UI capabilities that ahead of release
33
+
-**Customize the consumer experience** with by altering prebuilt user interface, post-call surveys, and more
28
34
-**Integrate with Microsoft Bookings** to support scheduling workflows
29
35
-**Launch Microsoft Teams meetings** using Azure Communication Services and enable guest access via the web app
30
36
@@ -37,17 +43,18 @@ The Sample Builder creates a hybrid virtual visit solution by integrating:
37
43
The following diagram shows the user steps for a virtual appointment (using Microsoft Booking):
38
44

39
45
40
-
For this Virtual Appointments scenario using Microsoft Bookings, this chart showcases:
41
-
1. Consumer schedules the appointment using Microsoft 365 Bookings.
42
-
2. Consumer gets an appointment reminder through SMS and Email.
43
-
3. Provider joins the appointment using Microsoft Teams.
44
-
4. Consumer uses a link from the Bookings reminders to launch the Contoso consumer app and join the underlying Teams meeting.
45
-
5. The users communicate with each other using voice, video, and text chat in a meeting.
46
+
Virtual Appointment Flow (Using Microsoft Bookings):
46
47
47
-
This architecture ensures that providers can join virtual appointments using Microsoft Teams and that Consumers can access a fully branded, browser-based experience—no Teams account required.
48
+
1. Consumer schedules the appointment using Microsoft 365 Bookings
49
+
2. Consumer receives reminders via SMS and email
50
+
3. Provider joins via Microsoft Teams
51
+
4. Consumer uses a link from the reminder to launch the Contoso app and join the Teams meeting
52
+
5. Both users interact via video, voice, and chat
53
+
54
+
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.
48
55
49
56
### What You Get
50
-
Once the tutorial and Sample Builder have been completed, the Sample Builder will provide:
57
+
Once the tutorial and Sample Builder have been completed, the Sample Builder provides:
51
58
- A fully deployed Azure web app
52
59
- Microsoft Teams meeting integration
53
60
- Custom UI implementation powered by Azure Communication Services composites
@@ -59,7 +66,7 @@ After deployment, you can immediately test the deployed sample by visiting these
59
66
-`https://your-app-url>/visit` to simulate a consumer joining the appointment
60
67
-`https://<your-app-url>/book` to access the embedded booking interface
61
68
62
-
The following tutorial will go into more depth on how you can set this up.
69
+
The following tutorial goes into more depth on how you can set this up.
63
70
64
71
65
72
@@ -90,7 +97,7 @@ And then, make sure "Add online meeting" is enabled.
90
97
## Step 1: Creating a Sample in the Builder
91
98
92
99
### Prerequisites
93
-
To use the Sample Builder, you’ll need:
100
+
To use the Sample Builder, you need:
94
101
- An active Azure subscription
95
102
- Admin permissions to deploy resources in Azure
96
103
- Access to Microsoft Bookings (if you plan to enable scheduling integration)
@@ -103,17 +110,17 @@ You can also navigate to the page within the Azure Communication Services resou
103
110
104
111
1. Choose an industry scenario (Template)
105
112
2. Choose a scheduling method (Bookings or Rooms)
106
-
3. Customize the theme, colors, banners and add any logos
113
+
3. Customize the theme, colors, banners, and add any logos
107
114
4. Select and customize the Post-Call experience
108
115
5. Preview your configuration live, including your brand colors and features available
109
116
110
-
As you progress through the wizard, click through different setting to see what functionality is available. Different setups will provide different features, experiences, and options.
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.
111
118
112
119
[](../media/virtual-visits/sample-builder-themes-4.25.png#lightbox)
113
120
114
121
115
122
## Step 2: Deploy
116
-
At the end of the Sample Builder wizard, you are met with 3 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
+
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).
117
124
118
125
[](../media/virtual-visits/sample-builder-landing-4.25.png#lightbox)
119
126
@@ -139,18 +146,20 @@ Opening the App Service's URL and navigating to `https://<YOUR URL>/VISIT` allow
139
146
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.
140
147
141
148
# Going to production
142
-
Congrats! You have deplyed the a customer sample! The Sample Builder gives you the basics of a Microsoft 365 and Azure virtual appointment: consumer scheduling via Bookings, consumer joining via a custom app, and the provider joining via Teams. However, several things to consider as you take this scenario to production.
149
+
Congrats! You've deployed a custom sample. As you transition to production, consider the following
143
150
144
151
### Launching patterns
145
-
Consumers want to jump directly to the virtual appointment from the scheduling reminders they receive from Bookings. In Bookings, you can provide a URL prefix that is used in reminders. If your prefix is `https://<YOUR URL>/VISIT`, Bookings will point users to `https://<YOUR URL>/VISIT?MEETINGURL=<MEETING URL>.`
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://<YOURURL>/visit, the reminders will direct users to https://<YOURURL>/visit?MEETINGURL=<MEETINGURL>.
146
153
147
154
### Integrate into your existing app
148
-
The app service generated by the Sample Builder is a stand-alone artifact designed for desktop and mobile browsers. However, you may already have a website or mobile application and need to migrate these experiences to the existing codebase. The code generated by the Sample Builder should help, but you can also use the following:
149
-
-**UI SDKs –**[Production Ready Web and Mobile](../../concepts/ui-library/ui-library-overview.md) components to build graphical applications.
150
-
-**Core SDKs –** The underlying [Call](../../quickstarts/voice-video-calling/get-started-teams-interop.md) and [Chat](../../quickstarts/chat/meeting-interop.md) services can be accessed, and you can build any kind of user experience.
155
+
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
+
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
+
-**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.
151
160
152
161
### Identity & security
153
-
The Sample Builder's consumer experience doesn't authenticate the end user but provides [Azure Communication Services user access tokens](../../quickstarts/identity/access-tokens.md) to any random visitor. In most scenarios you want to implement an authentication scheme.
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)
154
163
155
164
# Next steps
156
165
-[Overview of virtual appointments](../../concepts/interop/virtual-visits/overview.md)
0 commit comments