Personalización avanzada de widgets web (clásico) – Barbara Demos

Una vez que el administrador completa la configuración inicial de los componentes del Web Widget (clásico) en el Centro de administración y colabora con el desarrollador para agregar el Web Widget (clásico) al sitio web, puede personalizar aún más el Web Widget (clásico) si lo desea.

Este artículo es una descripción general de las personalizaciones avanzadas disponibles en el Web Widget (clásico) para administradores. El propósito del artículo es responder a la pregunta "¿Qué más puedo hacer con mi Web Widget (clásico)?" Explica el proceso de personalización para los administradores y también enumera la documentación que los desarrolladores web deben consultar.

Si es un desarrollador web (o un administrador con habilidades de desarrollo) y está buscando documentación completa sobre la configuración y los comandos de la API descritos en el artículo, así como otros ejemplos de código, consulte la documentación para desarrolladores del Web API Widget (clásico) .

Este artículo cubre los siguientes temas y personalizaciones de widgets:

Planificación de la personalización del widget web (clásico)
Exploración de la documentación de la API del Web Widget (clásico)
Mostrar su widget en un idioma diferente
Rellenar formularios con la información de contacto del usuario
Deshabilitar archivos adjuntos de boletos
Reposicionamiento del lanzador
Cambio de posición del widget
Personalización del color de los elementos del widget
Cambiar el orden visible en el widget
Supresión de características en páginas específicas
Personalización de texto en el widget
Inclusión del asunto en el formulario de contacto
Ocultar el botón "Ver artículo original"
Limitación de resultados de búsqueda
Personalización del texto del marcador de posición en el cuadro de búsqueda del centro de ayuda
Configuración avanzada de Talk en el Web Widget (clásico)
Configuración avanzada de chat en Web Widget (clásico)
Ofreciendo múltiples opciones de contacto para los usuarios finales
Formato de código de varios elementos del Web Widget (clásico)

Para obtener información sobre cómo agregar el Web Widget (clásico) a su sitio web, consulte Uso del Web Widget (clásico) para integrar el servicio de atención al cliente en su sitio web.

Para obtener una lista completa de la documentación del Web Widget (clásico), consulte Funciones del Web Widget (clásico).

Planificación de la personalización del widget web (clásico)

Muchos administradores de soporte no son desarrolladores web y trabajan con otra persona para implementar las personalizaciones (clásicas) del Web Widget. No personalizan el Web Widget (clásico) ni los sitios web. Trabajan con el desarrollador web de la empresa o de un tercero contratado para implementar los cambios.

El desarrollador web realiza el trabajo de personalización, agregando el código (Web Widget API (clásico)) al HTML del sitio web. Sin embargo, el administrador todavía es necesario para el trabajo. Necesita saber qué personalizaciones son posibles para el Web Widget (clásico) y decirle al desarrollador web lo que quiere.

Algunos administradores tienen experiencia con HTML y optan por realizar las personalizaciones ellos mismos, actuando como desarrolladores. Sin embargo, la personalización del Web Widget (clásico) es un proceso de administrador que requiere planificación e implica los siguientes pasos:

Estudie la información de este artículo para conocer las personalizaciones avanzadas disponibles.
Reúnase con las partes interesadas clave de la empresa para crear una lista de requisitos para el Web Widget (clásico). ¿Qué colores se deben usar? ¿Cómo debería comportarse el Web Widget (clásico)?
Prepare una lista de personalizaciones deseadas, sea lo más específico posible e incluya enlaces a la documentación de la API que el desarrollador web pueda consultar.
Pase la lista al desarrollador que personalizará el Web Widget (clásico) modificando el HTML del sitio web.
Exploración de la documentación de la API del Web Widget (clásico)

Tenemos información importante para ayudar a los desarrolladores a navegar por la documentación de la API Web Widget (clásica) en el sitio para desarrolladores de Zendesk.

Documentación para desarrolladores y sintaxis de la API actualizadas y organizadas: la sintaxis de la API del Web Widget (clásico) ha cambiado, y reorganizamos la documentación del desarrollador de la API del Web Widget (clásico) para que sea más fácil encontrar el comando o la configuración deseados. La documentación ahora está organizada por canal de producto (Centro de ayuda, Tickets, Chat y Talk) o por comandos y configuraciones principales. Para obtener más información, consulte la documentación para desarrolladores sobre la API de Web Widget (clásica).

Nuevas API de chat: para obtener información sobre cómo asignar las antiguas API de chat (Zopim) a las API de Web Widget (clásico), consulte Migración de la sintaxis de Chat Widget a la sintaxis unificada de Web Widget (clásico).

Mostrar su widget en un idioma diferente

De forma predeterminada, el Web Widget (clásico) incrustado en el 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 alemán, el widget se mostrará en alemán al usuario. Si el widget está incrustado en el centro de ayuda, muestra texto según la configuración de idioma del centro de ayuda.

El Web Widget (clásico) admite un subconjunto de idiomas compatibles con Zendesk. Si el Web Widget (clásico) no admite el idioma del navegador del usuario final, el widget estará en inglés de forma predeterminada. Si el widget no puede obtener el idioma del navegador del usuario final, el widget vuelve al idioma especificado en Zendesk Support de manera predeterminada.

Puede personalizar el widget para que siempre se muestre en un idioma específico mediante el comando setLocale. Este comando establece el idioma solo para el widget y no anula el idioma de su página principal.

Para obtener más información, consulte la documentación para desarrolladores sobre el comando setLocale.

Rellenar formularios con la información de contacto del usuario

Ahorre tiempo a los visitantes de su sitio web y evite su molestia y frustración completando previamente el nombre, el correo electrónico y el número de teléfono de los clientes en los formularios de contacto. Esto incluye formularios de ticket, formularios previos al chat y formularios de chat fuera de línea. Use la configuración de identificación y relleno automático.

También puede configurar la información del usuario como de solo lectura con la configuración de relleno automático. Esto es excelente, ya que evita la creación de cuentas de usuario duplicadas en Support.

Para obtener más información, consulte la documentación para desarrolladores sobre la configuración de identificación y relleno automático.

Deshabilitar archivos adjuntos de boletos

Si permite archivos adjuntos en los tickets, los usuarios pueden adjuntar archivos a los tickets enviados desde el Web Widget (clásico) de forma predeterminada. Sin embargo, si lo necesita, puede desactivar esta opción.

Para obtener más información, consulte la documentación para desarrolladores sobre la configuración de archivos adjuntos del objeto contactForm.

Reposicionamiento del lanzador

La posición predeterminada del Web Widget (clásico) es en la esquina inferior derecha del navegador. Cuando un usuario hace clic en el lanzador de Web Widget (clásico), se abre y se expande hasta la parte superior.

Puede seleccionar una ubicación para el Web Widget (clásico) que varía según la página (a la izquierda o a la derecha de la página, o en la parte superior, expandiéndose hacia abajo cuando se abre). Utilice la configuración de posición para colocar el Web Widget (clásico) en la esquina superior izquierda, superior derecha, inferior izquierda o inferior derecha de la página.

Para obtener más información, consulte la documentación del desarrollador sobre la configuración de la posición.

Cambio de posición del widget

Puede usar la configuración de desplazamiento para cambiar la posición del Web Widget (clásico) en su computadora o dispositivos móviles. Utilice la configuración de posición inicial como punto de referencia y utilice la configuración de desplazamiento para mover el Web Widget (clásico) horizontalmente, verticalmente o ambos (en píxeles).

Para obtener más información, consulte la documentación para desarrolladores sobre la configuración de la compensación.

Personalización del color de los elementos del widget

Puede especificar un esquema de color general para el Web Widget (clásico) (color del tema) y un color personalizado para el texto en el iniciador, el botón de contacto y el encabezado (color del texto del tema) en el widget de la página de administración web (clásico). Consulte Configurar los componentes en el Web Widget (clásico).

Sin embargo, si desea personalizar elementos específicos, debe usar la configuración de color. Puede elegir un color único para cada uno de estos componentes del Web Widget (clásico):

lanzacohetes
Botón
botón de texto
lista de resultados
Encabezamiento
Enlaces a artículos

Para una mejor accesibilidad, el Web Widget (clásico) ajusta automáticamente los colores utilizando un algoritmo que garantiza una relación de contraste mínima, como se especifica en las pautas de WCAG.

Para obtener más información sobre cómo personalizar los colores de los elementos del Web Widget (clásico), consulte la documentación para desarrolladores sobre la configuración de color.

Cambiar el orden visible en el widget

Puede usar la configuración zIndex, una de las principales del Web Widget (clásico), para establecer un nuevo valor y cambiar la visualización del Web Widget (clásico) en comparación con otros elementos en la misma ubicación en el sitio.

Para obtener más información, consulte la documentación para desarrolladores sobre la configuración de zIndex.

Supresión de funciones de widgets en páginas específicas

Es posible activar el Formulario de contacto, Chat, Talk y el Centro de ayuda en la página de administración del Web Widget (clásico) y usar la configuración suprimir para cambiar las funciones que se ofrecen en ciertas páginas de su sitio web para satisfacer mejor sus necesidades.

Por ejemplo, puede usar suprimir para:
Aumente la desviación de tickets con el centro de ayuda en algunas páginas
Ofrecer chat o formulario de contacto sin desvío en otras páginas
Ofrecer diferentes niveles de servicio a los usuarios.

Para obtener más información, consulte la documentación para desarrolladores sobre la configuración de supresión.

Personalización de texto en el widget

También puede cambiar el texto de los componentes del Web Widget (clásico) en la siguiente tabla y personalizar el texto del marcador de posición en la búsqueda del centro de ayuda.

Detalles del componente

Objeto: lanzador

Configuración: etiqueta de chat

Descripción: texto en el botón de inicio cuando Chat está habilitado y el Centro de ayuda no está habilitado

Texto predeterminado: Chat

Objeto: lanzador

Configuración: etiqueta

Descripción: texto en el botón de inicio

Texto predeterminado: Ayuda, Soporte o Comentarios, como se define en la página de administración del Web Widget (clásico)

Objeto: centro de ayuda

Configuración: título

Descripción: título de la página del Centro de ayuda

Texto predeterminado: Ayuda

Objeto: formulario de contacto

Configuración: título

Descripción: título del formulario de contacto

Texto predeterminado: Deje un mensaje o Contáctenos, como se define en la página de administración del Web Widget (clásico)

Objeto: centro de ayuda

Configuración: botón de mensaje

Descripción: texto en el botón del formulario del centro de ayuda que carga el formulario de contacto (límite de aproximadamente 20 caracteres)

Texto predeterminado: Deje un mensaje o Contáctenos, como se define en la página de administración del Web Widget (clásico)

Objeto: centro de ayuda

Configuración: botón de chat

Descripción: texto en el botón que se muestra en el formulario del centro de ayuda que carga el chat (límite aproximado de 20 caracteres)

Texto predeterminado: Ayuda, Soporte o Comentarios, como se define en la página de administración del Web Widget (clásico)

Utilice el objeto traducciones para cambiar partes del texto predeterminado que se muestra en el Web Widget (clásico). Las traducciones se agrupan por función, como Iniciador, Centro de ayuda o Formulario de contacto.

Nota: Si especifica el carácter comodín (*) para el nombre del idioma, la cadena se aplicará a todos los idiomas.

Consulte la lista de configuraciones regionales de uso común en Códigos de idioma para los idiomas admitidos por Zendesk.

Las traducciones del idioma local están habilitadas por el idioma del navegador del usuario final. También puede obligar al widget a mostrarse siempre en un idioma específico anulando la configuración de idioma del navegador del usuario final. Para obtener más información, consulte Mostrar su widget en un idioma diferente.

Inclusión del asunto en el formulario de contacto

Con la configuración del asunto en el objeto contactForm, puede configurar el Web Widget (clásico) para incluir un campo de asunto en el formulario de contacto estándar.

El formulario de contacto predeterminado está diseñado para impulsar el compromiso y brindar una experiencia de usuario elegante al completar el formulario. Aunque el formulario de contacto estándar no tiene una línea de asunto, puede agregarla para mejorar la experiencia de soporte para algunos clientes.

Para obtener más información, consulte la documentación para desarrolladores sobre la configuración del asunto en el objeto contactForm.

Ocultar el botón "Ver artículo original"

El botón Ver el artículo original crea un puente entre el artículo en el Web Widget (clásico) y en el centro de ayuda. Puede ocultar este botón usando el objeto helpCenter y establecer la propiedad originalArticleButton en false.

Para obtener más información, consulte la documentación para desarrolladores sobre cómo configurar el objeto del Centro de ayuda originalArticleButton .

Limitación de resultados de búsqueda

Con la configuración del filtro en el objeto HelpCenter, puede limitar los resultados de las búsquedas realizadas en el Web Widget (clásico) a artículos basados en categorías, secciones y etiquetas. Para obtener más información, consulte la documentación para desarrolladores sobre la configuración del filtro.

Desplácese hacia abajo para ver ejemplos que no están incluidos en la documentación para desarrolladores y que ilustran algunas formas en las que puede limitar los resultados de la búsqueda.

Nota: Para especificar varias secciones, categorías o etiquetas, use una coma para separar los valores (no se requieren espacios antes o después).

Cómo limitar la búsqueda a una sección específica:

Cómo limitar la búsqueda a una categoría específica:

Cómo limitar su búsqueda a contenido en múltiples categorías:

Cómo limitar la búsqueda a contenido con una etiqueta específica:

tener: {
label_names: 'pedidos'
}
}
}
};
</script>

Cómo limitar la búsqueda al contenido en una categoría específica con etiquetas específicas:

De forma predeterminada, el texto de marcador de posición que se muestra en el cuadro de búsqueda del Centro de ayuda dice ¿Cómo podemos ayudar? Puede personalizar este texto para que coincida con el idioma del usuario o para que se muestre un texto específico en algunos idiomas. Para obtener más información, consulte la documentación para desarrolladores sobre la configuración de marcador de posición de búsqueda.

Si la ayuda contextual está habilitada, puede configurar el Web Widget (clásico) para abrir artículos recomendados, lo que facilita el autoservicio para los clientes. Para obtener más información, consulte la documentación para desarrolladores sobre el comando setSuggestions del objeto helpCenter.

Configuración avanzada de Talk en el Web Widget (clásico)

Puede crear varias configuraciones que definen cómo se comporta Talk en el Web Widget (clásico). Con cada configuración, puede personalizar el desvío de llamadas y las opciones de visualización para Talk in Web Widget (clásico) según sus necesidades y preferencias.

Los principales atributos que puedes personalizar en cada configuración son:

Grupo de agentes al que desea que se reenvíen las solicitudes de devolución de llamada del Web Widget (clásico)

Prioridad de solicitudes de devolución de llamada del Web Widget (clásico)

Visualización de Solicitar una devolución de llamada, Llámenos o ambas opciones en el Web Widget (clásico)

Visualización del tiempo de espera estimado en Web Widget (clásico)

Si ha creado una única configuración de Talk en el Web Widget (clásico), esta será la configuración predeterminada que se mostrará en el Web Widget (clásico) siempre que Talk esté disponible.

Si ha creado varias configuraciones de Talk en el Web Widget (clásico), puede usar la definición de apodo de Talk para lograr la configuración deseada.

Nota: El apodo en la solicitud de la API de configuración de Talk debe coincidir exactamente con el apodo en su configuración de Talk, incluidos los espacios y las letras mayúsculas.

Para obtener más información, consulte la documentación para desarrolladores sobre el objeto de conversación, la configuración del apodo y el artículo Configuración de los ajustes de Zendesk Talk para el Web Widget (clásico).

Configuración avanzada de chat en Web Widget (clásico)

Si usa el chat en tiempo real en el Web Widget (clásico), puede hacer que las funciones de Zendesk Chat estén disponibles en el Web Widget (clásico) para que los visitantes de su sitio web puedan chatear con agentes o enviar y recibir archivos que pueden ayudar a resolver el problema. Los agentes también pueden enviar mensajes de forma proactiva a los visitantes para preguntarles si quieren o necesitan ayuda.

Para obtener más información, consulte la documentación para desarrolladores sobre el objeto de chat.

Con el widget de chat integrado y la experiencia web, puede personalizar aún más el objeto de chat con las siguientes configuraciones:
título
conserje
departamentos
prechatForm
fuera de líneaForm
notificaciones
etiquetas
autenticar

Para obtener información sobre cómo asignar las antiguas API de Chat (Zopim) a las API de Web Widget (clásico), consulte Migración de la sintaxis de Chat Widget a la sintaxis unificada de Web Widget.

Ofreciendo múltiples opciones de contacto para los usuarios finales

Puede permitir que los usuarios finales elijan una opción de contacto. También puede personalizar su sitio web para que algunas páginas permitan a los usuarios finales elegir y otras no. El comportamiento exacto depende de si Chat o Talk están configurados para Web Widget (clásico) y si el agente de chat está en línea. Si es necesario, puede personalizar el texto predeterminado para las opciones de contacto.

Listamos el texto por defecto:

Opción de contacto de texto predeterminada
Botón de contacto Contáctanos
Etiqueta de chat (con agente en línea) Chat en vivo
Etiqueta de chat (con agente fuera de línea) Chat no disponible
Etiqueta del formulario de contacto Dejar un mensaje

Para obtener más información, consulte la documentación para desarrolladores sobre cómo configurar las opciones de contacto.

Ofreciendo opciones de contacto de chat

Si Chat está configurado para Web Widget (clásico), los usuarios finales se enrutan automáticamente a un chat si hay un agente de Chat disponible. Sin embargo, puede permitir que los usuarios finales elijan entre chatear con un agente o completar un formulario de contacto, incluso si hay un agente de Chat disponible. Si un agente de chat está disponible cuando el usuario hace clic en el iniciador, pero ese agente abandona el chat antes de que comience, el usuario es nal, es posible que vea un mensaje informándole que el agente no está disponible.

Es un problema conocido: cuando los usuarios finales eligen chatear, no pueden usar el botón Atrás para elegir otras opciones de contacto. Para hacerlo, deben finalizar el chat por completo o actualizar la página.

Ofreciendo opciones de contacto con Talk

Si Talk y otras opciones de contacto están habilitadas en el Web Widget (clásico) y los agentes están en línea, las opciones de contacto se habilitarán automáticamente.

Formato de código de varios componentes de widgets
Nota: esta sección solo tiene fines educativos. Zendesk no admite ni garantiza el código. Tampoco es compatible con tecnologías de terceros como JavaScript, jQuery o CSS. Publique los problemas que encuentre en los comentarios o busque una solución en línea.

Los elementos específicos del Formulario de contacto, Centro de ayuda y Chat de Zendesk están anidados bajo estos encabezados (formulario de contacto, Centro de ayuda y chat) en el HTML de su sitio, mientras que los elementos globales se incluyen por separado.

Por ejemplo, se han definido las siguientes personalizaciones:
La posición del Web Widget (clásico) en la pantalla se ha cambiado utilizando la configuración de "desplazamiento". Offset es un elemento global, con su propia entrada.
Búsqueda en el Centro de ayuda: no incluye el botón Ver artículo original. El título "Buscar ayuda" para los usuarios cuyo idioma es el inglés y "Dí tu opinión" para los demás idiomas.
El chat está deshabilitado.
El título del formulario de contacto es "Envíenos un mensaje" para inglés y "Contáctenos" para otros idiomas.
El texto del botón de inicio es "Hacer una solicitud" en inglés y "Obtener ayuda" en otros idiomas.
<script tipo="texto/JavaScript">
ventana.zESettings = {
widget web: {
desplazamiento: {horizontal: '400px', vertical: '400px'},
centro de ayuda: {
botón del artículo original: falso,
título: {
'en-US': 'Buscar ayuda',
'*': 'Dí tu opinión'
}
},
chat: {
suprimir: cierto
},
Formulario de contacto: {
título: {
'en-US': 'SMándanos un mensaje',
'*': 'Contáctenos'
}
},
lanzador: {
etiqueta: {
'en-US': 'Hacer una solicitud',
'*': 'Consigue ayuda'
}
}
}
};
</script>