En esta página, se explica cómo las apps de Google Chat pueden dar formato al texto para enviar mensajes que contengan cualquiera de los siguientes elementos:
- Texto enriquecido que contiene hipervínculos o @menciona a uno o a todos los usuarios de un espacio de chat.
- Texto que aparece en una interfaz de tarjeta, incluido el texto de párrafo o el texto de la IU que se muestra junto a un ícono, como un botón.
Cómo dar formato a un mensaje de texto
Chat te permite agregar formato básico a un mensaje de texto, como negrita, cursiva y tachado. El formato del texto en los mensajes de texto es diferente al de los mensajes de tarjeta, ya que los mensajes de texto se formatean con la misma sintaxis que usan los usuarios de Chat.
En el caso de los mensajes enviados con la API de Chat, puedes seguir usando la sintaxis original de Chat o usar la sintaxis estándar de Markdown (para ello, especifica markup_syntax en el cuerpo de la solicitud).
Para dar formato a los mensajes de texto, usa la siguiente sintaxis:
| Formato | MARKUP_SYNTAX_CHAT | MARKUP_SYNTAX_MARKDOWN | Ejemplo de sintaxis | Texto que se muestra en Google Chat |
|---|---|---|---|---|
| Negrita | * |
** |
o:
|
hola |
| Cursiva | _ (guion bajo) |
* |
o:
|
hola |
| Tachar | ~ |
~~ |
o:
|
|
| Monoespacio | ` (acento grave) | ` (acento grave) | `hello` | hello |
| Bloque monoespaciado | ` ` ` (tres comillas inversas) | ` ` ` (tres comillas inversas) | ``` Hello World ``` |
Hello |
| Lista con viñetas | * o - (guion) seguido de un espacio | * o - (guion) seguido de un espacio | * Este es el primer elemento de la lista. * Este es el segundo elemento de la lista. |
|
| Lista anidada | * o - (guion) seguido de un espacio, precedido de cuatro espacios por nivel de anidación | * o - (guion) seguido de un espacio, precedido de cuatro espacios por nivel de anidación | * Este es el elemento con una profundidad anidada de uno en la lista. * Este es el elemento con una profundidad anidada de dos en la lista. * Este es el elemento con una profundidad anidada de tres en la lista. |
|
| Lista numerada | No compatible | 1. (número seguido de un punto y un espacio) | 1. Este es el primer elemento de la lista. 2. Este es el segundo elemento de la lista. |
|
| Bloquear cita | > (signo mayor que) | > (signo mayor que) | >hola |
|
| Hipervínculo | <hyperlink|display text> |
[display text](hyperlink) |
o:
|
Para obtener más información sobre los hipervínculos, consulta Cómo dar formato a los vínculos. |
| Menciona a un usuario | <users/{user}>, donde {user} es el ID del usuario. |
o:
|
o:
|
@Mahan S Para obtener más información sobre cómo mencionar usuarios, consulta Cómo mencionar usuarios en un mensaje de texto. |
| Custom Emoji |
o:
|
o:
|
o:
o:
o:
|
🐱 (emoji personalizado de gato sonriente) |
| Cita | No compatible | <chat-citation data-id="{id}">{text}</chat-citation>, donde {id} es el ID de la cita definido en el mensaje elements. |
<chat-citation data-id="cite_1">cited text</chat-citation> |
texto citado Para obtener más información sobre las citas, consulta Cómo agregar citas a un mensaje de texto. |
hola
Por ejemplo, considera el siguiente JSON:
{
"text": "Your pizza delivery *has arrived*!\nThank you for using _Cymbal Pizza!_"
}
Este mensaje de texto con formato muestra lo siguiente en un espacio de Chat:
Cómo ver el formato de texto enviado en un mensaje
Cuando un usuario envía un mensaje, el cuerpo de texto sin formato del mensaje se encuentra en el campo text. En el campo text, se incluye el formato que se aplica al mensaje de texto con la sintaxis de Markdown. El formato adicional se encuentra en el campo formattedText de solo salida, que incluye lo siguiente:
- Sintaxis de Markdown adicional para el texto
- Menciones de usuarios
- Hipervínculos personalizados
- Emojis personalizados
Por ejemplo, considera el siguiente texto que envió un usuario:
Si el mensaje se formateó con el menú Formato de la IU de chat, el campo text contiene solo el texto, mientras que el campo formattedText contiene las marcas, el texto y el hipervínculo. En el siguiente ejemplo, se muestra el borrador de un mensaje de texto con una palabra hipervinculada, elementos en una lista y una palabra en negrita:
El mensaje se recibe en el siguiente 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*?",
}
Cómo dar formato a los vínculos
Si incluyes una URL de vínculo simple en el texto de tu mensaje, como http://www.example.com/, Google Chat la usará como texto del vínculo y creará automáticamente un hipervínculo a la URL especificada.
Para proporcionar texto alternativo para tu vínculo, usa la siguiente sintaxis:
En el caso de los mensajes de la API configurados con Markdown, usa la sintaxis estándar de vínculos de Markdown:
Ejemplo de sintaxis Texto que se muestra en Google Chat [Example website](https://example.com)Para los mensajes de texto sin formato estándares, usa la sintaxis de barra vertical:
Ejemplo de sintaxis Texto que se muestra en Google Chat <https://example.com|Example website>La barra vertical y el texto del vínculo son opcionales, por lo que
<https://example.com>yhttps://example.comson equivalentes.
Cómo usar emojis personalizados en un mensaje de texto
Las apps de chat pueden enviar mensajes de texto con emojis personalizados para personalizar los mensajes. Los emojis personalizados solo están disponibles para las organizaciones de Google Workspace, y el administrador debe activarlos para la organización. Para obtener más información, consulta Más información sobre los emojis personalizados en Google Chat y Cómo administrar los permisos de los emojis personalizados.
Para crear mensajes con emojis personalizados, tu app debe usar la autenticación de usuarios. Los emojis personalizados no son compatibles con los mensajes creados como webhook ni con los mensajes creados con autenticación de la app.
Para agregar emojis personalizados al texto de un mensaje, especifica el name o el emoji_name del recurso customEmoji:
{
"text": "Hello <customEmojis/CUSTOM_EMOJI_ID>."
}
Para usar este ejemplo, reemplaza CUSTOM_EMOJI_ID por el ID del emoji personalizado. Puedes encontrar este ID en el campo name o emoji_name del recurso customEmoji.
Si tu app envía mensajes con la sintaxis de Markdown, puedes especificar emojis personalizados en formato de etiqueta HTML con el ID del emoji personalizado:
{
"text": "Hello <chat-emoji data-custom-emoji=\"customEmojis/CUSTOM_EMOJI_ID\">."
}
O bien, puedes especificar el nombre del emoji personalizado:
{
"text": "Hello <chat-emoji data-emoji-name=\"CUSTOM_EMOJI_NAME\">."
}
Para usar estos ejemplos, reemplaza CUSTOM_EMOJI_ID por el ID del emoji personalizado y CUSTOM_EMOJI_NAME por el nombre del código corto del emoji personalizado.
Cómo mencionar usuarios en un mensaje de texto
Las apps de Chat pueden enviar mensajes de texto que @mencionen a uno o a todos los usuarios de un espacio de Chat. Las apps de Chat también pueden mencionar a usuarios que no se unieron al espacio o que son miembros de un espacio en modo de importación.
Los mensajes silenciosos no admiten menciones de usuarios. Incluir una mención en un mensaje silencioso devuelve un error.
@mencionar a usuarios específicos
Para mencionar a un usuario específico, agrega <users/{user}> al mensaje de texto, donde {user} es el ID del usuario. Por ejemplo, considera el siguiente mensaje de texto en el que 123456789012345678901 representa el ID del usuario Mahan S.:
{
"text": "A customer has reported an issue. Assigning ticket #942 to <users/123456789012345678901>."
}
Si tu app envía mensajes con la sintaxis de Markdown, usa el formato de la etiqueta HTML chat-user para especificar el ID del usuario:
{
"text": "Assigning ticket #942 to <chat-user data-user=\"users/123456789012345678901\">."
}
También puedes especificarlo por correo electrónico:
{
"text": "Assigning ticket #942 to <chat-user data-email=\"mahan@example.com\">."
}
El mensaje de texto se muestra de la siguiente manera:
Puedes especificar el valor de users/{user} de las siguientes maneras:
- Si tu app de Google Chat responde a un mensaje enviado por el usuario, puedes usar el campo
message.sender.namedel evento de interacciónMESSAGE. Si tu app de Google Chat crea un mensaje de texto asíncrono, puedes especificar el valor de
users/{user}de las siguientes maneras:- Usa el campo
namedel recursoUserde Google Chat, comousers/123456789012345678901. - Usa la dirección de correo electrónico del usuario como alias para el valor de
{user}. Por ejemplo, si la dirección de correo electrónico esmahan@example.com, puedes especificar el usuario comousers/mahan@example.com. Para usar un alias de correo electrónico, tu app de Google Chat debe autenticarse como usuario.
- Usa el campo
Si usas la API de People, también puedes usar el método
people.getpara identificar el ID del usuario.
@menciona a todos los usuarios
Para crear un mensaje de texto en el que se @mencione a todas las personas de un espacio, reemplaza {user} por all. En el siguiente ejemplo de JSON, se menciona a todos los usuarios en un mensaje:
{
"text": "Important message for <users/all>: Code freeze starts at midnight tonight!"
}
Si tu app envía mensajes con la sintaxis de Markdown, especifica la mención con el formato de la etiqueta HTML chat-user:
{
"text": "Important message for <chat-user data-user=\"users/all\">: Code freeze starts at midnight tonight!"
}
Cómo agregar citas a un mensaje de texto
Las apps de chat pueden incluir citas en los mensajes de texto para proporcionar información detallada de las fuentes a los usuarios. Puedes proporcionar fuentes de dos maneras:
- Citas intercaladas: Agrega tarjetas interactivas que aparecen cuando los usuarios mantienen el puntero sobre partes específicas del texto de tu mensaje.
- Fuentes del pie de página: Muestra una lista de fuentes en la parte inferior del mensaje como vínculos de pie de página.
Las citas solo se admiten cuando el markupSyntax del mensaje se establece en MARKUP_SYNTAX_MARKDOWN. Esta función solo se admite a través de la creación de mensajes asíncronos con la API de Chat.
Para agregar citas intercaladas a un mensaje, haz lo siguiente:
- Proporciona las fuentes en la lista
citationsdel mensajeelementsy asigna unidúnico a cada objetoCitation. - En el texto del mensaje, incluye el texto que deseas citar con el formato de etiqueta HTML
chat-citation:<chat-citation data-id="{id}">{text}</chat-citation>. Asegúrate de que{id}coincida con el ID que definiste enelements. Se ignoran las citas sin referencia (aquellas que no tienen una etiqueta coincidente).
{
"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 agregar fuentes de pie de página a un mensaje, proporciona las fuentes en la lista citedSources del mensaje elements. Las fuentes que se proporcionan aquí aparecen automáticamente debajo del mensaje como vínculos de pie de página y no requieren etiquetas intercaladas en el texto del mensaje.
{
"text": "This is a message with a footer source.",
"markupSyntax": "MARKUP_SYNTAX_MARKDOWN",
"elements": {
"citedSources": [
{
"title": "Example Source",
"uri": "https://example.com"
}
]
}
}
Cómo dar formato al texto que aparece en las tarjetas
Dentro de las tarjetas, la mayoría de los campos de texto admiten el formato de texto básico con un pequeño subconjunto de etiquetas HTML. El formato del texto en los mensajes de tarjeta es diferente al de los mensajes de texto, ya que estos últimos se formatean con la misma sintaxis que usan los usuarios de Chat.
Usa Card Builder para diseñar y obtener una vista previa de las interfaces de usuario y los mensajes de las apps de Chat:
Abrir Card BuilderCómo dar formato al texto de un párrafo
En la siguiente tabla, se muestran las etiquetas admitidas y su propósito:
| Formato | Ejemplo | Resultado renderizado |
|---|---|---|
| Negrita | "This is <b>bold</b>." |
Esto está en negrita. |
| Cursiva | "This is <i>italics</i>." |
Esto está en cursiva. |
| Subrayar | "This is <u>underline</u>." |
Esto es subrayado. |
| Tachar | "This is <s>strikethrough</s>." |
Este texto está |
| Color de la fuente | "This is <font color=\"#FF0000\">red font</font>." |
Esta es una fuente roja. |
| Hipervínculo | "This is a <a href=\"https://www.google.com\">hyperlink</a>." |
Este es un hipervínculo. |
| Hora | "This is a time format: <time>2023-02-16 15:00</time>." |
Este es un formato de fecha y hora: . |
| Nueva línea | "This is the first line. <br> This is a new line." |
Esta es la primera línea. Esta es una línea nueva. |
Para definir listas y bloques de código, usa las siguientes etiquetas:
| Formato | Ejemplo | Resultado renderizado |
|---|---|---|
| Nueva línea | "Line 1<br>Line 2" |
Línea 1 Línea 2 |
| Monoespacio | "This is an <code>inline code</code>." |
Esto es un inline code. |
| Bloque monoespaciado | "<pre><code>This a code block.</code></pre>" |
|
| Lista con viñetas | "<ul><li>List item 1</li><li>List item 2</li></ul>" |
|
| Lista ordenada | "<ol><li>List item 1</li><li>List item 2</li></ol>" |
|
Markdown
Cuando la sintaxis de Markdown está activada, puedes usar la siguiente sintaxis:
| Formato | Ejemplo | Resultado renderizado |
|---|---|---|
| Negrita | **hola** o __hola__ | hola |
| Cursiva | *hola* o _hola_ | hola |
| Tachar | ~hola~ | |
| Monoespacio | `hello` | hello |
| Bloque monoespaciado | ``` Hello World ``` |
Hello |
| Lista con viñetas | - Este es el primer elemento de la lista. - Este es el segundo elemento de la lista. |
|
|
* Este es el primer elemento de la lista. * Este es el segundo elemento de la lista. |
|
|
| Lista ordenada | 1. Este es el primer elemento de la lista. 2. Este es el segundo elemento de la lista. |
|
| Hipervínculo | [Sitio web de ejemplo](https://example.com) | Ejemplo de sitio web |
Cómo agregar íconos al texto
Para mostrar íconos junto al texto en una tarjeta, puedes usar los widgets DecoratedText y ButtonList.
En las siguientes secciones, se explica cómo usar íconos integrados, íconos de Google Material o íconos personalizados en texto decorado o botones.
Cómo usar íconos de Chat
Para usar uno de los íconos integrados disponibles en Chat, especifica uno de los siguientes:
En la siguiente tabla, se enumeran los íconos integrados que están disponibles para los mensajes de tarjetas:
| AIRPLANE | BOOKMARK | ||
| BUS | CAR | ||
| RELOJ | CONFIRMATION_NUMBER_ICON | ||
| DESCRIPCIÓN | MONEDA | ||
| CORREO ELECTRÓNICO | EVENT_SEAT | ||
| FLIGHT_ARRIVAL | FLIGHT_DEPARTURE | ||
| HOTEL | HOTEL_ROOM_TYPE | ||
| INVITAR | MAP_PIN | ||
| MEMBRESÍA | MULTIPLE_PEOPLE | ||
| PERSON | TELÉFONO | ||
| RESTAURANT_ICON | SHOPPING_CART | ||
| STAR | STORE | ||
| TICKET | TRAIN | ||
| VIDEO_CAMERA | VIDEO_PLAY |
A continuación, se muestra un ejemplo de una tarjeta con un ícono de correo electrónico:
Cómo usar íconos de Material de Google
Puedes usar los íconos de Google Material para elegir entre más de 2, 500 opciones de íconos y personalizar el peso, el relleno y el grado de los íconos.
A continuación, se muestra un ejemplo de una tarjeta con un ícono de material de Google:
Usa íconos personalizados
Para agregar un ícono personalizado, incluye el campo iconUrl y especifica la URL correspondiente del ícono.
A continuación, se muestra un ejemplo de un ícono personalizado: