Cómo personalizar los formularios de pre-chat de Zendesk: Guía completa 2026

Cómo personalizar los formularios de pre-chat de Zendesk: Guía completa 2026

Los formularios de pre-chat de Zendesk recopilan información de los visitantes antes de que comience un chat en vivo. Le permiten capturar nombres, correos electrónicos, números de teléfono y enrutar las conversaciones al departamento adecuado. Cuando se configuran correctamente, reducen el intercambio de mensajes innecesarios y brindan contexto a los agentes desde el primer mensaje.

¿El desafío? La documentación de Zendesk está dispersa en varias páginas, cubriendo la configuración del administrador, la API de JavaScript y la configuración del SDK móvil por separado. Esta guía consolida todo en un solo lugar.

Aprenderá a personalizar los cinco elementos principales del formulario de pre-chat (saludo, perfil del visitante, número de teléfono, selección de departamento y campo de mensaje) utilizando tres métodos: el panel de administración, la API de JavaScript y el SDK de iOS. También cubrimos problemas comunes de resolución de problemas y cuándo tiene sentido considerar alternativas impulsadas por IA que eliminan por completo la complejidad de la configuración.

¿Qué es un formulario de pre-chat de Zendesk?

Un formulario de pre-chat es un cuadro de diálogo que aparece antes de que los visitantes inicien una sesión de chat en vivo. Recopila información que ayuda a su equipo de soporte a responder de manera más rápida y efectiva.

El formulario de pre-chat solo está disponible en el Web Widget de Zendesk (Classic), no en el widget de mensajería (Messaging) más reciente, como se confirma en la documentación del formulario de pre-chat de Zendesk. Esta distinción es importante porque las opciones de configuración difieren significativamente entre ambos.

Los formularios de pre-chat sirven para tres propósitos principales:

• Reducir el intercambio de mensajes: Los agentes ya conocen el nombre del cliente, su correo electrónico y su pregunta inicial antes de que comience el chat.
• Enrutar al equipo adecuado: La selección de departamento garantiza que las conversaciones lleguen al grupo apropiado (ventas, soporte técnico, facturación).
• Capturar información de contacto: Incluso si el chat se desconecta, usted tiene el correo electrónico del visitante para realizar un seguimiento.

El formulario incluye cinco elementos personalizables:

Elemento	Propósito	Estado predeterminado
Mensaje de saludo	Texto de bienvenida que se muestra en la parte superior del formulario	Habilitado
Perfil del visitante (Nombre, Email)	Campos de identidad básicos	Habilitado
Número de teléfono	Campo de contacto opcional	Deshabilitado
Selección de departamento	Menú desplegable para enrutamiento	Se muestra si existen departamentos
Campo de mensaje	Pregunta o solicitud inicial	Habilitado

Comprender el sistema de tickets de Zendesk y cómo se alimentan los formularios de pre-chat en él le ayuda a diseñar formularios que capturen los datos correctos. Para los equipos que ejecutan soporte omnicanal, el formulario de pre-chat suele ser el primer punto de contacto en el recorrido del cliente.

Una alternativa a los formularios de pre-chat: eesel AI

Antes de sumergirse en la configuración de JavaScript, considere si realmente necesita un formulario estático. eesel AI ofrece un enfoque alternativo que recopila el contexto del cliente de forma conversacional en lugar de a través de campos de formulario.

Así es como funciona: eesel AI se conecta a su cuenta de Zendesk y aprende inmediatamente de sus tickets pasados, macros, artículos del centro de ayuda y cualquier documentación conectada. En lugar de presentar a los visitantes un formulario para completar, el chatbot de IA entabla una conversación natural con ellos y extrae la misma información de forma dinámica.

El proceso de configuración toma minutos:

1. Conecte eesel AI a su cuenta de Zendesk (integración con un solo clic).
2. Entrene la IA con sus fuentes de conocimiento existentes (centro de ayuda, tickets anteriores, documentos internos).
3. Despliéguelo como una burbuja de chat en su sitio web o intégrelo directamente con Zendesk Chat.

Ventajas clave sobre los formularios de pre-chat tradicionales:

• Sin configuración de JavaScript: Nosotros nos encargamos de la recopilación de contexto automáticamente.
• Recopilación de datos conversacionales: Los visitantes responden preguntas de forma natural, no a través de campos de formulario rígidos.
• Enrutamiento inteligente: Nuestra IA determina el departamento correcto basándose en el contenido de la conversación.
• Aprendizaje continuo: El sistema mejora basándose en las correcciones de los agentes y los nuevos tickets.

Este enfoque funciona bien para los equipos que desean reducir la carga de desarrollo y, al mismo tiempo, capturar la información que necesitan. Puede comenzar con la supervisión de la IA (borradores para revisión humana) y subir de nivel gradualmente hacia la gestión autónoma de tickets a medida que aumente la confianza.

Para los equipos que prefieren o requieren formularios de pre-chat tradicionales, las siguientes secciones cubren las opciones de personalización nativas de Zendesk.

Cómo personalizar el formulario de pre-chat de Zendesk en el administrador de Zendesk

El panel de administración proporciona una personalización básica sin necesidad de código. Esto cubre la mayoría de los casos de uso comunes.

Paso 1: Acceder a la configuración del formulario de pre-chat

Vaya a Centro de administración > Panel de Chat > Configuración > Widget > Formularios > Formulario de pre-chat.

Para cuentas de Chat más antiguas, la ruta puede ser Panel > Configuración > Widget.

Paso 2: Configurar el mensaje de saludo

El saludo aparece en la parte superior del formulario de pre-chat. Manténgalo conciso, ya que los visitantes quieren empezar a chatear, no leer párrafos.

El campo de saludo solo acepta texto sin formato (sin formato HTML). Úselo para:

• Mensajes de bienvenida ("¡Hola! Estamos aquí para ayudarle").
• Instrucciones ("Complete el siguiente formulario para que podamos ayudarle más rápido").
• Avisos de horario comercial ("Nuestro equipo está disponible de lunes a viernes, de 9:00 a 18:00 EST").

Paso 3: Configurar los campos de identidad del visitante

Active o desactive Perfil del visitante para habilitar o deshabilitar los campos de Nombre y Correo electrónico. Estos son esenciales para la comunicación de seguimiento.

Las opciones adicionales incluyen:

• Permitir inicio de sesión social: Permite a los visitantes iniciar sesión con Facebook o Google en lugar de escribir su información.
• Requerir correo electrónico: Hace que el campo de correo electrónico sea obligatorio.

Una advertencia: deshabilitar el Perfil del visitante por completo significa que perderá la capacidad de realizar un seguimiento de los visitantes después de que finalice el chat. Solo deshabilítelo si está seguro de que no necesitará la información de contacto.

Paso 4: Agregar el campo de número de teléfono (opcional)

Habilite la recopilación de teléfonos en Permitir número de teléfono en la sección Perfil del visitante.

Para que el campo de teléfono sea obligatorio, marque Requerir número de teléfono en la configuración del formulario de pre-chat.

La recopilación de teléfonos es útil para:

• Escenarios de devolución de llamada donde se puede necesitar soporte telefónico.
• Recopilación de información de contacto alternativa.
• Identificación de clientes de alto valor.

Paso 5: Configurar la selección de departamento

El menú desplegable de departamentos aparece automáticamente si tiene departamentos configurados en Zendesk Chat. Si no lo ve, cree departamentos primero en Configuración > Departamentos.

Puede personalizar la etiqueta del menú desplegable (por ejemplo, cambiando "Departamento" por "Seleccione su equipo" o "¿Cómo podemos ayudarle?").

Tenga en cuenta que no puede ocultar departamentos específicos desde el panel de administración. Para filtrar qué departamentos aparecen, necesitará la API de JavaScript que se trata en la siguiente sección.

Personalización avanzada del formulario de pre-chat de Zendesk con la API de JavaScript

Para tener más control sobre el formulario de pre-chat, utilice la API de JavaScript del Web Widget. Esto le permite personalizar los saludos por idioma, filtrar departamentos, completar previamente la información del visitante y más.

El objeto zESettings

El objeto zESettings es donde se define la configuración del widget. La regla crítica: colóquelo ANTES del script del widget de Zendesk en su HTML.

window.zESettings = {
  webWidget: {
    chat: {
      prechatForm: {
        greeting: { '*': '¡Bienvenido! ¿Cómo podemos ayudarle hoy?' },
        departmentLabel: { '*': 'Elija su equipo' }
      }
    }
  }
};

Si coloca zESettings después de que se cargue el script del widget, sus ajustes no se aplicarán. Este es el error más común al personalizar el formulario de pre-chat.

Personalización del saludo y la etiqueta del departamento

Tanto greeting como departmentLabel admiten valores específicos de la configuración regional (locale). Use el comodín '*' para todos los idiomas, o especifique códigos de configuración regional para soporte multi-idioma:

prechatForm: {
  greeting: {
    'en-US': 'Welcome! How can we help?',
    'es': '¡Bienvenido! ¿Cómo podemos ayudarle?',
    'fr': 'Bienvenue! Comment pouvons-nous vous aider?',
    'de': 'Willkommen! Wie können wir Ihnen helfen?',
    '*': 'Hello!'
  },
  departmentLabel: {
    'en-US': 'Select your team',
    'es': 'Seleccione su equipo',
    'fr': 'Sélectionnez votre équipe',
    '*': 'Department'
  }
}

El widget detecta el idioma del navegador del visitante y muestra el mensaje apropiado. El comodín '*' sirve como respaldo para cualquier idioma que no esté definido explícitamente.

Filtrar qué departamentos aparecen

Use el objeto departments para controlar qué departamentos se muestran en el menú desplegable:

chat: {
  departments: {
    enabled: ['Ventas', 'Soporte Técnico'],
    select: 'Ventas'
  }
}

Propiedad	Tipo	Descripción
enabled	Array	Lista blanca de nombres de departamentos a mostrar
select	String	Departamento predeterminado preseleccionado

Importante: Los nombres de los departamentos deben coincidir exactamente (distingue entre mayúsculas y minúsculas). Si un nombre de departamento no existe, el menú desplegable puede ocultarse por completo sin ningún mensaje de error.

Completar previamente la información del visitante

Para los usuarios que han iniciado sesión, puede completar previamente el formulario con la información que ya tiene. La Core API proporciona dos comandos para esto:

El comando identify establece el nombre y el correo electrónico:

zE('webWidget', 'identify', {
  name: 'Juan Pérez',
  email: 'juan@example.com'
});

El comando prefill ofrece más control, incluyendo campos de solo lectura:

zE('webWidget', 'prefill', {
  name: {
    value: 'Juan Pérez',
    readOnly: true
  },
  email: {
    value: 'juan@example.com',
    readOnly: true
  },
  phone: {
    value: '555-1234',
    readOnly: false
  }
});

Establecer readOnly: true evita que los visitantes editen los valores completados previamente. Esto es útil cuando ya ha verificado la identidad del usuario.

Configuración del formulario de pre-chat de Zendesk en el SDK móvil

Para aplicaciones nativas de iOS, el SDK de Chat de Zendesk proporciona una personalización equivalente a través de clases de Swift.

Configuración de iOS con ChatConfiguration

La clase ChatFormConfiguration le permite establecer requisitos para cada campo del formulario. Cada campo tiene tres estados posibles:

Estado	Descripción
.required	El usuario debe completar el campo para continuar
.optional	El usuario puede omitir el campo
.hidden	El campo no se muestra

A continuación, se muestra cómo configurar un formulario de pre-chat con nombre y departamento obligatorios, correo electrónico opcional y teléfono oculto:

let formConfiguration = ChatFormConfiguration(
    name: .required,
    email: .optional,
    phoneNumber: .hidden,
    department: .required
)

let chatConfiguration = ChatConfiguration()
chatConfiguration.isPreChatFormEnabled = true
chatConfiguration.preChatFormConfiguration = formConfiguration

Para Objective-C:

ZDKChatFormConfiguration *formConfiguration = [[ZDKChatFormConfiguration alloc]
    initWithName:ZDKFormFieldStatusRequired
    email:ZDKFormFieldStatusOptional
    phoneNumber:ZDKFormFieldStatusHidden
    department:ZDKFormFieldStatusRequired];

ZDKChatConfiguration *chatConfiguration = [[ZDKChatConfiguration alloc] init];
chatConfiguration.isPreChatFormEnabled = YES;
chatConfiguration.preChatFormConfiguration = formConfiguration;

Indicadores de configuración clave

La clase ChatConfiguration incluye varios indicadores (flags) útiles:

Indicador	Predeterminado	Descripción
isPreChatFormEnabled	true	Activa o desactiva todo el formulario
isAgentAvailabilityEnabled	true	Muestra un mensaje cuando no hay agentes en línea
isOfflineFormEnabled	true	Permite a los visitantes dejar un mensaje cuando se está desconectado
isChatTranscriptPromptEnabled	true	Ofrece la transcripción por correo electrónico al finalizar el chat

Pre-población de información de usuario con ChatAPIConfiguration

Si establece las propiedades de visitorInfo en Chat.instance.configuration, los campos correspondientes del formulario se ocultarán automáticamente:

Chat.instance?.configuration.visitorInfo = VisitorInfo(
    name: "Juan Pérez",
    email: "juan@example.com",
    phoneNumber: "555-1234"
)

Cuando todas las propiedades de visitorInfo están completas, el formulario de pre-chat se omite por completo. El usuario puede empezar a chatear de inmediato.

Resolución de problemas comunes de los formularios de pre-chat de Zendesk

Incluso con una configuración correcta, suelen surgir varios problemas. Aquí están las soluciones.

El menú desplegable de departamentos no se muestra

Causa: Todos los agentes de ese departamento están desconectados.

Solución: Asegúrese de que al menos un agente esté en línea para cada departamento que desee mostrar. Alternativamente, use departments.enabled en su configuración de JavaScript con nombres de departamento válidos. Si está realizando pruebas, establezca su estado en "En línea" (Online) en el panel de Chat.

El departmentLabel personalizado no se aplica

Causa: La propiedad se coloca en el nivel de anidamiento incorrecto.

Solución: Mueva departmentLabel DENTRO del objeto prechatForm, no en el nivel de chat:

// INCORRECTO - no funcionará
chat: {
  departmentLabel: { '*': 'Seleccionar' }
}

// CORRECTO
chat: {
  prechatForm: {
    departmentLabel: { '*': 'Seleccione su equipo' }
  }
}

Esta estructura anidada es una fuente común de confusión en la API de Zendesk.

Los ajustes no se aplican en absoluto

Causa: El objeto zESettings se coloca después del script del widget.

Solución: Asegúrese de que window.zESettings aparezca ANTES del fragmento de código del widget de Zendesk en su HTML:

<!-- Configuración PRIMERO -->
<script>
  window.zESettings = {
    webWidget: {
      chat: {
        prechatForm: {
          greeting: { '*': '¡Hola!' }
        }
      }
    }
  };
</script>

<!-- Script del widget SEGUNDO -->
<script id="ze-snippet" src="https://static.zdassets.com/ekr/snippet.js?key=SU_LLAVE"></script>

El formulario se omite en disparadores proactivos

Causa: Los disparadores de chat proactivos están diseñados para iniciar conversaciones sin requerir el formulario de pre-chat.

Solución: Este es el comportamiento esperado, no un error. Si necesita información del visitante cuando se activan los disparadores proactivos, use la API identify para capturar datos después de que comience el chat:

zE('webWidget:on', 'chat:start', function() {
  // Solicitar información después de que comience el chat
});

El widget muestra el idioma incorrecto

Causa: El widget utiliza la configuración de idioma del navegador de forma predeterminada.

Solución: Fuerce un idioma específico con el comando setLocale:

zE('webWidget', 'setLocale', 'es');

Esto anula la detección del navegador y muestra el widget en el idioma especificado.

Simplifique la configuración del chat de Zendesk con eesel AI

Configurar los formularios de pre-chat de Zendesk implica navegar por los ajustes del administrador, escribir JavaScript y, potencialmente, modificar el código de la aplicación móvil. Para los equipos que no cuentan con recursos de desarrollo dedicados, esta complejidad puede retrasar el despliegue.

eesel AI ofrece un enfoque diferente. En lugar de configurar formularios estáticos, usted despliega un agente de IA que:

• Aprende de sus datos de Zendesk: Tickets pasados, macros, artículos del centro de ayuda.
• Recopila contexto de forma conversacional: Sin campos de formulario rígidos, solo una conversación natural.
• Enruta de forma inteligente: Determina el departamento correcto basándose en el contenido de la conversación.
• Gestiona tickets de forma autónoma: Resuelve problemas comunes sin intervención humana.

La configuración toma minutos en lugar de horas. Conecte su cuenta de Zendesk, entrene la IA con su conocimiento existente y despliéguela. Puede comenzar con la IA redactando respuestas para que los agentes las revisen y luego subir de nivel hacia la gestión autónoma a medida que aumente la confianza.

