Mensagens de formato

Nesta página, explicamos como os apps do Google Chat podem formatar texto para enviar mensagens que contêm:

  • Rich text que contém hiperlinks ou @menciona um ou todos os usuários em um espaço do Chat.
  • Texto que aparece em uma interface de card, incluindo texto de parágrafo ou texto de interface que aparece ao lado de um ícone, como um botão.

Formatar uma mensagem de texto

O Chat permite adicionar formatação básica a uma mensagem de texto, incluindo negrito, itálico e tachado. A formatação de texto em mensagens de texto é diferente da formatação em mensagens de card porque as mensagens de texto são formatadas com a mesma sintaxe que os usuários do Chat usam.

Para mensagens enviadas ou recuperadas usando a API Chat, use a sintaxe padrão do Markdown (MARKUP_SYNTAX_MARKDOWN) ou a sintaxe de marcação do Chat (MARKUP_SYNTAX_CHAT). É possível configurar uma sintaxe de marcação padrão no nível do app no console do Google Cloud (consulte Configurar a API Google Chat):

  • Markdown: sintaxe padrão de Markdown (MARKUP_SYNTAX_MARKDOWN), com base na especificação CommonMark com outras extensões. Os apps do Chat recém-criados usam o Markdown por padrão.
  • Chat: sintaxe de marcação do Chat (MARKUP_SYNTAX_CHAT). Os apps do Chat atuais usam Chat como padrão para preservar a compatibilidade com versões anteriores.

Também é possível especificar markup_syntax em solicitações de API individuais do Chat para substituir o padrão no nível do app. Quando markup_syntax não é especificado em uma solicitação de API, a marcação é definida com base em como você chama a API Chat:

  • Apps do Chat configurados:usa a sintaxe de marcação salva na página de configuração da API Chat.
  • Projetos na nuvem não configurados (sem configuração): se o projeto na nuvem chamar a API Chat sem uma configuração salva do app do Chat, as solicitações vão usar MARKUP_SYNTAX_MARKDOWN por padrão.
  • Webhooks de entrada:o padrão é MARKUP_SYNTAX_CHAT. Consulte Enviar mensagens usando webhooks de entrada.

Para formatar mensagens de texto, use a seguinte sintaxe:

Formato MARKUP_SYNTAX_CHAT MARKUP_SYNTAX_MARKDOWN Exemplo de sintaxe Texto exibido no Google Chat
Negrito * **

*hello*

ou:

**hello**

 hello
Itálico _ (sublinhado) *

_hello_

ou:

*hello*

 hello
Tachado ~ ~~

~hello~

ou:

~~hello~~

 hello
fonte monoespaçada ` (acento grave) ` (acento grave) `hello` hello
Bloco monoespaçado ` ` ` (três acentos graves) ` ` ` (três acentos graves) ```
Hello
World
```		 Hello
World
Lista com marcadores * ou - (hífen) seguido por um espaço * ou - (hífen) seguido por um espaço

* Este é o primeiro item da lista.

* Este é o segundo item da lista.
  • Este é o primeiro item da lista.
  • Este é o segundo item da lista.
Lista aninhada * ou - (hífen) seguido por um espaço, precedido por quatro espaços por nível de aninhamento * ou - (hífen) seguido por um espaço, precedido por quatro espaços por nível de aninhamento

* Este é o item com profundidade de aninhamento um na lista.

    * Este é o item com profundidade aninhada dois na lista.

        * Este é o item com profundidade de aninhamento três na lista.
  • Este é o item com profundidade aninhada um na lista.
    • Este é o item com profundidade aninhada dois na lista.
      • Este é o item com profundidade de aninhamento três na lista.
Lista numerada Sem suporte 1. (número seguido por um ponto e um espaço)

1. Este é o primeiro item da lista.

2. Este é o segundo item da lista.
  1. Este é o primeiro item da lista.
  2. Este é o segundo item da lista.
Citação em bloco > (sinal de maior que) > (sinal de maior que) >olá
ícone de formato de citação em bloco olá
Hiperlink <hyperlink|display text> [display text](hyperlink)

<https://example.com|Example website>

ou:

