How to build your own Together Mode scene to Microsoft Teams. Without coding! #NoCode

Microsoft Teams announcements and news at Microsoft Build (#MSBuild if you tweet / post to social about it) focus on more at extensibility and how these result in the benefit of people using Teams. There are lots of interesting features that will make applications more rich and more versatile in Teams. One of those announcements is a way to create your own Together Mode scene! You can already use the Preview of Developer Portal to create one!

Together mode extensibility is is described in Microsoft Blog post as You will soon be able to easily create your own custom scenes for Teams meetings and share them with others. Using a scene designer tool in the Developer Portal, you can craft custom scenes and configure where users show up – making meetings more fun, inclusive, and engaging. 

The best thing: you don’t have to be a developer to create a new Together Mode scene to Teams!

Start by going to Developer Portal. You will still require permissions to add applications to Teams since scenes are distributed as Teams apps. The end result, when you distribute it to Teams, will look like this:

But let’s take a few steps back and start creating our new scene:

You can choose to create a new Scene or you can learn from Getting started scene.


This scene lets you explore how to you can use scenes and how you can add more pictures to it – and seeing the layers on the right you can see what picture and participant is in front of other one.

But you can also create a new one from the scratch. Just hit + Create a new scene

On the right you can start adding participants number (max 50) and pictures to the scene.

You then define the scene, where participants sit, how large or small they are etc.

You can specify where the meeting organizer sits – as well as reserve certain locations for presenters.

You can specify who are on the front, who at the back and define the size for videos as well.
It is also possible to share and export scenes.. as well as import them!
And there are also possibility to mirror & auto-zoom to the scene

Then Preview it in Teams to add the app there

When testing it out I noticed that Together Mode is now activated with just two participants (so you can build scenes for just 1:1 calls!) and also that you can choose your own scene just like any other one.

And yes – it works just like designed. I didn’t even have to know how to code to create a new scene! Just some configuration.

Of course I should have chosen a better picture as a background. However this clearly shows what to consider when you are creating your own new scenes! However my organizer alter ego is right there where I placed the organizer!

  • Pay attention to the picture so people are not cut the way I used in my example
  • Define a good spot for the Organizer and Presenters
  • Specify size of videos to reflect depth and where people sit
  • Use layers (who is at front, who is not) to put people sit in the correct order (not blocking each other)

Have fun and test it out already!

Manifest and internals

Together Mode is defined in a app manifest as MeetingExtensionDefinition.

From there you can get the name and info where the actual scene & preview picture is taken from – as well as how many people fit that scene.

This manifest also has a subfolder that defines the scene details.

Each participant location, zoom and order is defined in the json file – as well as pictures. It is amazing how simple the scene building really is!

thumbnail image 1 captioned Creation of a custom Together Mode scene

List View & Scene duplication

Thank you Lars, for noticing that there is a a List view to Scenes and it includes also the possibility to Duplicate and existing scene easily!

Read more Teams Microsoft Build announcements from Teams Blog post!

8 thoughts on “How to build your own Together Mode scene to Microsoft Teams. Without coding! #NoCode

  1. Thank you Vesa for sharing.
    It was extremely helpful to get startet.

    I also discovered that if you switch to the List view of the scenes in the Developer Portal, you get the possibility to duplicate the scenes.

    Awesome blog in general and thanks in general. Already learned a lot of cool things :).

    Regards
    Lars

    Liked by 1 person

  2. Hello Vesa,
    First of all, thank you so much for this article, it’s super helpful!

    I tried to create a custom scene using the developer portal, but when im finally uploading the package to my teams tenant, i got a very general “something wend wrong” error. Im wondering is you have ever encountered something like this when testing it out ? Or maybe you might know where should I look into?

    Best regards,
    Ines

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.