Google utiliza tecnología de IA para traducir contenido a tu idioma preferido. Las traducciones realizadas con IA pueden contener errores.

Dar formato a los mensajes

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 @menciones a uno o todos los usuarios de un espacio de Chat.
Es el 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 porque los mensajes de texto tienen el mismo formato que la sintaxis que usan los usuarios de Chat.

En el caso de los mensajes enviados o recuperados con la API de Chat, puedes usar la sintaxis de Markdown estándar (MARKUP_SYNTAX_MARKDOWN) o la sintaxis de lenguaje de marcado de Chat (MARKUP_SYNTAX_CHAT). Puedes configurar una sintaxis de lenguaje de marcado predeterminada a nivel de la app en la consola de Google Cloud (consulta Configura la API de Google Chat):

Markdown: Sintaxis de Markdown estándar (MARKUP_SYNTAX_MARKDOWN), basada en la especificación de CommonMark con extensiones adicionales. Las apps de Chat recién creadas se establecen de forma predeterminada en Markdown.
Chat: Sintaxis de lenguaje de marcado de Chat (MARKUP_SYNTAX_CHAT). Las apps de Chat existentes se establecen de forma predeterminada en Chat para preservar la retrocompatibilidad.

También puedes especificar markup_syntax en solicitudes individuales a la API de Chat para anular el valor predeterminado a nivel de la app. Cuando no se especifica markup_syntax en una solicitud a la API, el lenguaje de marcado se establece según cómo llames a la API de Chat:

Apps de Chat configuradas: Usa la sintaxis de lenguaje de marcado guardada en la página de configuración de la API de Chat.
Proyectos de Cloud sin configurar (sin configuración): Si tu proyecto de Cloud llama a la API de Chat sin una configuración de app de Chat guardada, las solicitudes se establecen de forma predeterminada en MARKUP_SYNTAX_MARKDOWN.
Webhooks entrantes: El valor predeterminado es MARKUP_SYNTAX_CHAT. Consulta Envía mensajes con webhooks entrantes.

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	`*`	`**`	`hello` o: `hello`	hola
Cursiva	`_` (guion bajo)	`*`	`_hello_` o: `hello`	hola
Tachar	`~`	`~~`	`~hello~` o: `~~hello~~`	~~hola~~
Monoespacio	` (comilla invertida)	` (comilla invertida)	"hello"	`hello`
Bloque monoespaciado	` ` ` (tres comillas simples)	` ` ` (tres comillas simples invertidas)	``` Hello World ```	`Hello World`
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.	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 por cuatro espacios por nivel de anidamiento	* o - (guion) seguido de un espacio, precedido por cuatro espacios por nivel de anidamiento	* Este es el elemento con un nivel de anidamiento en la lista. * Este es el elemento con profundidad de anidamiento dos en la lista. * Este es el elemento con profundidad de anidamiento tres en la lista.	Este es el elemento con profundidad de anidamiento uno en la lista. Este es el elemento con profundidad de anidamiento dos en la lista. Este es el elemento con profundidad de anidamiento 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.	Este es el primer elemento de la lista. Este es el segundo elemento de la lista.
Bloquear cita	> (signo mayor que)	> (signo mayor que)	>hello	hello
Hipervínculo	`<hyperlink\|display text>`	`[display text](hyperlink)`	`<https://example.com\|Example website>` o: `[Example website](https://example.com)`	Sitio web de ejemplo Para obtener más información sobre los hipervínculos, consulta Cómo dar formato a los vínculos.
Mencionar usuario	`<users/{user}>`, donde `{user}` es el ID de usuario.	`<chat-user data-user="users/{user}">` o: `<chat-user data-email="{email}">`	`<users/123456789012345678901>` o `<users/all>` o: `<chat-user data-user="users/123456789012345678901">`, `<chat-user data-user="users/all">` o `<chat-user data-email="email@example.com">`	@Mahan S Para obtener más información sobre cómo mencionar usuarios, consulta Menciona usuarios en un mensaje de texto.
Custom Emoji	`<customEmojis/{uid}>` o: `<customEmojis/:{name}:>`	`<chat-emoji data-custom-emoji="customEmojis/{uid}">` o: `<chat-emoji data-emoji-name=":{name}:">`	`<customEmojis/abc-123-def>` o: `<customEmojis/:smiley-cat:>` o: `<chat-emoji data-custom-emoji="customEmojis/abc-123-def">` o: `<chat-emoji data-emoji-name=":smiley-cat:">`	🐱 (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.

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:

La app de Cymbal Pizza envía un mensaje de texto que indica que llegó el pedido.

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. Parte del formato que se aplica al mensaje de texto con la sintaxis de Markdown se encuentra en el campo text. El formato adicional se encuentra en el campo formattedText de solo salida, que incluye lo siguiente:

Sintaxis de Markdown adicional para texto
Menciones de usuarios
Hipervínculos personalizados
Emojis personalizados

Por ejemplo, considera el siguiente texto que envió un usuario:

Mensaje recibido en Chat con la palabra

Si el mensaje se formateó con el menú Formato en la IU de Chat, el campo text solo contiene 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 con hipervínculo, elementos en una lista y una palabra en negrita:

Borrador de mensaje con la palabra

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*?",
    }

Vínculos de formato

Si incluyes una URL de vínculo simple en el texto del mensaje, como http://www.example.com/, Google Chat la usa como texto del vínculo y crea automáticamente un hipervínculo de ese texto a la URL especificada.

