Partilhar via


Como criar sua extensão de mensagens do Microsoft Teams

Extensões de mensagens são atalhos para inserir conteúdo do aplicativo ou reagir a uma mensagem sem sair da conversa. Para orientar a criação do seu aplicativo, as informações a seguir descrevem e ilustram como as pessoas podem adicionar, usar e gerenciar extensões de mensagens no Teams.

Kit de IU do Microsoft Teams

No Kit de Interface do Usuário do Microsoft Teams você encontra orientações abrangentes para criar uma extensão de mensagens, incluindo elementos que você pode pegar e modificar conforme necessário.

Adicionar uma extensão de mensagens

Você pode adicionar uma extensão de mensagens nos seguintes contextos do Teams:

  • A partir da Microsoft Teams Store.
  • Em um canal, chat ou reunião (antes, durante e depois) próximo à caixa de redação. Vale observar que, caso adicione uma extensão de mensagens a um desses locais, somente você poderá usá-la nesse contexto.

Os exemplos a seguir mostram como adicionar uma extensão de mensagens a um canal.

Celular

O exemplo mostra como adicionar uma extensão de mensagens perto da caixa de redação em um canal no dispositivo móvel.

Desktop

O exemplo mostra como adicionar uma extensão de mensagens perto da caixa de redação em um canal.

Configurar uma extensão de mensagens

A autenticação não é obrigatória, mas se seu aplicativo for algo como uma ferramenta de acompanhamento de tíquetes, talvez seja necessário que as pessoas entrem para usar a extensão de mensagens.

Para consistência entre os aplicativos do Teams, você não pode personalizar a tela de entrada. Se você usar a autenticação de SSO (logon único), os usuários serão conectados automaticamente.

Dispositivo móvel

O exemplo mostra a tela de configuração da extensão de mensagens com um botão de login no dispositivo móvel.

Desktop

O exemplo mostra a tela de configuração da extensão de mensagens com um botão de login.

Tipos de extensões de mensagens

As extensões de mensagens podem incluir comandos de pesquisa, comandos de ação ou ambos. Os comandos dependem das funcionalidades da sua aplicação e da forma como se enquadram nos casos de utilização do Teams.

Comandos de pesquisa

Com os comandos de pesquisa, as pessoas podem usar sua extensão de mensagens para localizar conteúdo externo e inseri-lo em uma mensagem rapidamente. Comandos de pesquisa normalmente são disponibilizados na caixa de redação. Por exemplo, você pode iniciar ou adicionar a uma discussão compartilhando um conteúdo sem sair do Teams.

Dispositivo móvel

O exemplo mostra uma extensão de mensagens baseada em pesquisa iniciada na caixa de redação do dispositivo móvel.

Desktop

O exemplo mostra uma extensão de mensagens baseada em pesquisa iniciada na caixa de redação.

Opções de layout de caixa de redação

Você tem algumas opções para exibir os resultados de pesquisa da extensão de mensagens, incluindo modos de exibição em lista e grade.

Ilustrações mostrando opções de layout dos resultados de pesquisa da extensão de mensagens.

Comandos de ação

Os comandos de ação permitem que as pessoas disparem ações e processem solicitações em serviços externos no Teams. Por exemplo, se seu aplicativo rastreia pedidos, um usuário pode criar um novo pedido usando o conteúdo da mensagem de um colega diretamente dentro do chat.

Extensões de mensagens baseadas em ação costumam requerer que os usuários preencham um formulário ou algum outro tipo de configuração dentro de um modal. Pode criar estas experiências com caixas de diálogo (referidas como módulos de tarefas no TeamsJS v1.x).

Abrir uma extensão de mensagem

A caixa de redação e as mensagens ou postagens são os principais contextos nos quais as pessoas usam extensões de mensagens.

Na caixa de redação

Após sua extensão de mensagens ter sido adicionada, os usuários podem abri-la selecionando o ícone do aplicativo abaixo da caixa de redação. Nesses exemplos, a extensão tem comandos de pesquisa e ação.

Dispositivo móvel

O exemplo mostra como abrir uma extensão de mensagens na caixa de redação do dispositivo móvel.

Desktop

O exemplo mostra como abrir uma extensão de mensagens na caixa de redação.

De uma mensagem de chat ou postagem de canal

Depois de adicionados, os utilizadores podem selecionar o ícone Mais na mensagem de chat ou publicação de canal para encontrar os comandos de ação da sua extensão. Sua extensão pode estar listada em mais ações com base no uso.

Mensagem de chat

O exemplo mostra como abrir uma extensão de mensagens de uma mensagem de chat.

Postagem do canal

O exemplo mostra como abrir uma extensão de mensagens de uma postagem do canal no dispositivo móvel.

Usar uma extensão de mensagem

As situações a seguir mostram as principais formas de uso de extensões de mensagens adotadas pelas pessoas.

Inserir conteúdo em uma mensagem

1. Selecione uma extensão de mensagens. Os usuários podem pesquisar o conteúdo que desejam compartilhar na caixa de redação.

Dispositivo móvel

O exemplo mostra um usuário pesquisando o conteúdo a ser inserido na caixa de redação no celular.

Desktop

O exemplo mostra um usuário pesquisando o conteúdo a ser inserido na caixa de redação.

2. Insira conteúdo. Depois de postados, outras pessoas podem responder ou selecionar o conteúdo para ver mais informações em seu aplicativo.

Dispositivo móvel

O exemplo mostra um usuário postando conteúdo em uma conversa de canal no celular.

Desktop

O exemplo mostra um usuário postando conteúdo em uma conversa de canal.

Executar ações em uma mensagem

1. Selecione uma extensão de mensagens. Seu aplicativo pode incluir um ou mais comandos de ação.

O exemplo mostra um usuário selecionando um comando de ação de uma extensão de mensagens.

2. Conclua a ação. Seu aplicativo pode receber e processar qualquer conteúdo ou dados enviados pela ação da mensagem. Os usuários concluem a ação no aplicativo enquanto permanecem na conversa.

Exemplo de como executar uma ação em uma mensagem.

As extensões de mensagens também permitem que você insira em uma mensagem links de um URL reconhecido com conteúdo completo (esse recurso é chamado de desdobramento de links).

1. Cole um link reconhecido na caixa de redação.

Dispositivo móvel

O exemplo mostra um usuário colando um link na caixa de redação no celular.

Desktop

O exemplo mostra um usuário colando um link na caixa de redação.

2. Insira conteúdo. Se seu aplicativo reconhecer a URL na caixa de redação, ele renderizará o link como um cartão que fornece uma visualização com conteúdo avançado do conteúdo da Web. (Consulte as Diretrizes de design de Cartões Adaptáveis para obter mais informações.)

Dispositivo móvel

O exemplo mostra como a URL, já que é reconhecida pelo seu aplicativo, inclui algum conteúdo avançado na caixa de redação no celular.

Desktop

O exemplo mostra como a URL, já que é reconhecida pelo seu aplicativo, inclui algum conteúdo avançado na caixa de redação.

Gerenciar uma extensão de mensagens

Ao clicar com o botão direito do mouse no ícone, os usuários podem fixar, remover ou configurar sua extensão de mensagens.

Anatomia

Extensão de mensagens na caixa de redação

Os exemplos a seguir mostram uma extensão de mensagem aberta na caixa de redação.

Dispositivo móvel

Ilustração mostrando a anatomia da interface do usuário de uma extensão de mensagens na caixa de redação do dispositivo móvel.

Contador Descrição
1 Nome do aplicativo: nome completo do seu aplicativo.
2 Ícone de menu de comandos de ação (opcional): abre uma lista de comandos de ação para sua extensão de mensagens (conforme sua especificação).
3 Caixa de pesquisa: permite que os usuários localizem o conteúdo do aplicativo que desejam inserir.
4 Menu guia (opcional): fornece várias categorias de conteúdo.
5 Menu de comandos de ação (opcional): exibe a lista de comandos de ação (se você especificar algum).
6 Conteúdo do aplicativo: principalmente para exibir os resultados da pesquisa.

Desktop

Ilustração mostrando a anatomia da interface do usuário de uma extensão de mensagens na caixa de redação.

Contador Descrição
1 Logotipo do aplicativo: ícone de cor do logotipo do aplicativo.
2 Nome do aplicativo: nome completo do seu aplicativo.
3 Ícone de menu de comandos de ação (opcional): abre uma lista de comandos de ação para sua extensão de mensagens (conforme sua especificação).
4 Caixa de pesquisa: permite que os usuários localizem o conteúdo do aplicativo que desejam inserir.
5 Menu guia (opcional): fornece várias categorias de conteúdo.
6 Menu de comandos de ação (opcional): exibe a lista de comandos de ação (se você especificar algum).
7 Conteúdo do aplicativo: principalmente para exibir os resultados da pesquisa. O exemplo aqui está usando o layout da lista (o layout da grade é outra opção).
8 Logotipo do aplicativo: ícone de contorno do logotipo do aplicativo.

Menu de gerenciamento de extensões de mensagens

Ilustração mostrando a anatomia da interface do usuário de um menu de gerenciamento de extensões de mensagens.

Contador Descrição
1 Desafixar: disponível se o usuário fixou seu aplicativo.
2 Remover: remove a extensão de mensagens do canal, chat ou reunião.

Práticas recomendadas

Use essas recomendações para criar uma experiência de aplicativo de qualidade.

Configuração e uso geral

Exemplo de configuração e utilização geral.

Recomendamos: integrar com logon único

O SSO torna o processo de entrada mais fácil, rápido e seguro. Além disso, se um utilizador já tiver iniciado sessão na sua aplicação pessoal, não terá de iniciar sessão novamente para aceder à extensão da mensagem.

Exemplo de integração com o início de sessão único.

Não recomendamos: remover os usuários da conversa

Extensões de mensagens são atalhos que, supostamente, reduzem a alternância entre contextos. Sua extensão não deve, por exemplo, direcionar usuários para uma página da Web fora do Teams.

Recomendamos: colocar em destaque sua extensão de mensagens

As extensões de mensagens nem sempre são fáceis de localizar. Inclua capturas de tela de como usá-las na página de detalhes do aplicativo. Se seu aplicativo também incluir um bot, você pode incluir a documentação de ajuda da extensão de mensagens em um tour de boas-vindas do bot.

Modelagem

Exemplo de templating.

Recomendamos: permitir que o Teams cuide de parte do trabalho de design, se possível

Se fizer sentido para seus casos de uso, pense em criar uma extensão de mensagens baseada em pesquisa. O Teams renderiza esses tipos de extensões com temas e acessibilidade internos.

Exemplo de processamento do trabalho de conceção.

Não o faça: incorpore toda a aplicação numa caixa de diálogo

Se a extensão da mensagem exigir comandos de ação, mantenha a caixa de diálogo simples e apresente apenas os componentes necessários para concluir a ação.

Temas

Exemplo de temas.

Recomendamos: aproveitar os tokens de cor do Teams

Cada tema do Teams tem seu próprio esquema de cores. Para manipular as alterações de tema automaticamente, use tokens de cores (IU do Fluent) em seu design.

Exemplos de tokens de cor.

Não recomendamos: valores de cor de código rígido

Se não utilizar tokens de cor do Teams, os seus designs serão menos dimensionáveis e demorarão algum tempo a gerir.

Ações

Exemplo de ações.

Recomendamos: incluir comandos de ação que fazem sentido no contexto

As ações de mensagem devem estar relacionadas ao que um usuário está olhando. Por exemplo, forneça aos usuários um atalho para criar um problema ou item de trabalho usando o texto na postagem de alguém.

Exemplos de comandos de ação.

Não recomendamos: incluir comandos de ações que não são contextuais

Uma ação de mensagem para exibir seu painel provavelmente pareceria desconectada da maioria das conversas.

Pesquisas

Recomendamos: mostrar resultados da pesquisa ao digitar

Forneça resultados de pesquisa sugeridos enquanto os usuários digitam. Eles podem encontrar o conteúdo de que precisam mais rapidamente com a quantidade mínima de caracteres.

Não recomendamos: exigir que os usuários enviem uma consulta

Você pode fazer com que os usuários pressionem uma tecla ou selecionem um botão para enviar consultas ao seu aplicativo. Embora isso possa ser mais fácil para o serviço de serviços de aplicativo, as pessoas podem ficar confusas por não estarem vendo os resultados da pesquisa em tempo real enquanto digitam.

Recomendamos: considerar consultas de zero termo

Por exemplo, antes de um usuário gravar qualquer coisa na caixa de pesquisa, exiba o que ele visualizou pela última vez em seu aplicativo. É possível que eles desejem inserir esse conteúdo em suas conversas.