Cómo crear y usar plantillas de vista web de mensajería de Zendesk

Las plantillas de vista web de mensajería de Zendesk le permiten incrustar sitios web externos directamente en sus conversaciones de widget de chat. En lugar de enviar a los clientes a rellenar formularios o navegar por las páginas de productos, puede mantenerlos involucrados dentro del flujo de la conversación. Esta guía le explica todo lo que necesita saber: qué son las vistas web, cuándo usarlas y exactamente cómo configurarlas.

¿Qué son las plantillas de vista web de mensajería de Zendesk?

Una plantilla de vista web es uno de los tres tipos de mensajes estructurados disponibles en Zendesk AI Agents - Advanced. Mientras que los formularios recopilan información del cliente y las plantillas JSON personalizadas muestran carruseles o respuestas rápidas, las vistas web tienen un propósito diferente. Le permiten presentar un sitio web externo a los clientes sin que tengan que abandonar la conversación.

Así es como las vistas web difieren de otros mensajes estructurados:

• Los formularios son recolectores de datos integrados para información simple como direcciones de correo electrónico, nombres o selecciones de menú desplegable
• Las plantillas JSON personalizadas crean elementos interactivos como carruseles de productos, botones de respuesta rápida o encuestas NPS
• Las vistas web muestran sitios web externos dentro del Web Widget, perfectos para interacciones complejas que van más allá de las capacidades nativas de Zendesk

Las vistas web funcionan cargando una URL externa en un iframe dentro del widget de chat. Cuando un cliente hace clic en su botón de vista web, el sitio web se abre en un panel encima de la conversación. Interactúan con el sitio, completan su tarea y vuelven al chat sin problemas. Para los canales que no admiten vistas web, puede establecer una URL de respaldo que se abre en una nueva pestaña del navegador en su lugar.

Los casos de uso comunes incluyen calendarios de reservas, procesadores de pago, configuradores de productos, herramientas de firma de documentos y portales de gestión de cuentas. Cualquier escenario en el que necesite más funcionalidad de la que pueden proporcionar los formularios integrados de Zendesk es un candidato para una plantilla de vista web.

Lo que necesitará para empezar

Antes de crear su primera plantilla de vista web, tendrá que cumplir varios requisitos. Vamos a desglosarlos:

Requisitos del plan de Zendesk:

Requisitos técnicos:

• Una URL de sitio web externo que permita la carga de iframe (la mayoría de las aplicaciones web modernas lo hacen)
• Protocolo HTTPS (obligatorio por seguridad)
• Una URL de respaldo para los canales que no admiten vistas web

Lo que no necesita:

A diferencia de la creación de integraciones personalizadas con la API de Sunshine Conversations, las plantillas de vista web no requieren recursos de desarrollador. Puede crearlas y gestionarlas a través de la interfaz visual de Zendesk. La configuración es lo suficientemente sencilla como para que los administradores de soporte puedan manejarla sin ayuda de ingeniería.

Para los equipos que evalúan alternativas, ofrecemos un enfoque diferente en eesel AI. En lugar de crear plantillas para cada tipo de interacción, nuestros agentes de IA aprenden de su contenido existente y gestionan las conversaciones de forma autónoma. Puede comenzar con una prueba gratuita de 7 días si desea explorar el soporte impulsado por IA sin la complejidad de las plantillas.

Paso a paso: Creación de su primera plantilla de vista web

Paso 1: Acceder a la configuración del agente de IA

Vaya al Centro de administración y, a continuación, haga clic en Canales en la barra lateral izquierda. Seleccione Agentes de IA para ver su lista de agentes de IA avanzados. Elija el agente al que desea añadir la plantilla de vista web. Si aún no ha creado un agente de IA avanzado, tendrá que configurar uno primero y conectarlo a un canal de mensajería.

Paso 2: Navegar a la gestión de plantillas

Con su agente de IA seleccionado, haga clic en Configuración en la barra lateral. A continuación, seleccione Integración CRM en el menú. Verá varias pestañas en la parte superior del área de contenido. Haga clic en la pestaña Plantillas para acceder a la interfaz de gestión de plantillas de mensajes estructurados.

Si esta es su primera plantilla, verá un botón "Crear su primera plantilla". Si ha creado plantillas antes, verá una lista de plantillas existentes con un botón "Crear plantilla" en su lugar.

Paso 3: Crear una nueva plantilla de vista web

Haga clic en el botón de crear y seleccione Vista web de las tres opciones de tipo de plantilla. Se abrirá la página de configuración de la plantilla de vista web con varios campos para completar.

Paso 4: Configurar los detalles de la plantilla

Rellene los campos obligatorios:

Nombre de la plantilla: Introduzca un identificador único utilizando sólo letras, números, guiones y guiones bajos. No se permiten espacios. Este nombre aparece en su lista de plantillas y es al que hará referencia al insertar la plantilla en los diálogos. Algo como "calendario-de-reservas" o "configurador-de-productos" funciona bien.

Descripción: Opcional pero recomendado. Añada una breve nota explicando lo que hace esta plantilla y cuándo usarla. Esto ayuda a otros miembros del equipo a entender el propósito de la plantilla.

Texto del mensaje: El mensaje que muestra su agente de IA encima del botón de vista web. Esto establece el contexto para el cliente. Por ejemplo: "Puede consultar nuestra disponibilidad en tiempo real y reservar una cita a continuación."

Texto del botón: La etiqueta del botón en el que los clientes hacen clic para abrir la vista web. Manténgalo orientado a la acción: "Reservar cita", "Configurar producto" o "Firmar documento".

URL: La URL del sitio web externo que se carga cuando se hace clic en el botón. Debe utilizar HTTPS y debe permitir la carga en un iframe. Pruebe esta URL de antemano para asegurarse de que funciona correctamente en un contexto de iframe.

URL de respaldo: Una URL de respaldo para los canales que no admiten vistas web. Normalmente, esto se abre en una nueva pestaña del navegador. Por lo general, es la misma que su URL principal, pero puede establecer una página diferente si es necesario.

Paso 5: Establecer el comportamiento de la mensajería

Haga clic en "Campos opcionales" para ampliar las opciones de configuración adicionales:

Tamaño: Elija el tamaño en que aparece el panel de vista web. Sus opciones son:

• Compacto: Panel pequeño, bueno para formularios simples o contenido corto
• Alto: Panel mediano, adecuado para la mayoría de los casos de uso
• Completo: Panel grande que ocupa la mayor parte del widget, ideal para interacciones complejas

Acción predeterminada: Marque esto como la acción predeterminada si está ofreciendo múltiples opciones al cliente.

Abrir automáticamente la vista web: Active esta opción para abrir la vista web inmediatamente cuando se active la plantilla, sin necesidad de que el cliente haga clic en un botón. Úselo con moderación, ya que puede resultar intrusivo.

Campos de metadatos: Añada campos personalizados para capturar datos de la interacción de la vista web. Estos pueden pasar información de vuelta a Zendesk para informes o acciones de seguimiento.

Paso 6: Guardar y probar

Haga clic en Crear para guardar su plantilla. Ahora pruébela a fondo:

1. Abra la vista previa de su Web Widget
2. Active el diálogo que contiene su plantilla de vista web
3. Verifique que el sitio externo se carga correctamente
4. Pruebe en dispositivos móviles para asegurar un diseño responsivo
5. Compruebe que la URL de respaldo funciona probando en canales no compatibles

Si la vista web muestra una pantalla negra o un error, es probable que el sitio externo bloquee la carga de iframes. Tendrá que ponerse en contacto con el administrador del sitio para permitir la incrustación de iframes o elegir una solución diferente.

Uso de plantillas de vista web en flujos de conversación

Añadir plantillas a los diálogos

Crear la plantilla es sólo la mitad del trabajo. Tendrá que insertarla en los flujos de conversación de su agente de IA para que realmente aparezca a los clientes.

Las plantillas utilizan una sintaxis abreviada que se sustituye automáticamente por el contenido completo de la plantilla cuando se envía. Así es como se añade una plantilla a un diálogo:

1. Vaya a la pestaña Plantillas de su agente de IA y encuentre su plantilla de vista web en la lista
2. Haga clic en el código abreviado que se muestra en la columna Abreviado (se verá como %((template:su-nombre-de-plantilla))%)
3. El código se copia en su portapapeles
4. Abra el diálogo donde desea utilizar la plantilla
5. Seleccione el bloque de mensajes del agente de IA donde debe aparecer la plantilla
6. Pegue el código abreviado en el texto del mensaje

Opciones de sintaxis de la plantilla

Zendesk proporciona dos formatos de sintaxis para las plantillas:

• Sintaxis estándar: %((template:nombre_de_plantilla))%
• Sintaxis alternativa: %{{template:nombre_de_plantilla}}%

La sintaxis alternativa existe en caso de que el formato estándar entre en conflicto con otros sistemas de plantillas que pueda estar utilizando. Ambos funcionan de la misma manera.

Puede incluir texto antes del código abreviado de la plantilla, lo que crea una secuencia de dos mensajes. El texto aparece primero, luego la plantilla se renderiza como un mensaje separado. Cualquier texto después del código abreviado de la plantilla se ignora, así que ponga todo su contexto antes del código.

Pasar variables a las plantillas

Para las vistas web dinámicas que cambian en función del contexto de la conversación, utilice la acción CRM "Añadir una vista web" en lugar de una plantilla estática. Esto le permite construir URLs con variables recogidas durante la conversación, tales como:

https://su-app-de-reservas.com?customer_id={{user.id}}&product={{conversation.product}}

Este enfoque crea experiencias personalizadas donde el sitio externo sabe quién es el cliente y lo que está buscando.

Casos de uso comunes para las plantillas de vista web

Las vistas web funcionan bien en escenarios donde los formularios nativos de Zendesk no son suficientes. Estas son las aplicaciones más eficaces:

Sistemas de reservas complejos

La programación de citas a menudo requiere interfaces de calendario, selección de franjas horarias y comparaciones de opciones de servicio. En lugar de construir esto en los formularios de Zendesk, incruste su herramienta de reservas existente. Calendly, Acuity Scheduling o los portales de reservas personalizados funcionan muy bien como vistas web.

Formularios personalizados

La recopilación de datos en varios pasos, la lógica condicional o los cálculos superan lo que los formularios simples de Zendesk pueden manejar. Si necesita que los clientes completen una solicitud detallada, una solicitud de presupuesto o un proceso de registro, una vista web que cargue su formulario personalizado es la opción correcta.

Procesamiento de pagos

Los flujos de pago seguros deben utilizar procesadores de pago establecidos como Stripe, PayPal o su plataforma de comercio electrónico. La incrustación de estos a través de la vista web permite a los clientes completar las transacciones sin salir de la conversación de soporte.

Configuradores de productos

Las herramientas interactivas de personalización de productos, los visores 3D o los selectores de opciones complejos son candidatos perfectos para la vista web. Los clientes pueden construir su configuración de producto ideal, ver las actualizaciones de precios en tiempo real y luego volver a chatear con preguntas o para completar la compra.

Firma de documentos

Las herramientas de firma electrónica como DocuSign o Adobe Sign se integran sin problemas a través de la vista web. Los agentes de soporte pueden activar la firma de documentos durante los procesos de reembolso, las renovaciones de contratos o las resoluciones de disputas.

Gestión de cuentas

En lugar de explicar cómo encontrar la configuración de la cuenta, muestre a los clientes su portal de cuenta directamente en el chat. Esto funciona para el restablecimiento de contraseñas, la gestión de suscripciones, las actualizaciones de perfiles y la configuración de privacidad.

Para muchos de estos casos de uso, es posible que mantener las herramientas externas y las plantillas de vista web añada complejidad. En eesel AI, hemos descubierto que entrenar a un agente de IA en sus procesos existentes a menudo elimina la necesidad de configuraciones complejas de vista web. Nuestra IA puede manejar conversaciones de varios turnos, buscar información de la cuenta a través de la API y guiar a los clientes a través de los procesos de forma conversacional. El plan Business incluye acciones de API e interacciones ilimitadas si desea explorar este enfoque.

Mejores prácticas y resolución de problemas

Diseñar para el contexto del widget

Las vistas web aparecen en un espacio limitado dentro del Web Widget. Sus páginas externas deben:

• Utilizar un diseño responsivo que se adapte a los visores más pequeños
• Evitar los menús de navegación que compiten con la interfaz del widget
• Cargarse rápidamente, idealmente en menos de 3 segundos
• Tener estados de finalización claros que indiquen a los clientes lo que ocurre a continuación

Requisitos de seguridad

• Utilice siempre URLs HTTPS. Los sitios HTTP no se cargarán en los navegadores modernos dentro de los iframes.
• Verifique que su sitio externo permite la incrustación de iframes. Busque los encabezados X-Frame-Options establecidos en SAMEORIGIN o DENY como indicadores de que la incrustación no funcionará.
• Considere los datos que se transmiten entre Zendesk y su sitio externo. Utilice los parámetros de la URL con cuidado y evite exponer información sensible.

Compatibilidad del navegador

Zendesk es compatible con las dos últimas versiones de Chrome, Firefox y Edge, además de la última de Safari. Pruebe sus vistas web en estos navegadores. Safari móvil en iOS y Chrome Mobile requieren una atención especial, ya que el comportamiento de los iframes varía en los dispositivos móviles.

Problemas comunes y soluciones

Lista de verificación de pruebas

Antes de desplegar las plantillas de vista web en producción:

• Pruebe en Chrome, Safari, Firefox y Edge de escritorio
• Pruebe en iOS Safari y Android Chrome
• Verifique el comportamiento de la URL de respaldo en los canales no compatibles
• Confirme que la captura de datos y los campos de metadatos funcionan correctamente
• Compruebe que la plantilla aparece en el paso de diálogo correcto
• Valide que el sitio externo se carga en 3 segundos
• Pruebe con una cuenta de cliente para asegurarse de que las URLs personalizadas funcionan