Para proporcionar un texto alternativo para tu vínculo, usa la siguiente sintaxis:

Para los mensajes de la API configurados con Markdown, usa la sintaxis de vínculo de Markdown estándar:

Ejemplo de sintaxis Texto que se muestra en Google Chat

[Example website](https://example.com)
Example website
Para los mensajes de texto sin formato estándar, usa la sintaxis de barra vertical:

Ejemplo de sintaxis Texto que se muestra en Google Chat

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

La barra vertical y el texto del vínculo son opcionales, por lo que <https://example.com> y https://example.com son equivalentes.

Ejemplo de sintaxis	Texto que se muestra en Google Chat
`[Example website](https://example.com)`	Example website

Ejemplo de sintaxis	Texto que se muestra en Google Chat
`<https://example.com\|Example website>`	Example website

Cómo usar emojis personalizados en un mensaje de texto

Las apps de Chat pueden enviar mensajes de texto con emojis personalizados para darles un toque personal. 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 Administra 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 se admiten en los mensajes creados como un webhook ni en los mensajes creados con la autenticación de la app.

Para agregar un emoji personalizado al texto de un mensaje, especifica el name o 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 a usuarios en un mensaje de texto

Las apps de Chat pueden enviar mensajes de texto que @mencionen a uno o 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 que está en modo de importación.

Los mensajes silenciosos no admiten la mención de usuarios. Si se incluye una mención en un mensaje silencioso, se devuelve un error.

Mencionar a usuarios específicos con @

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 etiqueta HTML chat-user para especificar el ID de usuario:

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

O bien, especifica 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:

La app de Chat menciona a una persona en un mensaje de texto.

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.name del evento de interacción MESSAGE.
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 name del recurso User de Google Chat, como users/123456789012345678901.
- Usa la dirección de correo electrónico del usuario como alias para el valor {user}. Por ejemplo, si la dirección de correo electrónico es mahan@example.com, puedes especificar el usuario como users/mahan@example.com. Para usar un alias de correo electrónico, tu app de Google Chat debe autenticarse como usuario.
Si usas la API de People, también puedes usar el método people.get para identificar el ID de usuario.

Mencionar a todos los usuarios con @

Para crear un mensaje de texto que @mencione a todos los miembros de un espacio, reemplaza {user} por all. En el siguiente ejemplo de JSON, se mencionan 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 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 la fuente 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 al pie de página: Muestra una lista de fuentes en la parte inferior del mensaje como vínculos al 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 asíncrona de mensajes con la API de Chat.

Para agregar citas intercaladas a un mensaje, sigue estos pasos:

Proporciona las fuentes en la lista citations del mensaje elements y asigna un id único a cada objeto Citation.
En el texto del mensaje, encierra el texto que quieras citar con el formato de etiqueta HTML chat-citation: <chat-citation data-id="{id}">{text}</chat-citation>. Asegúrate de que el {id} coincida con el ID que definiste en el elements. 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 al pie de página a un mensaje, proporciona las fuentes en la lista citedSources del mensaje elements. Todas las fuentes que se proporcionen aquí aparecerán 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 el Creador de tarjetas para diseñar y obtener una vista previa de los mensajes y las interfaces de usuario de las apps de Chat:

Abre el Card Builder

Cómo dar formato al texto de un párrafo

Las etiquetas admitidas y su propósito se muestran en la siguiente tabla:

Formato	Ejemplo	Resultado renderizado
Negrita	`"This is <b>bold</b>."`	Este texto está en negrita.
Cursiva	`"This is <i>italics</i>."`	Este texto está en cursiva.
Subrayar	`"This is <u>underline</u>."`	Este es un texto subrayado.
Tachar	`"This is <s>strikethrough</s>."`	Este es un texto ~~tachado~~.
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 hora: 2023-02-16 15:00.
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>."`	Este es un `inline code`.
Bloque monoespaciado	`"<pre><code>This a code block.</code></pre>"`	`This is a code block.`
Lista con viñetas	`"<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>"`	List item 1 List item 2

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~	~~hola~~
Monoespacio	`hello`	`hello`
Bloque monoespaciado	``` Hello World ```	`Hello World`
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 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	Este es el primer elemento de la lista Este es el segundo elemento de la lista
Hipervínculo	[Sitio web de ejemplo](https://example.com)	Sitio web de ejemplo

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 o botones decorados.

Usa íconos de Chat

Para usar un ícono integrado disponible en Chat, especifica uno de los siguientes:

En la siguiente tabla, se enumeran los íconos integrados que están disponibles para los mensajes de tarjeta:

	AIRPLANE		BOOKMARK
	BUS		CAR
	RELOJ		CONFIRMATION_NUMBER_ICON
	DESCRIPCIÓN		DÓLAR
	CORREO ELECTRÓNICO		EVENT_SEAT
	FLIGHT_ARRIVAL		FLIGHT_DEPARTURE
	HOTEL		HOTEL_ROOM_TYPE
	INVITAR		MAP_PIN
	MEMBRESÍA		MULTIPLE_PEOPLE
	PERSONA		TELÉFONO
	RESTAURANT_ICON		SHOPPING_CART
	STAR		STORE
	TICKET		ENTRENAMIENTO
	VIDEO_CAMERA		VIDEO_PLAY

A continuación, se muestra un ejemplo de una tarjeta con un ícono de correo electrónico:

Usa íconos de material de Google

Puedes usar los íconos de material de Google para seleccionar entre más de 2, 500 opciones de íconos y personalizar el grosor, 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: