Para evitar el cambio de contexto cuando los usuarios comparten un vínculo en Google Chat, tu app de Chat puede obtener una vista previa del vínculo adjuntando una tarjeta al mensaje que brinde más información y permita que los usuarios realicen acciones directamente desde Google Chat.
Por ejemplo, imagina un espacio de Google Chat que incluya a todos los agentes de atención al cliente de una empresa y una app de Chat llamada Case-y. Con frecuencia, los agentes comparten vínculos a casos de atención al cliente en el espacio de Chat y, cada vez que lo hacen, sus colegas deben abrir el vínculo del caso para ver detalles como el destinatario, el estado y el asunto. Del mismo modo, si alguien quiere hacerse cargo de un caso o cambiar el estado, deberá abrir el vínculo.
La vista previa de vínculos permite que la app de Chat residente del espacio, Case-y, adjunte una tarjeta que muestre al destinatario, el estado y el asunto cada vez que alguien comparta el vínculo de un caso. Los botones de la tarjeta permiten que los agentes se hagan cargo del caso y cambien el estado directamente desde el flujo del chat.
Cómo funciona la vista previa de vínculos
Cuando alguien agrega un vínculo a su mensaje, aparece un chip que le informa que una app de Chat podría obtener una vista previa del vínculo.
Después de enviar el mensaje, el vínculo se envía a la app de Chat, que genera y adjunta la tarjeta al mensaje del usuario.
Junto al vínculo, la tarjeta proporciona información adicional sobre el vínculo, incluidos elementos interactivos como botones. Tu app de Chat puede actualizar la tarjeta adjunta en respuesta a las interacciones del usuario, como los clics en botones.
Si alguien no desea que la app de Chat adjunte una tarjeta al mensaje para obtener una vista previa del vínculo, puede hacer clic en
en el chip correspondiente para evitar que se muestre la vista previa. Los usuarios pueden quitar la tarjeta adjunta en cualquier momento haciendo clic en Quitar vista previa.Cómo configurar las vistas previas de los vínculos
Registra vínculos específicos, como example.com
, support.example.com
y support.example.com/cases/
, como patrones de URL en la página de configuración de tu app de Chat en la consola de Google Cloud para que tu app de Chat pueda obtener una vista previa de ellos.
- Abre la consola de Google Cloud
- Junto a “Google Cloud”, haz clic en la flecha hacia abajo y abre el proyecto de tu app de Chat.
- En el campo de búsqueda, escribe
Google Chat API
y haz clic en Google Chat API. - Haz clic en Administrar > Configuración.
- En Vistas previas de vínculos, agrega o edita un patrón de URL.
- Si deseas configurar las vistas previas de los vínculos para un patrón de URL nuevo, haz clic en Agregar patrón de URL.
- Para editar la configuración de un patrón de URL existente, haz clic en la flecha hacia abajo .
En el campo Patrón de host, ingresa el dominio del patrón de URL. La app de Chat mostrará una vista previa de los vínculos a este dominio.
Para que la app de Chat obtenga una vista previa de los vínculos de un subdominio específico, como
subdomain.example.com
, incluye el subdominio.Para que la app de Chat tenga una vista previa de los vínculos de todo el dominio, especifica un carácter comodín y un asterisco (*) como subdominio. Por ejemplo,
*.example.com
coincide consubdomain.example.com
yany.number.of.subdomains.example.com
.En el campo Prefijo de la ruta de acceso, ingresa una ruta para adjuntar al dominio del patrón de host.
Para que todas las URLs del dominio del patrón de host coincidan, deja el Prefijo de la ruta de acceso vacío.
Por ejemplo, si el patrón del host es
support.example.com
, ingresacases/
para que coincida con las URLs de los casos alojados ensupport.example.com/cases/
.Haz clic en Listo.
Haz clic en Guardar.
Ahora, cada vez que alguien incluya un vínculo que coincida con un patrón de URL de vista previa del vínculo con un mensaje en un espacio de Chat que incluya tu app de Chat, la app obtendrá una vista previa del vínculo.
Cómo obtener una vista previa de un vínculo
Después de configurar la vista previa de un vínculo determinado, tu app de Chat puede reconocerlo y obtener una vista previa si le adjunta más información.
Dentro de los espacios de Chat que incluyen tu
app de Chat, cuando el mensaje de alguien contiene un vínculo que
coincide con un patrón de URL de vista previa del vínculo, la app de Chat
recibe un
evento de interacción MESSAGE
. La carga útil
JSON del evento de interacción contiene el campo matchedUrl
:
JSON
message {
. . . // other message attributes redacted
"matchedUrl": {
"url": "https://support.example.com/cases/case123"
},
. . . // other message attributes redacted
}
Si verificas la presencia del campo matchedUrl
en la carga útil del evento MESSAGE
, tu app de Chat puede agregar información al mensaje con el vínculo de la vista previa. Tu app de Chat puede
responder con un mensaje de texto simple o adjuntar una tarjeta.
Responder con un mensaje de texto
Para obtener respuestas simples, tu app de Chat puede obtener una vista previa de un vínculo si responde con un mensaje de texto simple a un vínculo. En este ejemplo, se adjunta un mensaje que repite la URL del vínculo que coincide con un patrón de URL de vista previa del vínculo.
Node.js
Apps Script
Adjuntar una tarjeta
Para adjuntar una tarjeta a un vínculo de la vista previa, muestra una ActionResponse
de tipo UPDATE_USER_MESSAGE_CARDS
. En este ejemplo, se adjunta una tarjeta simple.
Node.js
Apps Script
Actualizar una tarjeta
Para actualizar la tarjeta adjunta a un vínculo de la vista previa, muestra un ActionResponse
de tipo UPDATE_USER_MESSAGE_CARDS
. Las apps de chat solo pueden actualizar tarjetas que obtengan una vista previa de los vínculos como respuesta a un evento de interacción con la app de Chat.
Las apps de Chat no pueden actualizar estas tarjetas llamando a la API de Chat de forma asíncrona.
La vista previa de vínculos no permite mostrar un ActionResponse
de tipo UPDATE_MESSAGE
. Dado que UPDATE_MESSAGE
actualiza todo el mensaje en lugar de solo la tarjeta, solo funciona si la app de Chat creó el mensaje original. La vista previa de vínculos adjunta una tarjeta a un mensaje creado por el usuario, por lo que la app de Chat no tiene permiso para actualizarla.
Para garantizar que una función actualice las tarjetas creadas por usuarios y apps en la transmisión de Chat, configura ActionResponse
de forma dinámica en función de si la app de Chat o un usuario crearon el mensaje.
- Si un usuario creó el mensaje, establece
ActionResponse
enUPDATE_USER_MESSAGE_CARDS
. - Si una app de Chat creó el mensaje, establece
ActionResponse
enUPDATE_MESSAGE
.
Existen dos maneras de hacerlo: puedes especificar y verificar una actionMethodName
personalizada como parte de la propiedad onclick
de la tarjeta adjunta (que identifica el mensaje como creado por el usuario) o verificar si un usuario creó el mensaje.
Opción 1: Busca actionMethodName
Si deseas usar actionMethodName
para controlar correctamente los eventos de interacción de CARD_CLICKED
en las tarjetas con vista previa, establece una actionMethodName
personalizada como parte de la propiedad onclick
de la tarjeta adjunta:
JSON
. . . // Preview card details
{
"textButton": {
"text": "ASSIGN TO ME",
"onClick": {
// actionMethodName identifies the button to help determine the
// appropriate ActionResponse.
"action": {
"actionMethodName": "assign",
}
}
}
}
. . . // Preview card details
Si "actionMethodName": "assign"
identifica el botón como parte de la vista previa de un vínculo, es posible mostrar el ActionResponse
correcto de forma dinámica si se verifica un actionMethodName
que coincida:
Node.js
Apps Script
Opción 2: Verifica el tipo de remitente
Verifica si message.sender.type
es HUMAN
o BOT
. Si es HUMAN
, establece ActionResponse
en UPDATE_USER_MESSAGE_CARDS
; de lo contrario, establece ActionResponse
en UPDATE_MESSAGE
. Aquí te indicamos cómo hacerlo:
Node.js
Apps Script
Un motivo típico para actualizar una tarjeta es en respuesta a un clic en un botón. Recuerda el botón Asignar a mí de la sección anterior, Adjuntar una tarjeta. En el siguiente ejemplo completo, se actualiza la tarjeta para que indique que se asigna a "Tú" después de que un usuario hace clic en Asignar a mí. En el ejemplo, se verifica el tipo de remitente para establecer ActionResponse
de forma dinámica.
Ejemplo completo: Case-y, la app de Chat de atención al cliente
Este es el código completo de Case-y, una app de chat que muestra una vista previa de los vínculos a los casos compartidos en un espacio de Chat en el que colaboran los agentes de atención al cliente.
Node.js
Apps Script
Límites y consideraciones
Cuando configures las vistas previas de vínculos para tu app de Chat, ten en cuenta estos límites y consideraciones:
- Cada app de Chat admite vistas previas de vínculos de hasta 5 patrones de URL.
- Las apps de chat tienen una vista previa de un vínculo por mensaje. Si en un solo mensaje hay varios vínculos con vista previa, solo se mostrará la vista previa del primer vínculo.
- Las apps de chat solo tienen una vista previa de los vínculos que comienzan con
https://
, por lo quehttps://support.example.com/cases/
tiene vistas previas, perosupport.example.com/cases/
no. - A menos que el mensaje incluya otra información que se envía a la app de Chat, como un comando de barra, solo la URL del vínculo se envía a la app de Chat mediante vistas previas de vínculos.
- Las tarjetas adjuntas a vínculos de vista previa solo admiten un
ActionResponse
de tipoUPDATE_USER_MESSAGE_CARDS
y solo en respuesta a un evento de interacción con la app de Chat. Las vistas previas de vínculos no admitenUPDATE_MESSAGE
ni solicitudes asíncronas para actualizar tarjetas adjuntas a un vínculo de vista previa mediante la API de Chat. Para obtener más información, consulta Cómo actualizar una tarjeta.
Cómo depurar vistas previas de vínculos
Cuando implementes vistas previas de vínculos, es posible que debas leer sus registros para depurar tu app de Chat. Para leer los registros, visita el Explorador de registros en la consola de Google Cloud.