Compartilhar em reunião

O compartilhamento na reunião permite que os usuários compartilhem documentos ou aplicativos Web de terceiros no estágio de reunião. Os participantes da reunião podem colaborar e interagir com os aplicativos Web de terceiros ou editar os documentos juntos.

A imagem a seguir mostra o botão Compartilhar reunião no aplicativo Web:

Durante a reunião, quando um usuário seleciona o botão Compartilhar em reunião no aplicativo Web ou documento de terceiros, ele inicia um link profundo para o estágio de reunião e abre o aplicativo como uma exibição da Web no estágio de reunião. Para que os participantes da reunião interajam com o aplicativo Web ou documento de terceiros, eles devem ter a extensão de reunião do aplicativo ou documento instalado em seu cliente do Teams. Se eles não tiverem extensão de reunião, o Teams solicitará que os participantes instalem a extensão da reunião.

Quando você seleciona o botão Compartilhar na reunião , ele inicia um link profundo para o estágio de reunião. A seguir está o formato de link profundo:

msteams:/l/meeting-share?deeplinkId={GUID}&fqdn={string}&lm=deeplink&appContext={json encoded app context}

Para obter mais informações, confira gerar um link profundo para compartilhar conteúdo para o estágio em reuniões.

Habilitar o compartilhamento na reunião

A seguir estão três métodos diferentes para habilitar o compartilhamento na reunião. Você pode usar um dos métodos dependendo de quanto controle você deseja nos botões de reunião Compartilhar em exibidos em sua página da Web:

Método 1

Esse método é a maneira mais simples de exibir o compartilhamento em botões de reunião com personalizações mínimas. Você pode personalizar os estilos de botão, o tamanho e os idiomas.

Você pode examinar sua página da Web para localizar todos os elementos HTML com o nome da classe do tipo teams-share-in-meeting-button e gerar dinamicamente os botões de reunião Compartilhar em sua página.

1. Adicione o script launcher.js em sua página da Web.

   <script async defer src="https://teams.microsoft.com/share/launcher.js"></script>
   

2. Adicione um elemento HTML em sua página da Web com o teams-share-in-meeting-buttonclass no atributo, a ID do aplicativo (do manifesto) no data-app-id atributo e o link a ser compartilhado no data-href atributo. Você também pode incluir os data-entity-name atributos e data-entity-description .

   <div
     class="teams-share-in-meeting-button"
     data-href="https://<link-to-be-shared>"
     data-app-id="<app-id>"
     data-entity-name="<app-name>"
     data-entity-description="<app-content-description>"
     >
   </div>
   

3. A seguir estão os atributos adicionais para personalizar o botão Compartilhar na reunião:

   • data-button-type: especifica a cor em segundo plano do botão (primaryShareInMeeting ou secondaryShareInMeeting).
   • data-button-size: especifica o tamanho do botão em pixel.
   • data-target: especifica se o link é aberto na mesma janela, nova guia ou uma nova janela.
   • data-locale: especifica a linguagem de usuário desejada.

Método 2

Você pode usar esse método para ter algum controle sobre qual botão renderizar dinamicamente ou quando o script é executado. O script só é executado quando window.shareToMicrosoftTeams.renderButtons() é chamado. Você pode passar elementos HTML específicos pela renderButtons({elements: [], shareInMeetingElements: [shareInMeetingButton]) API. Você pode personalizar os estilos de botão, o tamanho e os idiomas.

A async shareToMicrosoftTeams.renderButtons(options) API renderiza todos os botões de compartilhamento que têm o nome da classe teams-share-button ou teams-share-in-meeting-button na página. Se um options (optional) objeto for fornecido com uma lista de elementos, conforme mostrado no código a seguir, esses elementos serão renderizados nos botões Compartilhar ou Compartilhar nos botões de reunião.

options (optional): { elements?: HTMLElement[], shareInMeetingElements?: HTMLElement[] }

1. Adicione o script launcher.js em sua página da Web.

   <script async defer src="https://teams.microsoft.com/share/launcher.js" onload="onLoadComplete()"></script>
   

2. Crie um elemento HTML e especifique os atributos necessários. Depois que o script do inicializador estiver totalmente carregado, verifique se a lógica de renderização é executada.

   async function onLoadComplete() {
      const shareInMeetingButton = document.createElement("div");
      shareInMeetingButton.setAttribute("data-app-id", "<app-id>");
      shareInMeetingButton.textContent = "Share Test App"
      shareInMeetingButton.setAttribute("data-href", "<app-content-url>");
      shareInMeetingButton.setAttribute("data-button-type", "secondaryShareInMeeting");
      shareInMeetingButton.setAttribute("data-locale", "fr-CA");
      await window.shareToMicrosoftTeams.renderButtons({elements: [], shareInMeetingElements: [shareInMeetingButton]});
   }  
   

Método 3

Você pode usar esse método para ter controle completo sobre como o script é chamado e quando gerar o botão usando a window.shareToMicrosoftTeams.shareInMeetingClickHandler API. Você pode controlar como e onde os botões são gerados. Você só precisa anexar a window.shareToMicrosoftTeams.shareInMeetingClickHandler API ao onclick atributo do botão. Ele pode ser anexado a um link, botão, menu suspenso e assim por diante. Você tem controle completo de como a interface do usuário é exibida.

A async shareInMeetingClickHandler(content: IShareInMeetingContent) API cria um manipulador de retorno de chamada para o botão Compartilhar na reunião, que pode ser executado selecionando um botão ou menu.

1. Adicione o script launcher.js em sua página da Web.

   <script async defer src="https://teams.microsoft.com/share/launcher.js" onload="onLoadComplete()"></script>
   

2. Crie um elemento HTML e adicione o shareToMicrosoftTeams.shareInMeetingClickHandler ao seu onClick atributo. Depois que o script do inicializador for totalmente carregado, verifique se a lógica onclick é criada.

   async function onLoadComplete() {
      var customShareInMeetingButton = document.createElement("a");
      customShareInMeetingButton.onclick = window.shareToMicrosoftTeams.shareInMeetingClickHandler({
      url: "<app-content-url>",
      appId: "<app-id>",
      entityName: "<app-entity-name>",
      entityDescription: "<app-content-description>",
      });
   }
   

A seguir estão as definições de launcher.js:

Propriedade	Atributo HTML	Tipo	Obrigatório	Padrão	Descrição
url	data-href	Cadeia de caracteres	Sim	NA	URL do conteúdo do aplicativo a ser compartilhado.
appId	data-app-id	Cadeia de caracteres	Sim	NA	ID do aplicativo a ser compartilhado.
entityName	data-entity-name	Cadeia de caracteres	Não	NA	Nome da entidade do aplicativo.
entityDescription	data-entity-description	Cadeia de caracteres	Não	NA	Descrição do conteúdo do aplicativo a ser compartilhado.
localidade	data-locale	Cadeia de caracteres	Não	en-US	Idioma preferencial do usuário.
destino	data-target	Cadeia de caracteres	Não	Auto	Especifica se o link é aberto na mesma janela, nova guia ou nova janela.
Buttontype	data-button-type	Cadeia de caracteres	Não	primaryShareInMeeting	Especifica a cor de fundo do botão: primaryShareInMeeting ou secondaryShareInMeeting.
Buttonsize	data-button-size	Cadeia de caracteres	Não	NA	Tamanho do botão em pixels.

Experiência final do usuário em aplicativos de terceiros

Depois de habilitar o Share na reunião em aplicativos de terceiros, você pode compartilhar os aplicativos no estágio de reunião. Para acessar, siga as etapas:

Se a extensão de reunião estiver instalada:

1. Abra o aplicativo Web no navegador e selecione Compartilhar na reunião.

   

2. Selecione Iniciar compartilhamento.

   

3. O aplicativo Web é compartilhado para o estágio de reunião e todos os participantes podem interagir e editar juntos.

   

Se a extensão de reunião não estiver instalada:

1. Abra o aplicativo Web no navegador e selecione Compartilhar na reunião.

   

2. Para instalar o aplicativo de extensão de reunião, selecione Adicionar.

   

3. Selecione Iniciar compartilhamento.

   

4. O aplicativo Web é compartilhado para o estágio de reunião e todos os participantes podem interagir e editar juntos.

   

Gerar um link profundo para compartilhar conteúdo para o estágio em reuniões

Você também pode gerar um link profundo para compartilhar o aplicativo para o estágio e iniciar ou ingressar em uma reunião. Quando um link profundo é selecionado em um aplicativo por um usuário que faz parte de uma reunião em andamento, o aplicativo é compartilhado no palco e uma janela pop-up de permissão é exibida. Os usuários podem conceder acesso aos participantes para colaborar com um aplicativo.

Quando um usuário não está em uma reunião, o usuário é redirecionado para o calendário do Teams, onde pode participar de uma reunião ou iniciar uma reunião instantânea (Atender agora).

Depois que o usuário inicia uma reunião instantânea (Atender agora), ele pode adicionar participantes e interagir com o aplicativo.

Para adicionar um link profundo para compartilhar conteúdo no palco, você precisa ter um contexto de aplicativo. O contexto do aplicativo permite que o cliente do Teams busque o manifesto do aplicativo e marcar se o compartilhamento no palco for possível. A seguir está um exemplo de um contexto de aplicativo:

{ "appSharingUrl" : "https://teams.microsoft.com/extensibility-apps/meetingapis/view", "appId": "9ec80a73-1d41-4bcb-8190-4b9eA9e29fbb" , "useMeetNow": false }

Os parâmetros de consulta para o contexto do aplicativo são:

• appID: esta é a ID que pode ser obtida do manifesto do aplicativo.
• appSharingUrl: a URL, que precisa ser compartilhada no palco, deve ser um domínio válido definido no manifesto do aplicativo. Se a URL não for um domínio válido, uma caixa de diálogo de erro aparecerá para fornecer ao usuário uma descrição do erro.
• useMeetNow: isso inclui um parâmetro booliano que pode ser verdadeiro ou falso.

  • True: quando o useMeetNow valor for verdadeiro e se não houver uma reunião em andamento, uma nova reunião do Meet now será iniciada. Quando houver uma reunião em andamento, esse valor será ignorado.

  • False: o valor padrão de useMeetNow é falso, o que significa que quando um link profundo é compartilhado para o palco e não há uma reunião em andamento, um pop-up de calendário será exibido. No entanto, você pode compartilhar diretamente durante uma reunião.

Verifique se todos os parâmetros de consulta estão codificados corretamente no URI e que o contexto do aplicativo precisa ser codificado duas vezes na URL final. A seguir está um exemplo:

const appContext= JSON.stringify({ 
  "appSharingUrl" : "https://teams.microsoft.com/extensibility-apps/meetingapis/view",
  "appId": "9cc80a93-1d41-4bcb-8170-4b9ec9e29fbb",
  "useMeetNow": false
});
const encodedContext = encodeURIComponent(appContext).replace(/'/g,"%27").replace(/"/g,"%22");
const encodedAppContext = encodeURIComponent(encodedContext).replace(/'/g,"%27").replace(/"/g,"%22");

Um link profundo pode ser iniciado na Web do Teams ou na área de trabalho do Teams ou no cliente móvel.

• Teams Web: use o seguinte formato para iniciar um link profundo da Web do Teams para compartilhar conteúdo no palco:

  msteams:/l/meeting-share?deeplinkId={GUID}&fqdn={string}&lm=deeplink&appContext={json encoded app context}

  Exemplo: https://teams.microsoft.com/l/meeting-share?deeplinkId={sampleid}&fqdn=teams.microsoft.com&lm=deeplink%22&appContext=%257B%2522appSharingUrl%2522%253A%2522https%253A%252F%252Fteams.microsoft.com%252Fextensibility-apps%252Fmeetingapis%252Fview%2522%252C%2522appId%2522%253A%25229cc80a93-1d41-4bcb-8170-4b9ec9e29fbb%2522%252C%2522useMeetNow%2522%253Atrue%257D

  Link profundo	Formatar	Exemplo
  Para compartilhar o aplicativo e abrir o calendário do Teams, quando useMeeetNow for falso, padrão.	https://teams.microsoft.com/l/meeting-share?deeplinkId={deeplinkid}&fqdn={fqdn}}&lm=deeplink%22&appContext={encoded app context}	https://teams.microsoft.com/l/meeting-share?deeplinkId={sampleid}&fqdn=teams.microsoft.com&lm=deeplink%22&appContext=%257B%2522appSharingUrl%2522%253A%2522https%253A%252F%252Fteams.microsoft.com%252Fextensibility-apps%252Fmeetingapis%252Fview%2522%252C%2522appId%2522%253A%25229cc80a93-1d41-4bcb-8170-4b9ec9e29fbb%2522%252C%2522useMeetNow%2522%253Afalse%257D
  Para compartilhar o aplicativo e iniciar uma reunião instantânea, quando useMeeetNow for verdadeiro.	https://teams.microsoft.com/l/meeting-share?deeplinkId={deeplinkid}&fqdn={fqdn}}&lm=deeplink%22&appContext={encoded app context}	https://teams.microsoft.com/l/meeting-share?deeplinkId={sampleid}&fqdn=teams.microsoft.com&lm=deeplink%22&appContext=%257B%2522appSharingUrl%2522%253A%2522https%253A%252F%252Fteams.microsoft.com%252Fextensibility-apps%252Fmeetingapis%252Fview%2522%252C%2522appId%2522%253A%25229cc80a93-1d41-4bcb-8170-4b9ec9e29fbb%2522%252C%2522useMeetNow%2522%253Atrue%257D

• Equipes de trabalho ou cliente móvel: use o seguinte formato para iniciar um link profundo da área de trabalho do Teams ou do cliente móvel para compartilhar conteúdo no palco:

  msteams:/l/meeting-share?deeplinkId={deeplinkid}&fqdn={fqdn}&lm=deeplink&appContext={encoded app context}

  Exemplo: msteams:/l/meeting-share?deeplinkId={sampleid}&fqdn=teams.microsoft.com&lm=deeplink%22&appContext=%257B%2522appSharingUrl%2522%253A%2522https%253A%252F%252Fteams.microsoft.com%252Fextensibility-apps%252Fmeetingapis%252Fview%2522%252C%2522appId%2522%253A%25229cc80a93-1d41-4bcb-8170-4b9ec9e29fbb%2522%252C%2522useMeetNow%2522%253Atrue%257D

  Link profundo	Formatar	Exemplo
  Para compartilhar o aplicativo e abrir o calendário do Teams, quando useMeeetNow for falso, padrão.	msteams:/l/meeting-share? deeplinkId={deeplinkid}&fqdn={fqdn}&lm=deeplink%22&appContext={encoded app context}	msteams:/l/meeting-share?deeplinkId={sampleid}&fqdn=teams.microsoft.com&lm=deeplink%22&appContext=%257B%2522appSharingUrl%2522%253A%2522https%253A%252F%252Fteams.microsoft.com%252Fextensibility-apps%252Fmeetingapis%252Fview%2522%252C%2522appId%2522%253A%25229cc80a93-1d41-4bcb-8170-4b9ec9e29fbb%2522%252C%2522useMeetNow%2522%253Afalse%257D
  Para compartilhar o aplicativo e iniciar uma reunião instantânea, quando useMeeetNow for verdadeiro.	msteams:/l/meeting-share? deeplinkId={deeplinkid}&fqdn={fqdn}&lm=deeplink%22&appContext={encoded app context}	msteams:/l/meeting-share?deeplinkId={sampleid}&fqdn=teams.microsoft.com&lm=deeplink%22&appContext=%257B%2522appSharingUrl%2522%253A%2522https%253A%252F%252Fteams.microsoft.com%252Fextensibility-apps%252Fmeetingapis%252Fview%2522%252C%2522appId%2522%253A%25229cc80a93-1d41-4bcb-8170-4b9ec9e29fbb%2522%252C%2522useMeetNow%2522%253Atrue%257D

Os parâmetros de consulta são:

• deepLinkId: qualquer identificador usado para correlação de telemetria.
• fqdn: fqdn é um parâmetro opcional, que pode ser usado para alternar para um ambiente apropriado de uma reunião para compartilhar um aplicativo no palco. Ele dá suporte a cenários em que um compartilhamento de aplicativo específico acontece em um determinado ambiente. O valor padrão de fqdn é a URL corporativa e os valores possíveis são Teams.live.com para o Teams for Life, teams.microsoft.comou teams.microsoft.us.

Para compartilhar todo o aplicativo para o estágio, no manifesto do aplicativo, você deve configurar meetingStage e meetingSidePanel como contextos de quadro, consulte manifesto do aplicativo. Caso contrário, os participantes da reunião podem não poder ver o conteúdo no palco.

Observação

Para que seu aplicativo passe a validação, ao criar um link profundo do seu site, aplicativo Web ou Cartão Adaptável, use Compartilhar na reunião como cadeia de caracteres ou cópia.

Exemplo de código

Nome de exemplo	Descrição	.NET	Node.js	Manifesto
Exibição do Estágio de Reunião	Este aplicativo ajuda a habilitar e configurar seus aplicativos para reuniões do Teams. Ele também demonstra o uso do compartilhamento no recurso de reunião.	View	View	Exibir

Confira também

• Aplicativos para reuniões e chamadas do Teams
• Compartilhar no Teams a partir de aplicativos Web
• Compartilhar com o Teams a partir do aplicativo ou guia pessoal
• Criar links detalhados
• Cartões Adaptáveis