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:
- Na 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
Desktop
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
Desktop
Tipos de extensões de mensagens
As extensões de mensagens podem incluir comandos de pesquisa, comandos de ação ou ambos. Seus comandos dependem dos recursos do aplicativo e de como eles se encaixam nos casos de uso 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
Desktop
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.
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. Você pode criar essas experiências com caixas de diálogo (chamados de módulos de tarefa 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
Desktop
De uma mensagem de chat ou postagem de canal
Depois de adicionados, os usuários podem selecionar o ícone Mais
na mensagem de chat ou na postagem do canal para localizar 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
Postagem do canal
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
Desktop
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
Desktop
Executar ações em uma mensagem
1. Selecione uma extensão de mensagens. Seu aplicativo pode incluir um ou mais comandos de ação.
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.
Links de visualização
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
Desktop
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
Desktop
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
| 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
| 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
| 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
Recomendamos: integrar com logon único
O SSO torna o processo de entrada mais fácil, rápido e seguro. Além disso, se um usuário já entrou em seu aplicativo pessoal, ele não precisará entrar novamente para acessar a extensão da mensagem.
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
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.
Não insira todo o aplicativo em uma caixa de diálogo
Se a extensão da mensagem exigir comandos de ação, mantenha a caixa de diálogo simples e exiba apenas os componentes necessários para concluir a ação.
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.
Não recomendamos: valores de cor de código rígido
Se você não usar tokens de cor do Teams, seus designs serão menos escalonáveis e levarão mais tempo para serem gerenciados.
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.
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.
Comentários
Em breve: Ao longo de 2024, eliminaremos os problemas do GitHub como o mecanismo de comentários para conteúdo e o substituiremos por um novo sistema de comentários. Para obter mais informações, consulte https://aka.ms/ContentUserFeedback.
Enviar e exibir comentários de