Para los equipos que ya usan Zendesk, eesel AI funciona junto con su configuración actual. No necesita reemplazar nada, solo agregar una capa inteligente que gestione las conversaciones rutinarias.

El precio comienza en $299/mes para el plan Team, que incluye 1,000 interacciones de IA. Consulte nuestra guía de los mejores chatbots de IA para Zendesk para obtener una comparación detallada de las opciones.

¿Listo para simplificar la configuración de su chat? Inicie una prueba gratuita y vea cómo eesel AI puede reducir la complejidad de la configuración mientras mejora los tiempos de respuesta a los clientes.

---

Preguntas frecuentes

P1: ¿Puedo personalizar el formulario de pre-chat de Zendesk sin escribir código?

R1: Sí. El panel de administración de Zendesk le permite configurar opciones básicas del formulario de pre-chat, incluyendo el mensaje de saludo, los campos del perfil del visitante (nombre y correo electrónico), la recopilación del número de teléfono y las etiquetas del menú desplegable de departamentos. Para una personalización más avanzada, como filtrar departamentos o completar previamente los datos del visitante, necesitará la API de JavaScript.

P2: ¿Por qué no se aplica la personalización de mi formulario de pre-chat de Zendesk después de agregar el código zESettings?

R2: La causa más común es colocar el objeto zESettings después de que se cargue el script del widget. Para que la personalización del formulario de pre-chat de Zendesk funcione, sus ajustes deben aparecer ANTES del fragmento de código del widget en su HTML. También verifique que las propiedades como departmentLabel estén anidadas dentro del objeto prechatForm, no en el nivel de chat.

P3: ¿Cómo personalizo el formulario de pre-chat de Zendesk para mostrar solo departamentos específicos?

R3: Utilice la propiedad departments.enabled de la API de JavaScript para autorizar departamentos específicos. Por ejemplo, establecer enabled: ['Ventas', 'Soporte'] solo mostrará esas dos opciones en el menú desplegable. Los nombres de los departamentos deben coincidir exactamente (distingue entre mayúsculas y minúsculas) para que esta personalización funcione.

P4: ¿Existe una alternativa más sencilla a la personalización del formulario de pre-chat de Zendesk para recopilar información de los visitantes?

R4: Sí. Las soluciones de chat impulsadas por IA como eesel AI recopilan el contexto del visitante de forma conversacional en lugar de a través de formularios estáticos. En lugar de configurar campos de formulario y JavaScript, la IA interactúa con los visitantes de forma natural y extrae la información necesaria. Esto elimina la necesidad de una personalización compleja del formulario de pre-chat de Zendesk mientras se capturan nombres, correos electrónicos y requisitos de enrutamiento.

P5: ¿Cómo configuro la personalización del formulario de pre-chat de Zendesk para aplicaciones móviles?

R5: Para aplicaciones iOS, use la clase ChatFormConfiguration para establecer los requisitos de los campos (.required, .optional o .hidden) y la clase ChatConfiguration para habilitar o deshabilitar el formulario. Si completa previamente las propiedades de visitorInfo, los campos correspondientes del formulario se ocultarán automáticamente. Este es el enfoque nativo para la personalización del formulario de pre-chat de Zendesk en dispositivos móviles.

P6: ¿Por qué desaparece el menú desplegable de departamentos de mi formulario de pre-chat de Zendesk?

R6: El menú desplegable de departamentos solo aparece cuando al menos un agente está en línea para ese departamento. Si todos los agentes están desconectados, Zendesk oculta el menú desplegable. Otra causa es el uso de nombres de departamento no válidos en su matriz departments.enabled de JavaScript. Verifique que los nombres de los departamentos coincidan exactamente con lo configurado en sus ajustes de Zendesk Chat para una personalización adecuada.

P7: ¿Puedo completar previamente el formulario de pre-chat de Zendesk con datos de clientes que ya tengo?

R7: Sí. Use el comando identify para establecer el nombre y el correo electrónico, o el comando prefill para un mayor control, incluyendo campos de solo lectura. Para aplicaciones móviles, establezca las propiedades de visitorInfo en la configuración del chat. Cuando todos los campos están completados previamente, la personalización del formulario de pre-chat de Zendesk puede incluso omitir el formulario por completo e iniciar el chat de inmediato.