Presentación de listas como tarjetas

Cada vez que un agente de REDA AI necesita mostrar una lista de registros en el chat — casos abiertos, horarios disponibles, resultados de búsqueda, líneas de detalle — presenta la lista como una pila de tarjetas nativas: un título en negrita, metadatos de apoyo, insignias de estado opcionales con colores y un botón de acción opcional en cada tarjeta. Las tarjetas funcionan de forma coherente en todas las superficies de chat (Lightning interno, Experience Cloud y widgets de sitios web externos), de modo que la experiencia se siente igual tanto si el usuario ha iniciado sesión en Salesforce como si conversa desde tu sitio público.

Qué muestra una tarjeta

Cada tarjeta de una lista se compone de:

• Título — la etiqueta más identificativa (nombre del registro, asunto del caso, descripción del horario).
• Subtítulo — línea secundaria, normalmente un número de registro más una fecha.
• Fotos y video (opcional) — una o varias imágenes y, opcionalmente, un enlace a un video o a un recorrido virtual, mostrados como un control deslizante en la parte superior de la tarjeta. Consulta Fotos y video más abajo.
• Insignias — pequeñas píldoras de color para el estado, la prioridad, el tipo, etc. La paleta de colores es fija: info (azul de marca), success (verde), warning (ámbar), danger (rojo) o neutral (gris). Mantén las etiquetas cortas.
• Cuerpo (opcional) — una descripción de una línea para las tarjetas en las que el título por sí solo no aporta suficiente contexto.
• Botón de acción (opcional) — una etiqueta en la que se puede hacer clic, como “Mostrar detalles del caso 00001137” o “Agendar para las 10:00”. Cuando el usuario hace clic en ella, la etiqueta se envía de vuelta al chat como su siguiente mensaje — por lo que la etiqueta de acción es también el prompt que recibe el agente. Esto significa que las etiquetas de acción deben ser expresiones autónomas, no verbos genéricos como “Ver”.

Las listas tienen un límite de 10 tarjetas por respuesta. Si el agente tiene más resultados, resume el resto en prosa después de la lista de tarjetas y ofrece acotar la búsqueda.

Fotos y video

Las tarjetas pueden incluir elementos visuales. Cuando un registro tiene fotos — las imágenes de una propiedad, la foto de un producto, la vista de una habitación o de un sitio — el agente puede mostrarlas como un control deslizante multimedia en la parte superior de la tarjeta, encima del título y los detalles. Esto convierte una simple lista de resultados en una galería rica y fácil de revisar, de modo que el usuario puede evaluar un anuncio de un vistazo en lugar de hacer clic hasta llegar a un registro.

• Una foto se muestra como una única imagen de banner en la tarjeta.
• Varias fotos se convierten en un control deslizante que se desliza con el dedo, con un pequeño contador en la esquina (por ejemplo, “4”) que indica cuántas hay.
• El video y los recorridos virtuales se muestran como un mosaico de reproducción. Al seleccionarlo, se abre el video o el recorrido en una nueva pestaña del navegador — esto funciona para un archivo de video alojado, un enlace de YouTube o Vimeo, o un recorrido virtual estilo Matterport.
• Primero van las fotos y luego los mosaicos de video, todo en el mismo control deslizante. Una sola tarjeta admite hasta 10 elementos multimedia en total.

Desplazarse por el control deslizante

Los usuarios navegan de la manera que resulte natural para su dispositivo — ambos métodos están siempre disponibles:

• En una computadora — los botones de flecha izquierda y derecha se ubican sobre el control deslizante; un clic avanza una imagen a la vez y da la vuelta al llegar a los extremos.
• En pantallas táctiles y en la aplicación móvil de Salesforce — los usuarios simplemente deslizan hacia la izquierda y hacia la derecha, y cada deslizamiento encaja perfectamente en la siguiente imagen. Los botones de flecha también están presentes, con áreas de toque más grandes y adaptadas al dedo.

El control deslizante se comporta de forma idéntica en el chat interno de Salesforce, el widget de Comunidad y el widget del sitio web. (El canal de API sin interfaz no tiene ninguna interfaz de usuario, por lo que no muestra tarjetas ni contenido multimedia — consulta Dónde se muestran las tarjetas.)

Asegurarte de que las imágenes se muestren

Para que las fotos aparezcan dentro del chat interno de Salesforce, la dirección web de cada imagen debe cumplir dos condiciones:

• Debe servirse mediante HTTPS (una dirección https:// segura). Las direcciones no seguras (http://) o que no son web se ignoran de forma segura, y la tarjeta se sigue mostrando sin esa imagen.
• Su dominio debe estar aprobado por la política de seguridad de contenido de Salesforce. Las imágenes alojadas en Salesforce Files y en servicios de imágenes comunes (por ejemplo, Cloudinary) ya están aprobadas de forma predeterminada.

Si tus fotos están alojadas en un dominio diferente y no aparecen en el chat interno, agrega ese dominio como origen de imágenes aprobado — un paso único por dominio:

1. Ve a Configuración → Seguridad → Sitios de confianza para CSP.
2. Elige Nuevo sitio de confianza e ingresa el host de tus imágenes (por ejemplo, https://images.yourcompany.com).
3. En las directivas de CSP del sitio, habilita img-src y luego guarda.

Dónde se muestran las tarjetas

Cómo deciden los agentes cuándo usar tarjetas

La presentación de listas como tarjetas forma parte de las directrices de formato de respuesta predeterminadas que se incluyen con REDA AI. De forma predeterminada, los agentes en las superficies de chat (interno, Comunidad, widget externo) prefieren las tarjetas para las listas de registros; las viñetas para las listas informativas breves; y las tablas solo para los resúmenes agregados (totales, conteos agrupados por categoría) donde la comparación en columnas realmente ayuda.

El canal de API sin interfaz no muestra tarjetas — las llamadas programáticas reciben en su lugar respuestas en texto plano o estructuradas.

Botones de acción — Diseñar buenas etiquetas

Las etiquetas de los botones de acción son fundamentales porque también funcionan como expresiones de la conversación. Cuando el usuario hace clic en “Mostrar detalles del caso 00001137”, ese texto exacto se convierte en su siguiente mensaje de chat. El agente cuenta entonces con todo el contexto para actuar en consecuencia.

Las buenas etiquetas son:

• Autónomas — “Mostrar detalles del caso 00001137”, no “Mostrar detalles”.
• Específicas — hacen referencia al número de registro, el nombre o un campo identificativo para que el agente no tenga que adivinar en qué elemento hizo clic el usuario.
• Breves — procura que tengan menos de 50 caracteres; los botones largos se ajustan a varias líneas y se ven desordenados.
• Orientadas a la acción — el verbo primero (“Abrir”, “Agendar”, “Cancelar”, “Confirmar”) para que el usuario sepa qué va a pasar.

Comportamiento de transmisión

Mientras una respuesta del asistente se transmite palabra por palabra en el chat, el panel de chat oculta cualquier lista de tarjetas en curso hasta que esté completa. El usuario ve cómo la introducción en prosa se transmite con normalidad y, a continuación, las tarjetas aparecen como un único bloque terminado — sin parpadeos ni contenido a medio formar.

Personalizar la apariencia

Las tarjetas heredan los mismos tokens de color y la misma tipografía que el resto del widget de chat. Si has personalizado los colores de tu widget mediante Personalización de la interfaz del widget, las tarjetas los adoptan automáticamente — el color principal de marca para las insignias y los botones de acción, y el color de texto neutro para los títulos y los cuerpos. No hay un “tema de tarjetas” independiente que configurar.

El espaciado de las tarjetas, el radio del borde y las formas de las insignias son intencionalmente fijos en todas las superficies para mantener la coherencia. Si tu marca requiere un tratamiento visual diferente, plantéalo al soporte de REDA AI — podemos analizar opciones de personalización.

Limitaciones

• Máximo de 10 tarjetas por lista. Si coinciden más resultados, el agente resume el resto en prosa.
• Una tarjeta admite hasta 10 elementos multimedia (fotos y mosaicos de video combinados).
• Las fotos en el chat interno de Salesforce deben usar una dirección https:// segura en un dominio aprobado (Salesforce Files y los servicios de imágenes comunes están aprobados; se pueden agregar otros dominios en Sitios de confianza para CSP). Consulta Asegurarte de que las imágenes se muestren.
• El video se reproduce abriéndose en una nueva pestaña del navegador — no se incrusta ni se reproduce automáticamente dentro del panel de chat.
• Las tarjetas son de solo lectura más allá del botón de acción. Los usuarios no pueden editar en línea los campos de una tarjeta.
• Las tarjetas no aparecen en el canal de API (llamadas sin interfaz).
• Las etiquetas de los botones de acción se convierten en mensajes del usuario al hacer clic — no son primitivas de “acción rápida” independientes. Asegúrate de que cada etiqueta sea algo sobre lo que el agente pueda actuar como una instrucción de chat.

Acciones de correo, registros y programación

El correo distingue al destinatario Contacto o Prospecto del registro de negocio relacionado, admite listas Para/CC y comprueba los casos de exclusión de correo compatibles. Los Contactos/Prospectos enviados como registros relacionados se tratan como destinatarios. Las confirmaciones de registros muestran campos no aplicados. Los pasos del plan se concilian uno a uno y los horarios relativos conservan UTC. Se comprueban agentes desactivados y acciones anidadas no permitidas antes de ejecutar confirmaciones. La confirmación de vínculos de archivos reutiliza la ruta con control de acceso. Las acciones nuevas pendientes o reprogramadas por hora requieren un procesador disponible; el seguimiento de respuestas de correo y las actualizaciones normales de historial/estado continúan. Los trabajos posteriores se ejecutan como su propietario de programación, sin suplantar al solicitante. Las instrucciones reducen duplicados por otros conectores, pero no garantizan el comportamiento del asistente.