Cuando las vistas web fallan o la complejidad crece, tener un enfoque de respaldo ayuda. Hemos diseñado eesel AI para manejar con elegancia las situaciones en las que las plantillas estructuradas se quedan cortas. Nuestra IA aprende de sus interacciones exitosas y a menudo puede resolver las necesidades de los clientes sin necesidad de herramientas externas. Si está alcanzando las limitaciones del sistema de plantillas de Zendesk, reserve una demostración para ver cómo se compara el manejo autónomo de la IA.

Alternativas a las plantillas de vista web

Las vistas web no siempre son la solución correcta. Considere estas alternativas dependiendo de sus necesidades:

Formularios nativos de Zendesk

Para la recopilación de datos simples (nombre, correo electrónico, selecciones de menú desplegable, texto corto), las plantillas de formulario integradas de Zendesk son más rápidas de configurar y más fiables. Se integran directamente con los campos de los tickets y no requieren alojamiento externo. Mantenga los formularios con menos de cinco campos para obtener la mejor experiencia del cliente.

Carruseles y respuestas rápidas

Si está mostrando productos u ofreciendo opciones simples, los carruseles muestran hasta 10 tarjetas desplazables con imágenes y botones. Las respuestas rápidas presentan hasta 11 opciones predefinidas como botones en los que se puede hacer clic. Ambos mantienen a los clientes en la experiencia de mensajería nativa sin la complejidad de los iframes.

Aplicaciones de mercado de terceros

Aplicaciones como Interactive Messaging Templates de Zenplates amplían las capacidades de mensajería de Zendesk con selectores de plantillas orientados al agente. Estos funcionan bien cuando desea que los agentes humanos seleccionen y envíen mensajes estructurados en lugar de automatizar todo a través de agentes de IA.

Soluciones personalizadas basadas en API

Para una máxima flexibilidad, la API de Sunshine Conversations permite a los desarrolladores crear tipos de mensajes completamente personalizados. Esto requiere recursos de ingeniería, pero elimina las limitaciones de los enfoques basados en plantillas.

Manejo autónomo de la IA

En lugar de construir plantillas y vistas web para cada escenario, algunos equipos están avanzando hacia agentes de IA que manejan las conversaciones de forma natural. En lugar de presentar un calendario de reservas, la IA hace preguntas aclaratorias, comprueba la disponibilidad a través de la API y confirma las citas de forma conversacional. Esto elimina la necesidad de que los clientes interactúen con interfaces externas.

Construimos eesel AI en torno a esta filosofía. Nuestros agentes de IA aprenden de sus tickets pasados, centro de ayuda y documentación para manejar las conversaciones con los clientes sin plantillas predefinidas. Para escenarios complejos que tradicionalmente podrían requerir vistas web, la IA a menudo puede recopilar información conversacionalmente y tomar acciones a través de integraciones de API. El resultado es una configuración más simple con menos partes móviles. Puede probarlo gratis durante 7 días para ver cómo se compara el manejo autónomo con los flujos de trabajo basados en plantillas.

Comience a mejorar su mensajería de Zendesk con plantillas de vista web

Las plantillas de vista web de mensajería de Zendesk cierran la brecha entre el soporte conversacional y las herramientas externas complejas. Cuando necesite presentar un calendario de reservas, un formulario de pago o un configurador de productos sin interrumpir el flujo de la conversación, las vistas web son su solución.

La configuración requiere el plan adecuado (Suite Team más AI Agents - Advanced), un sitio web externo compatible y alguna configuración en el Centro de administración de Zendesk. Una vez configuradas, las vistas web se integran perfectamente en los diálogos de los agentes de IA utilizando una sintaxis abreviada simple.

Antes de construir extensas configuraciones de vista web, considere si cada caso de uso realmente requiere una interfaz externa. A veces un formulario nativo es suficiente. A veces un carrusel funciona mejor. Y a veces, todo el flujo de trabajo puede ser manejado conversacionalmente por un agente de IA que aprende sus procesos y toma acciones directamente.

Si la gestión de plantillas le resulta abrumadora o está alcanzando las limitaciones de lo que las vistas web pueden lograr, podemos ayudarle. En eesel AI, nos especializamos en agentes de IA autónomos que manejan las conversaciones con los clientes sin la complejidad de las plantillas. Nuestra IA aprende de su contenido existente, se integra con su mesa de ayuda y escala a los humanos cuando es necesario. Pruebe eesel AI gratis durante 7 días o programe una demostración para ver cómo se compara con los enfoques basados en plantillas.