[Example website](https://example.com)

Exemplo de site

Para saber mais sobre hiperlinks, consulte Formatar links.
Mencionar usuário <users/{user}>, em que {user} é o ID do usuário.

<chat-user data-user="users/{user}">

ou:

<chat-user data-email="{email}">

<users/123456789012345678901> ou <users/all>

ou:

<chat-user data-user="users/123456789012345678901">,

<chat-user data-user="users/all"> ou

<chat-user data-email="email@example.com">

@Mahan S

Para saber mais sobre como mencionar usuários, consulte Mencionar usuários em uma mensagem de texto.
Custom Emoji

<customEmojis/{uid}>

ou:

<customEmojis/:{name}:>

<chat-emoji data-custom-emoji="customEmojis/{uid}">

ou:

<chat-emoji data-emoji-name=":{name}:">

<customEmojis/abc-123-def>

ou:

<customEmojis/:smiley-cat:>

ou:

<chat-emoji data-custom-emoji="customEmojis/abc-123-def">

ou:

<chat-emoji data-emoji-name=":smiley-cat:">

 🐱 (emoji personalizado de gato sorridente)
Citação Sem suporte <chat-citation data-id="{id}">{text}</chat-citation> em que {id} é o ID da citação definido na mensagem elements. <chat-citation data-id="cite_1">cited text</chat-citation>

texto citado

Para saber mais sobre citações, consulte Adicionar citações a uma mensagem de texto.

Por exemplo, considere o seguinte JSON:

    {
      "text": "Your pizza delivery *has arrived*!\nThank you for using _Cymbal Pizza!_"
    }

Essa mensagem de texto formatada mostra o seguinte em um espaço do Chat:

O app da Cymbal Pizza envia uma mensagem de texto informando que a entrega chegou.

Ver a formatação de texto enviada em uma mensagem

Quando um usuário envia uma mensagem, o corpo em texto simples dela fica no campo text. Algumas formatações aplicadas à mensagem de texto usando a sintaxe Markdown estão no campo text. A formatação adicional está no campo formattedText somente de saída, incluindo o seguinte:

  • Sintaxe de Markdown adicional para texto
  • Menções de usuários
  • Hiperlinks personalizados
  • Emojis personalizados

Por exemplo, considere o seguinte texto enviado por um usuário:

Mensagem recebida no Chat com a palavra

Se a mensagem foi formatada usando o menu Formatar na interface do Chat, o campo text contém apenas o texto, enquanto o campo formattedText contém as marcações, o texto e o hiperlink. O exemplo a seguir mostra o rascunho de uma mensagem de texto com uma palavra com hiperlink, itens em uma lista e uma palavra em negrito:

Rascunho de mensagem com a palavra

A mensagem é recebida no seguinte formato:

    {
      "text": "I can meet there at:\nNoon\n3 pm\n5 pm\nWhat time works for you?",
      "formattedText": "I can meet <http://example.com|there> at:\n* Noon\n* 3 pm\n* 5 pm\nWhat time works for *you*?",
    }

Se você incluir um URL de link simples no texto da mensagem, como http://www.example.com/, o Google Chat vai usar isso como o texto do link e criar automaticamente um hiperlink para o URL especificado.

Para fornecer um texto alternativo para o link, use a seguinte sintaxe:

  • Para mensagens de API configuradas com Markdown, use a sintaxe de link padrão do Markdown:

    Exemplo de sintaxe Texto exibido no Google Chat
    [Example website](https://example.com)

  • Para mensagens de texto simples padrão, use a sintaxe de barra vertical:

    Exemplo de sintaxe Texto exibido no Google Chat
    <https://example.com|Example website>

    O pipe e o texto do link são opcionais, então <https://example.com> e https://example.com são equivalentes.

Usar emojis personalizados em uma mensagem de texto

Os apps do Chat podem enviar mensagens de texto com emojis personalizados. Os emojis personalizados só estão disponíveis para organizações do Google Workspace, e o administrador precisa ativar esse recurso para a organização. Para mais informações, consulte Saiba mais sobre os emojis personalizados no Google Chat e Gerenciar permissões de emojis personalizados.

Para criar mensagens com emojis personalizados, seu app precisa usar a autenticação do usuário. Os emojis personalizados não são compatíveis com mensagens criadas como um webhook ou mensagens criadas com autenticação de app.

Para adicionar um emoji personalizado ao texto de uma mensagem, especifique o name ou emoji_name do recurso customEmoji:

{
    "text": "Hello <customEmojis/CUSTOM_EMOJI_ID>."
}

Para usar este exemplo, substitua CUSTOM_EMOJI_ID pelo ID da imagem personalizada. Esse ID está no campo name ou emoji_name do recurso customEmoji.

Se o app enviar mensagens usando a sintaxe Markdown, você poderá especificar emojis personalizados no formato de tag HTML usando o ID do emoji personalizado:

{
  "text": "Hello <chat-emoji data-custom-emoji=\"customEmojis/CUSTOM_EMOJI_ID\">."
}

Ou especifique o nome do emoji personalizado:

{
  "text": "Hello <chat-emoji data-emoji-name=\"CUSTOM_EMOJI_NAME\">."
}

Para usar esses exemplos, substitua CUSTOM_EMOJI_ID pelo ID do emoji personalizado e CUSTOM_EMOJI_NAME pelo nome do atalho do emoji personalizado.

Mencionar usuários em uma mensagem de texto

Os apps do Chat podem enviar mensagens de texto que mencionam um ou todos os usuários em um espaço do Chat. Os apps do Chat também podem mencionar usuários que não entraram no espaço ou que são participantes de um espaço no modo de importação.

As mensagens silenciosas não permitem mencionar usuários. Incluir uma menção em uma mensagem silenciosa retorna um erro.

@mencionar usuários específicos

Para @mencionar um usuário específico, adicione <users/{user}> à mensagem de texto, em que {user} é o ID do usuário. Por exemplo, considere a seguinte mensagem de texto em que 123456789012345678901 representa o ID do usuário Mahan S.:

{
    "text": "A customer has reported an issue. Assigning ticket #942 to <users/123456789012345678901>."
}

Se o app enviar mensagens usando a sintaxe Markdown, use o formato de tag HTML chat-user para especificar o ID do usuário:

{
  "text": "Assigning ticket #942 to <chat-user data-user=\"users/123456789012345678901\">."
}

Ou especifique por e-mail:

{
  "text": "Assigning ticket #942 to <chat-user data-email=\"mahan@example.com\">."
}

A mensagem de texto é exibida da seguinte forma:

O app do Chat menciona uma pessoa em uma mensagem de texto.

É possível especificar o valor de users/{user} das seguintes maneiras:

  • Se o app do Google Chat estiver respondendo a uma mensagem enviada pelo usuário, use o campo message.sender.name do evento de interação MESSAGE.

  • Se o app do Google Chat estiver criando uma mensagem de texto assíncrona, especifique o valor de users/{user} das seguintes maneiras:

    • Use o campo name do recurso User do Google Chat, como users/123456789012345678901.
    • Use o endereço de e-mail do usuário como um alias para o valor {user}. Por exemplo, se o endereço de e-mail for mahan@example.com, será possível especificar o usuário como users/mahan@example.com. Para usar um alias de e-mail, seu app do Google Chat precisa se autenticar como usuário.

  • Se você usa a API People, também pode usar o método people.get para identificar o ID do usuário.

@mencionar todos os usuários

Para criar uma mensagem de texto que @mencione todos em um espaço, substitua {user} por all. O exemplo JSON a seguir menciona todos os usuários em uma mensagem:

{
    "text": "Important message for <users/all>: Code freeze starts at midnight tonight!"
}

Se o app enviar mensagens usando a sintaxe Markdown, especifique a menção usando o formato de tag HTML chat-user:

{
  "text": "Important message for <chat-user data-user=\"users/all\">: Code freeze starts at midnight tonight!"
}

Adicionar citações a uma mensagem de texto

Os apps do Chat podem incluir citações em mensagens de texto para fornecer informações detalhadas sobre as fontes aos usuários. É possível fornecer fontes de duas maneiras:

  • Citações inline: adicione cards interativos que aparecem quando os usuários passam o cursor sobre partes específicas do texto da mensagem.
  • Fontes do rodapé: mostre uma lista de fontes na parte de baixo da mensagem como links de rodapé.

As citações só são aceitas quando o markupSyntax da mensagem está definido como MARKUP_SYNTAX_MARKDOWN. Esse recurso só é compatível com a criação de mensagens assíncronas usando a API Chat.

Para adicionar citações inline a uma mensagem:

  1. Forneça as origens na lista citations da mensagem elements, atribuindo um id exclusivo a cada objeto Citation.
  2. No texto da mensagem, coloque o texto que você quer citar usando o formato de tag HTML chat-citation: <chat-citation data-id="{id}">{text}</chat-citation>. Verifique se o {id} corresponde ao ID definido no elements. As citações não referenciadas (sem uma tag correspondente) são ignoradas.
{
  "text": "This is a <chat-citation data-id=\"cite_1\">cited</chat-citation> text.",
  "markupSyntax": "MARKUP_SYNTAX_MARKDOWN",
  "elements": {
    "citations": [
      {
        "id": "cite_1",
        "citedSources": [
          {
            "title": "Example Source",
            "uri": "https://example.com"
          }
        ]
      }
    ]
  }
}

Para adicionar fontes de rodapé a uma mensagem, forneça as fontes na lista citedSources da mensagem elements. Todas as fontes fornecidas aqui aparecem automaticamente abaixo da mensagem como links de rodapé e não exigem tags inline no texto da mensagem.

{
  "text": "This is a message with a footer source.",
  "markupSyntax": "MARKUP_SYNTAX_MARKDOWN",
  "elements": {
    "citedSources": [
      {
        "title": "Example Source",
        "uri": "https://example.com"
      }
    ]
  }
}

Formatar o texto que aparece nos cards

Nos cards, a maioria dos campos de texto aceita formatação básica usando um pequeno subconjunto de tags HTML. A formatação de texto em mensagens de card é diferente da formatação em mensagens de texto, porque as mensagens de texto são formatadas com a mesma sintaxe que os usuários do Chat usam.

Use o Criador de Cards para projetar e visualizar mensagens e interfaces do usuário para apps do Chat:

Abra o Criador de Cards

Formatar texto do parágrafo

As tags compatíveis e as finalidades delas são mostradas na tabela a seguir:

Formato Exemplo Resultado renderizado
Negrito "This is <b>bold</b>." Este texto está em negrito.
Itálico "This is <i>italics</i>." Este texto está em itálico.
Sublinhado "This is <u>underline</u>." Este é um texto sublinhado.
Tachado "This is <s>strikethrough</s>." Este texto está tachado.
Cor da fonte "This is <font color=\"#FF0000\">red font</font>." Esta é uma fonte vermelha.
Hiperlink "This is a <a href=\"https://www.google.com\">hyperlink</a>." Este é um hiperlink.
Tempo "This is a time format: <time>2023-02-16 15:00</time>." Este é um formato de hora: .
Nova linha "This is the first line. <br> This is a new line." Esta é a primeira linha.
Esta é uma nova linha.

Para definir listas e blocos de código, use as seguintes tags:

Formato Exemplo Resultado renderizado
Nova linha "Line 1<br>Line 2" Linha 1
Linha 2
fonte monoespaçada "This is an <code>inline code</code>." Isso é um inline code.
Bloco monoespaçado "<pre><code>This a code block.</code></pre>" 
This is a code block.
Lista com marcadores "<ul><li>List item 1</li><li>List item 2</li></ul>"
  • List item 1
  • List item 2
Lista ordenada "<ol><li>List item 1</li><li>List item 2</li></ol>"
  1. List item 1
  2. List item 2

Markdown

Quando a sintaxe de markdown está ativada, você pode usar o seguinte:

Formato Exemplo Resultado renderizado
Negrito **olá** ou __olá__ hello
Itálico *olá* ou _olá_ hello
Tachado ~hello~ hello
fonte monoespaçada `hello` hello
Bloco monoespaçado ```
Hello
World
```		 Hello
World
Lista com marcadores

- Este é o primeiro item da lista

- Este é o segundo item da lista
  • Este é o primeiro item da lista
  • Este é o segundo item da lista

* Este é o primeiro item da lista

* Este é o segundo item da lista
  • Este é o primeiro item da lista
  • Este é o segundo item da lista
Lista ordenada

1. Este é o primeiro item da lista

2. Este é o segundo item da lista
  1. Este é o primeiro item da lista
  2. Este é o segundo item da lista
Hiperlink [Exemplo de site](https://example.com) Exemplo de site

Adicionar ícones ao texto

Para mostrar ícones ao lado do texto em um card, use os widgets DecoratedText e ButtonList.

As seções a seguir explicam como usar ícones integrados, do Google Material ou ícones personalizados em textos ou botões decorados.

Usar ícones do Chat

Para usar um ícone integrado disponível no Chat, especifique uma das seguintes opções:

A tabela a seguir lista os ícones integrados disponíveis para mensagens de card:

AIRPLANE BOOKMARK
BUS CAR
RELÓGIO CONFIRMATION_NUMBER_ICON
DESCRIÇÃO DOLLAR
E-MAIL EVENT_SEAT
FLIGHT_ARRIVAL FLIGHT_DEPARTURE
HOTEL HOTEL_ROOM_TYPE
CONVIDAR MAP_PIN
MEMBROS MULTIPLE_PEOPLE
PERSON TELEFONE
RESTAURANT_ICON SHOPPING_CART
STAR LOJA
TICKET TREINAR
VIDEO_CAMERA VIDEO_PLAY

Veja a seguir um exemplo de card com um ícone de e-mail:

Usar ícones do Material Design

Você pode usar os ícones do Material Design do Google para escolher entre mais de 2.500 opções e personalizar o peso, o preenchimento e a classificação dos ícones.

Confira a seguir um exemplo de ficha de informações com um ícone do Material Design do Google:

Usar ícones personalizados

Para adicionar um ícone personalizado, inclua o campo iconUrl e especifique o URL correspondente do ícone.

Confira um exemplo de ícone personalizado: