Una vez que un administrador finaliza la configuración inicial de los componentes del Web Widget (clásico) desde el Centro de administración y coordina con un desarrollador para agregar el Web Widget (clásico) a su sitio web, puede trabajar con el desarrollador para personalizar aún más el Web Widget (clásico), si así lo desea.
Los administradores encontrarán aquí información sobre las personalizaciones avanzadas que se pueden realizar con el Web Widget (clásico). En este artículo se responde la pregunta “¿Qué otras cosas puedo hacer con el Web Widget (clásico)?”. También se explica el proceso de personalización para los administradores e indica dónde encontrar documentación que los desarrolladores pueden utilizar para hacer el trabajo.
Si usted es un desarrollador web (o un administrador que se siente a gusto encargándose del desarrollo de su sitio web) y le interesa obtener documentación completa sobre las opciones de configuración de la API y los comandos que se describen en este artículo, o desea más ejemplos de código, consulte la documentación para desarrolladores de la API del Web Widget (clásico).
En este artículo se tratan los siguientes temas y personalizaciones del widget:
- Planificar las personalizaciones del Web Widget (clásico)
- Cómo utilizar la documentación de la API del Web Widget (clásico)
- Mostrar el widget en otro idioma
- Formularios rellenados con los datos de contacto del usuario
- Desactivar los adjuntos en los tickets
- Cambiar la ubicación del iniciador
- Ajustar la ubicación del widget
- Personalizar el color de los elementos del widget
- Cambiar el orden visible en el widget
- Suprimir funciones en determinadas páginas web
- Personalizar el texto del widget
- Agregar una línea de asunto en el formulario de contacto
- Ocultar el botón "Ver artículo original"
- Limitar los resultados de la búsqueda
- Personalizar el texto del marcador de posición de búsqueda del centro de ayuda
- Configuración avanzada de Talk en el Web Widget (clásico)
- Configuración avanzada de Chat en el Web Widget (clásico)
- Ofrecer varias opciones de contacto a los usuarios finales
- Formatear el código para varios elementos del Web Widget (clásico)
Si desea información sobre cómo agregar el Web Widget (clásico) a su sitio web, consulte Uso del Web Widget (clásico) para incrustar la función de atención al cliente en un sitio web.
Si desea una lista completa de la documentación sobre el Web Widget (clásico), consulte Recursos del Web Widget (clásico).
Planificar las personalizaciones del Web Widget (clásico)
La mayoría de los administradores de Support no son desarrolladores de sitios web y más bien trabajan con otros para personalizar el Web Widget (clásico). En otras palabras, no son ellos los que se encargan de personalizar el Web Widget (clásico) y los sitios web. En su lugar trabajan con un desarrollador experto de su compañía o con un desarrollador externo que contratan especialmente para realizar los cambios.
El desarrollador web es la persona que realiza el trabajo de personalización y lo hace añadiendo código (la API del Web Widget (clásico)) al HTML del sitio web. Sin embargo, el administrador tiene que hacer lo suyo en este trabajo. Tiene que entender qué personalizaciones son posibles para el Web Widget (clásico) y tiene que decirle al desarrollador web qué es lo que quiere.
Algunos administradores que han trabajado con código HTML optan por hacer ellos mismos la personalización, lo cual está bien. De cualquier manera, personalizar el Web Widget (clásico) es un proceso que corresponde al administrador, requiere cierta planificación y debe seguir los siguientes pasos:
- Revisar la información de este artículo para entender qué personalizaciones avanzadas se pueden hacer.
- Reunirse con las partes interesadas de la compañía para elaborar una lista de requisitos para el Web Widget (clásico). ¿Qué colores conviene usar? ¿Cómo desea que se comporte el Web Widget (clásico)?
- Preparar una lista de las personalizaciones que se desean. Se debe ser lo más específico posible e incluir vínculos a la documentación de la API que le puedan servir de referencia al desarrollador.
- Darle la lista al desarrollador, que se encargará de personalizar el Web Widget (clásico) modificando el HTML del sitio web.
Cómo utilizar la documentación de la API del Web Widget (clásico)
Esta es información importante que puede ayudar a los desarrolladores a desplazarse por la documentación de la API del Web Widget (clásico) en el sitio para desarrolladores de Zendesk.
Sintaxis de la API y documentos actualizados y organizados para desarrolladores. La sintaxis de la API del Web Widget (clásico) ha cambiado, y también hemos reorganizado la documentación para desarrolladores sobre la API del Web Widget (clásico) para que sea más fácil encontrar el comando o la opción que se busca. Ahora la documentación está organizada por canal de producto (Centro de ayuda, tickets, Chat y Talk) o por las principales opciones y comandos. Si desea más información, consulte la documentación para desarrolladores para la API del Web Widget (clásico).
Nuevas API de Chat. Si desea información sobre cómo las API del antiguo Chat (Zopim) se corresponden con las API del Web Widget (clásico), consulte Migración de la sintaxis del widget de Chat a la sintaxis unificada del Web Widget (clásico).
Mostrar el widget en otro idioma
De manera predeterminada, el Web Widget (clásico) incrustado en un sitio web muestra el texto en el idioma del usuario final, según el idioma de su navegador. Por ejemplo, si el idioma del navegador del usuario final está configurado en de para alemán, el widget aparecerá en alemán para ese usuario final. Si el widget está incrustado en un centro de ayuda, mostrará el texto en función de la configuración de idioma del centro de ayuda.
El Web Widget (clásico) es compatible con un subconjunto de idiomas admitidos por Zendesk. Si el Web Widget (clásico) no admite el idioma del navegador del usuario final, el widget aparecerá en inglés. Si no puede obtener el idioma del navegador del usuario final, el widget adoptará el idioma especificado en Zendesk Support.
El widget se puede personalizar para que siempre aparezca en un determinado idioma usando el comando setLocale. Este comando establece el idioma solo para el widget y no reemplaza el idioma de la página que sirve de host.
Si desea más información, consulte la documentación para desarrolladores para el comando setLocale.
Formularios rellenados con los datos de contacto del usuario
Los datos como el nombre, la dirección de correo electrónico y el número de teléfono pueden rellenarse automáticamente en el formulario de contacto para ahorrarle al visitante unos segundos y el tedio de hacerlo ellos mismos. Esto abarca los formularios de ticket, formularios previos al chat y formularios de desconexión. Utilice los valores identify y prefill.
Con el valor prefill, se puede hacer que la información del usuario sea únicamente de lectura, lo cual es útil porque así se evita la duplicación de cuentas para el mismo usuario en Support.
Si desea más información, consulte la documentación dirigida a desarrolladores para los valores identify y prefill.
Desactivar los adjuntos en los tickets
Si esta función está activada, los usuarios pueden —de manera predeterminada— adjuntar archivos a los tickets enviados desde el Web Widget (clásico). Sin embargo, también se puede desactivar esta opción si es necesario.
Si desea más información, consulte la documentación para desarrolladores en relación al valor attachments del objeto contactForm.
Cambiar la ubicación del iniciador
De manera predeterminada, el Web Widget (clásico) está ubicado en la parte inferior derecha del navegador. Cuando un usuario hace clic en el iniciador del Web Widget (clásico), se abre y se expande hacia arriba.
Es posible elegir la ubicación del Web Widget (clásico) de manera que cambie de una página a otra: se puede colocar al lado izquierdo o derecho de una página, o se puede mover a la parte superior de la página para que se amplíe hacia abajo al hacer clic en él. El valor position permite colocar el Web Widget (clásico) en la parte superior izquierda, superior derecha, inferior izquierda o inferior derecha de la página.
Si desea más información, consulte la documentación para desarrolladores en relación al valor position.
Ajustar la ubicación del widget
Se puede utilizar el valor offset para cambiar la posición del Web Widget (clásico) en los dispositivos móviles o de escritorio. Use el valor position inicial como punto de referencia y luego use el valor offset para mover el Web Widget (clásico) en sentido horizontal, vertical, o ambos a partir de esa posición (en píxeles).
Si desea más información, consulte la documentación para desarrolladores en relación al valor offset.
Personalizar el color de los elementos del widget
Se puede especificar un esquema de color general para el Web Widget (clásico) (color del tema) y un color personalizado para el texto del iniciador, el botón de contacto y el encabezado (color del texto del tema) desde la página de administración del Web Widget (clásico) (consulte Configuración de los componentes del Web Widget (clásico)).
Sin embargo, para personalizar elementos específicos hay que usar el valor color. Es posible elegir un color único para cada uno de estos componentes del Web Widget (clásico):
- Iniciador
- Botón
- Texto del botón
- Lista de resultados
- Encabezado
- Vínculos a artículos
Para fines de accesibilidad, el Web Widget (clásico) ajusta automáticamente los colores usando un algoritmo que tiene el fin de garantizar una relación de contraste mínima que siga las pautas de WCAG.
Si desea más información sobre la personalización del color de los elementos del Web Widget (clásico) consulte la documentación para desarrolladores en relación al valor color.
Cambiar el orden visible en el widget
Se puede usar el valor zIndex, uno de los valores fundamentales del Web Widget (clásico), para establecer un nuevo valor y modificar cómo aparece el Web Widget (clásico) en comparación con otros elementos que aparecen en la misma ubicación en el sitio.
Si desea más información, consulte la documentación para desarrolladores en relación al valor zIndex.
Suprimir funciones del widget en determinadas páginas web
Es posible activar el formulario de contacto, Chat, Talk y el centro de ayuda en el Web Widget (clásico) y luego usar el valor supress para cambiar las funciones que se ofrecen en determinadas páginas del sitio web según las necesidades.
- Permitir la redirección de tickets en algunas páginas del centro de ayuda
- Permitir que Chat o el formulario de contacto no cuenten con redirección de tickets en otras páginas
- Ofrecer distintos niveles de atención a usuarios identificados y a los que han iniciado sesión
Si desea más información, consulte la documentación para desarrolladores en relación al valor supress.
Personalizar el texto del widget
Es posible cambiar el texto de los componentes del Web Widget (clásico) que figuran en la tabla que sigue. Asimismo, se puede personalizar el texto del marcador de posición de búsqueda del centro de ayuda.
| Componente | Detalles |
|---|---|
|
Objeto: launcher Configuración: chatLabel Descripción: texto del botón de inicio si Chat está activado y el Centro de ayuda no está activadoTexto predeterminado: Chat |
|
Objeto: launcher Configuración: label Descripción: texto del botón de inicio Texto predeterminado: Ayuda, Soporte o Comentarios, definidos en la página de administración del Web Widget (clásico) |
|
Objeto: helpCenter Configuración: title Descripción: título de la página del Centro de ayuda Texto predeterminado: Ayuda |
|
Objeto: contactForm Configuración: title Descripción: título del formulario de contactoTexto predeterminado: Dejar un mensaje o Contáctenos, definidos en la página de administración del Web Widget (clásico) |
|
Objeto: helpCenter Configuración: messageButton Descripción: texto del botón del formulario del centro de ayuda que carga el formulario de contacto (límite de ~20 caracteres) Texto predeterminado: Dejar un mensaje o Contáctenos, definidos en la página de administración del Web Widget (clásico) |
|
Objeto: helpCenter Configuración: chatButton Descripción: texto del botón que aparece en el formulario del centro de ayuda que carga Chat (límite de ~20 caracteres)Texto predeterminado: Ayuda, Soporte o Comentarios, definidos en la página de administración del Web Widget (clásico) |
El objeto translations se usa para cambiar parcialmente el texto predeterminado que se muestra en el Web Widget (clásico). Las traducciones están agrupadas por función, por ejemplo: iniciador, centro de ayuda y formulario de contacto.
Consulte una lista de todos los códigos de idioma posibles en Códigos de los idiomas admitidos por Zendesk.
Las traducciones de cada región son activadas por el idioma del navegador del usuario final. También se puede hacer que el widget siempre aparezca en un idioma específico y anular la configuración de idioma del navegador del usuario final. Si desea más información, consulte Mostrar el widget en otro idioma.
Agregar una línea de asunto en el formulario de contacto
Con el valor subject del objeto contactForm se puede hacer que el Web Widget (clásico) incluya un campo de asunto en el formulario de contacto predeterminado.
El formulario de contacto predeterminado está diseñado para promover una buena interacción y para que el usuario pueda tener una experiencia impecable al llenarlo. El formulario de contacto no incluye una línea de asunto, pero quizás le convenga agregar una para mejorar la experiencia de algunos clientes.
Si desea más información, consulte la documentación para desarrolladores en relación al valor subject del objeto contactForm.
Ocultar el botón "Ver artículo original"
El botón Ver artículo original conecta el artículo en el Web Widget (clásico) con el artículo en el propio centro de ayuda. Para ocultar este botón, se puede usar el objeto helpCenter y establecer la propiedad originalArticleButton en false.
Si desea más información, consulte la documentación para desarrolladores en relación al valor originalArticleButton del objeto helpCenter.
Limitar los resultados de la búsqueda
Con el valor filter del objeto helpCenter, se pueden limitar los resultados de las búsquedas realizadas desde el Web Widget (clásico) a los artículos en función de la categoría, la sección y los rótulos. Si desea más información, consulte la documentación para desarrolladores en relación al valor filter.
Desplácese hacia abajo para ver más ejemplos que no están incluidos en los documentos para desarrolladores y que ilustran algunas de las maneras en que se pueden limitar los resultados de la búsqueda.
Para limitar la búsqueda a una sección específica:
<script type="text/JavaScript">
window.zESettings = {
webWidget: {
helpCenter: {
filter: {
section: '200154474-Announcements'
}
}
}
};
</script>Para limitar la búsqueda a una categoría específica:
<script type="text/JavaScript">
window.zESettings = {
webWidget: {
helpCenter: {
filter: {
category: '200053794-General'
}
}
}
};
</script>Para limitar la búsqueda al contenido en varias categorías:
<script type="text/JavaScript">
window.zESettings = {
webWidget: {
helpCenter: {
filter: {
category: '115000669485,201742209'
}
}
}
};
</script>Para limitar la búsqueda al contenido con un rótulo específico:
<script type="text/JavaScript">
window.zESettings = {
webWidget: {
helpCenter: {
filter: {
label_names: 'orders'
}
}
}
};
</script>Para limitar la búsqueda al contenido en una categoría específica y con rótulos específicos:
<script type="text/JavaScript">
window.zESettings = {
webWidget: {
helpCenter: {
filter: {
category: '200053794-General',
label_names: 'Label One,Label Two,Label Three'
}
}
}
};
</script>Personalizar el texto del marcador de posición de búsqueda del centro de ayuda
El texto del marcador de posición que se muestra de manera predeterminada en el cuadro de búsqueda del centro de ayuda dice ¿En qué podemos ayudarle? Este texto se puede personalizar para que coincida con el idioma del usuario o para que cierto texto aparezca en un determinado idioma. Si desea más información, consulte la documentación para desarrolladores en relación al valor searchPlaceholder.
Si está activada la ayuda contextual, también se puede configurar el Web Widget (clásico) para que abra los artículos recomendados, para que los clientes puedan hallar lo que buscan más fácilmente. Si desea más información, consulte la documentación para desarrolladores en relación al comando setSuggestions del objeto helpCenter.
Configuración avanzada de Talk en el Web Widget (clásico)
Se pueden crear varias configuraciones para definir cómo funciona Talk en el Web Widget (clásico). Con cada configuración se puede personalizar el desvío de llamadas y mostrar las opciones para Talk en el Web Widget (clásico), en función de las necesidades y preferencias.
-
El grupo de agentes al cual se desea que se envíen las solicitudes de devolución de llamadas del Web Widget (clásico)
-
La prioridad de las solicitudes de devolución de llamada del Web Widget (clásico)
-
Mostrar la opción Solicite una devolución de llamada o la opción Llámenos, o ambas, en el Web Widget (clásico)
-
Mostrar un tiempo de espera aproximado en el Web Widget (clásico)
Si se ha creado una sola configuración de Talk en el Web Widget (clásico), esa será automáticamente la configuración predeterminada que se muestra en el Web Widget (clásico) cuando Talk está disponible.
Si se han creado varias configuraciones de Talk en el Web Widget (clásico), se puede usar el sobrenombre de Talk para seleccionar la configuración que se desea.
Si desea más información, consulte la documentación para desarrolladores en relación al objeto talk, el valor nickname, y el artículo Configuración de las opciones de Zendesk Talk para el Web Widget (clásico).
Configuración avanzada de Chat en el Web Widget (clásico)
Si está usando el chat en vivo en el Web Widget (clásico), puede ofrecer las funciones de Zendesk Chat en el Web Widget (clásico) para que los visitantes del sitio web puedan chatear con agentes, y enviar y recibir archivos que podrían ayudarles a resolver sus problemas. Los agentes también pueden enviar mensajes proactivos a los visitantes, para ver si desean o necesitan ayuda.
Si desea más información, consulte la documentación para desarrolladores en relación al objeto chat.
Si desea información sobre cómo las API del antiguo Chat (Zopim) se corresponden con las API del Web Widget (clásico), consulte Migración de la sintaxis del widget de Chat a la sintaxis unificada del Web Widget.
Ofrecer varias opciones de contacto a los usuarios finales
Es posible permitir a los usuarios finales elegir la opción de contacto que más les convenga. Podría ser conveniente personalizar el sitio web para que algunas páginas permitan que los usuarios finales hagan selecciones y otras no. El comportamiento exacto depende de si Chat o Talk está configurado para el Web Widget (clásico), y si hay un agente de chat conectado. Si es necesario, se puede personalizar el texto predeterminado de las opciones de contacto.
La siguiente es una lista del texto predeterminado:
| Opción de contacto | Texto predeterminado |
|---|---|
| Botón de contacto | Contáctenos |
| Rótulo de Chat (con un agente conectado) | Chat en vivo |
| Rótulo de Chat (con un agente desconectado) | Chat no está disponible |
| Rótulo del formulario de contacto | Dejar un mensaje |
Si desea más información, consulte la documentación para desarrolladores en relación al valor searchPlaceholder.
Ofrecer opciones de contacto con Chat
Si Chat está configurado para el Web Widget (clásico), los usuarios finales son enviados automáticamente a un chat, si hay un agente de chat disponible. Sin embargo, se puede permitir que los usuarios finales elijan entre chatear con un agente o completar un formulario de contacto, aun cuando un agente de chat está disponible. Si hay un agente de chat disponible cuando el usuario final hace clic en el iniciador, pero el agente se desconecta antes de que se inicie el chat, el usuario final podría ver un mensaje que indica que el agente de no está disponible.
Cuando los usuarios finales eligen chatear, no pueden usar el botón Atrás para regresar a las otras opciones de contacto. Este es un problema conocido. Para poder regresar, tienen que cerrar la sesión de chat completamente o volver a cargar la página.
Ofrecer opciones de contacto con Talk
Si Talk y las otras opciones de contacto están activadas en el Web Widget (clásico), y hay agentes conectados, las opciones de contacto se activan automáticamente.
Código de formato para varios componentes del widget
Los elementos que son específicos para el formulario de contacto, el Centro de ayuda y Zendesk Chat están anidados bajo dichos encabezados (contactForm, helpCenter y chat) en el código HTML del sitio, mientras que los elementos globales se incluyen por separado.
- La posición del Web Widget (clásico) en la pantalla se ha cambiado usando el valor offset. Offset es un elemento global, razón por la cual tiene su propia entrada.
- La búsqueda del centro de ayuda no incluye el botón Ver artículo original. Tiene el título “Search for help” para los usuarios que hablan inglés y “Have your say” para los de los demás idiomas.
- Chat desactivado.
- El título del formulario de contacto es “Message us” en inglés y “Contact us” en otros idiomas.
- El texto del botón del iniciador es “Make a request” en inglés y “Get help” en otros idiomas.
<script type="text/JavaScript">
window.zESettings = {
webWidget: {
offset: { horizontal: '400px', vertical: '400px' },
helpCenter: {
originalArticleButton: false,
title: {
'en-US': 'Search for help',
'*': 'Have your say'
}
},
chat: {
suppress: true
},
contactForm: {
title: {
'en-US': 'SMessage us',
'*': 'Contact us'
}
},
launcher: {
label: {
'en-US': 'Make a request',
'*': 'Get help'
}
}
}
};
</script>