Mensagens de formato

Nesta página, explicamos como os apps do Google Chat podem formatar texto para enviar mensagens que contenham o seguinte:

  • Rich text que contém hiperlinks ou @menções a 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 da interface que aparece ao lado de um ícone, como um botão.

Formatar uma mensagem de texto

Com o Chat, você pode adicionar formatação básica a uma mensagem de texto, incluindo negrito, itálico e tachado. Você formata o texto de maneira diferente em mensagens de texto e em mensagens de card porque as mensagens de texto são formatadas com a mesma sintaxe usada pelos usuários do Chat.

Para mensagens enviadas usando a API Chat, você pode continuar usando a sintaxe original do Chat ou a sintaxe padrão do Markdown (basta especificar markup_syntax no corpo da solicitação).

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 aninhada um na lista.

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

        * Este é o item com profundidade aninhada 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 aninhada 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 hello
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 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 de texto simples dela fica no campo text. Parte da formatação aplicada à mensagem de texto usando a sintaxe do Markdown está no campo text. A formatação adicional está no campo somente saída formattedText, incluindo o seguinte:

  • Sintaxe adicional de Markdown 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 usuário do chat, o campo text vai conter apenas o texto, enquanto o campo formattedText vai conter as marcações, o texto e o hiperlink. O exemplo a seguir mostra o rascunho de uma mensagem de texto com uma palavra hiperlinkada, 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 esse texto como o texto do link e criar um hiperlink automático para o URL especificado.

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

  • Para mensagens de API configuradas com Markdown, use a sintaxe padrão de link 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>

    A barra vertical e o texto do link são opcionais, de modo que <https://example.com> e https://example.com são equivalentes.

Usar emojis personalizados em uma mensagem de texto

Os apps de chat podem enviar mensagens de texto com emojis personalizados para personalizar as mensagens. Os emojis personalizados estão disponíveis apenas 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 emojis personalizados 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 do emoji personalizado. Você pode encontrar esse ID 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 shortcode do emoji personalizado.

Mencionar usuários em uma mensagem de texto

Os apps de 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 membros 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 aparece assim:

O app de chat menciona uma pessoa em uma mensagem de texto.

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

  • Se o app 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, é possível especificar 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, você poderá especificar o usuário como users/mahan@example.com. Para usar um alias de e-mail, seu app Google Chat precisa autenticar como um 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 de 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 da 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 de chat podem incluir citações em mensagens de texto para fornecer informações detalhadas da fonte aos usuários. Você pode fornecer fontes de duas maneiras:

  • Citações inline: adicione cards interativos que aparecem quando os usuários mantêm o ponteiro 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 compatíveis 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 fontes 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

Dentro dos 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 usada pelos usuários do Chat.

Use o Card Builder para criar e visualizar mensagens e interfaces de usuário para apps do Chat:

Abra o Card Builder

Formatar texto do parágrafo

As tags aceitas e a finalidade 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>." Isso é itálico.
Sublinhado "This is <u>underline</u>." Isso é sublinhado.
Tachado "This is <s>strikethrough</s>." Isso é 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>." Isto é 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 do Markdown está ativada, você pode usar a seguinte sintaxe:

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 [Site de exemplo](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, ícones do Google Material ou ícones personalizados em texto ou botões decorados.

Usar ícones do Chat

Para usar um dos ícones integrados disponíveis 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
MEMBERSHIP MULTIPLE_PEOPLE
PERSON TELEFONE
RESTAURANT_ICON SHOPPING_CART
STAR STORE
TICKET TREINAR
VIDEO_CAMERA VIDEO_PLAY

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

Usar ícones do Google Material

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 gradação dos ícones.

Confira 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: