My First Custom Together Mode Scene

To accompany Build 2021, there is a new Teams blog with enhancements for developers.  Have a read at https://techcommunity.microsoft.com/t5/microsoft-teams-blog/microsoft-teams-announces-new-developer-features-build-2021/ba-p/2352558

What caught my eye was the Together Mode custom scenes and it is surprisingly simple.  Here’s the official guide https://docs.microsoft.com/en-us/microsoftteams/platform/apps-in-teams-meetings/teams-together-mode

To create your own to test, navigate to https://dev.teams.microsoft.com/scenes and sign in with your Microsoft 365 identity.

Choose Create a new Scene

You now need to add images as layers. 

Start with your main background image.  It is recommended that images are in PNG format, no more than 5MB in size and max 1920 by 1080.

I’m using the Imperial Star Destroyer Bridge from https://www.starwars.com/news/star-wars-backgrounds, which is actually a jpg file and still works.

Add the number of participants, by clicking the + Participants button and change the scroll to the number of people to have and click the Add button.

I added 10 here and you can see them all along the bottom of my image.

I can now drag the participants around my scene and position the placeholders.  You can also resize the placeholders, align them and adjust the x/y position in the image, which can be useful to align participant placeholders with others in the scene.

Given my meeting organiser deserves pride of place in my scene, I decided to reserve one placeholder for the organiser by assigning the image.

As you work, it’s probably a good idea to Save. Before you save you need to input a scene name.

If you click on participants you can add/remove participant placeholders

To try it out click the View in Teams button

Review the information and click Preview in Teams

Allow Teams to Open and then click Add  to add your new app

To Test create a meeting and invite enough attendees to test your scene. Once they join, switch to together mode and change the scene

Select your scene and click Apply.  I think I may need to adjust the image sizes in my scene, but it works for me and others in the same meeting, EVEN external people joining the meeting via the web.