How to customize the lobby experience

[alkwa-msft]

Today I will be going through how to customize the lobby experience when joining a Teams call.

A great use case for using Azure Communication Services is the ability to customize the composite experience. We wanted to make sure everything we build with can be customized to fit your needs. Localization and Icons can be a particular area that can help customers drive their own unique experiences.

We have exposed our icons and locales so you can use them in your own Azure Communication Services experiences or can be overridden with your own. Locales and Icons are both exposed as objects which need to be imported. These objects leverage a key/value system to map correct assets to the correct areas of our code. Today I will be demonstrating how to override specific assets to create a customized experience.

There are 3 main steps to customize the lobby screen.

1. I imported the locales (COMPOSITE_LOCALE_EN_US) and icons (DEFAULT_COMPOSITE_ICONS).

2. For strings we just need to remap the correct string. Please consider setting an appropriate
   string for the correct locale. (e.g if you only override English but you are using French)
   locale.strings.call.lobbyScreenWaitingToBeAdmittedTitle = "Please wait for the next available agent"
   Icons are a little more complicated. The value needs to be a JSX.Element. This means it could
   be anything but today lets just put in an emoji.
   icons.LobbyScreenWaitingToBeAdmitted = <>👋</>

3. Apply the customized objects as props into the CallComposite.

let locale = COMPOSITE_LOCALE_EN_US;
locale.strings.call.lobbyScreenConnectingToCallTitle = "Connecting you to your nearest operator" // By default it is "Joining call"
locale.strings.call.lobbyScreenConnectingToCallMoreDetails = "Sending your signal through the metaverse" // By default it is ""
locale.strings.call.lobbyScreenWaitingToBeAdmittedTitle = "Please wait for the next available agent" // By default it is "Waiting to be admitted"
locale.strings.call.lobbyScreenWaitingToBeAdmittedMoreDetails = "Duh duh duh *Lobby music*"  // By default it is ""
let icons = DEFAULT_COMPOSITE_ICONS;
icons.LobbyScreenConnectingToCall = <>📞</>
icons.LobbyScreenWaitingToBeAdmitted = <>👋</>

 ...
// pass the customized locale object into the locale prop of the CallComposite component
return <CallComposite adapter={callAdapter} locale={locale} icons={icons} />

If you want to try this out.

1. Create a repo off of our CRA template that already has Azure Communication Services dependencies in the package.json repo
2. Apply this gist over the app.tsx file
   https://gist.github.com/alkwa-msft/cc4866710ac90c0f5dd4c41e76ce024b

Here is what it would look like

If you would like to know more about localization and icons please check out our storybook

[arvind1983]

Is there a way to use different customized react components in lobby

[alkwa-msft]

@arvind1983 sorry for the late reply.

We support the icons as jsx.elements but at this time we don't allow further customization when using the calling composite.

I am keen to learn more about what you would like to customize in this lobby screen or I can work with you if you would like to build your own lobby screen instead.

[anonymous21155]

@alkwa-msft Excellent work! Is it possible to play custom music while user wait in the lobby?

[alkwa-msft]

It is possible. I can share a play a sound snippet sometime soon.

What we would be doing is listening for the right events that you are in the lobby in the call state and then use an HTMLAudioElement to play the sound of your choice.

Something that we want to consider is start events and end events if you want to build out custom sounds at key times yourself.

start event: !Lobby -> Lobby
end event: Lobby -> !Lobby

Would it be helpful to just have a k/v mapping of "event" to a "sound" so you can just bind a looping sound to a "lobby" event?

[anonymous21155]

Yes, that would be great! If possible, please share the entire snippet.

[alkwa-msft]

This is my current work in progress. I was working off of a calling hero sample and built in this code.
https://gist.github.com/alkwa-msft/72818ae493fe6fee0794cd1f2a94ac79

Love any early comments you may have and I am still riffing on my own about what are the best way to do some things.

• do we need a better API around how we are playing sounds
• do we want to have multiple of the same sound playing
• do we want to have multiple sounds playing at the same time?
• is there value in playing a sound/song once or always on loop?
• how complicated is this "event" tracking system for knowing if we are in a lobby?
• do you feel comfortable in tracking your own events?
• what are some other helpful events you think would be helpful to be provided out of the box?
• how was the experience in hosting your own static files for playing sounds?

[anonymous21155]

This is great! I was able to do this in a short interval of time.

do we want to have multiple of the same sound playing? - optional.

do we want to have multiple sounds playing at the same time? -optional (better suit if one of the mp3 file is an announcement or something)

is there value in playing a sound/song once or always on loop? -Definitely, useful when org has to pass some important updates, offers or even their advertisement. playing it in loop would be better since we don't know when team's user is going to accept the guest from lobby.

how complicated is this "event" tracking system for knowing if we are in a lobby? Not much complicated.

Perhaps we could set it as an option in the adapter? -That would be better.

how was the experience in hosting your own static files for playing sounds? - Not yet.

Thank you for your efforts.