Configurar la Interfaz de Guide

Guide utiliza los botones predeterminados de desarrollo de marca y canales que usted define para determinar el aspecto del widget de Guide en su sitio web.

Mejores prácticas

• Trabajamos con su departamento de marketing para seleccionar imágenes para los botones de canales y colores de desarrollo de marca que complementen su sitio web.

• Use opciones homogéneas de botones de canales y desarrollo de marca en todo el sitio web.

• Si tiene múltiple sitios web, determine si necesita definir una personalización de marca única para cada uno.

• Para depender del color de marca predeterminado, no configure el Color del tema al definir botones o plantillas.

• Para anular el color predeterminado de desarrollo de marca, puede definir colores distintos en un botón o plantilla específicos. No se detectaron notas.

  • Si define un Color de tema para una plantilla, ese color anula la configuración de color de la marca.

  • Si establece un Color del tema para una plantilla y un Theme color para un botón, el color del botón anula la configuración de la plantilla y del color de marca.

• Para una personalización de estilo avanzada, puede utilizar las Guide API o trabajar con su representante de cuenta para crear una apariencia personalizada.

Crear un desarrollo de marca

La marca define los colores que se usarán de forma predeterminada para las plantillas, los botones y las ofertas proactivas. Guide proporciona la marca predeterminada que puede personalizar según sea necesario. Si es necesario, puede crear múltiples marcas. Por ejemplo, si planea ofrecer plantillas Guide en diferentes sitios web, puede usar una marca única para cada sitio web. Al definir la regla para mostrar la plantilla o la oferta proactiva, use la acción Establecer marca de Guide para determinar la marca que se utilizará.

View a short video on creating branding.

1. Haga clic en el selector de aplicaciones y seleccioneGuide.

2. Haga clic en Desarrollo de marca.

3. Haga clic en Nueva marca.

4. Ingrese un nombre de marca único para Título de desarrollo de marca.

5. Establezca Color del tema como el color primario que se usará para el widget de Guide. Establezca el color ingresando un valor hexadecimal o haciendo clic en el cuentagotas para seleccionar un color.

   El Color del tema se utiliza para:

   • El color de fondo del encabezado.

   • El botón minimizar.
   • El fondo del botón del canal.

   Se usa a menos que:

   • Un botón de canal define un color de tema que anula el color de la marca.

   • Una plantilla define un color de tema que anula el color de la marca.

   • Usted establece preferencias de marca adicionales más allá de la configuración principal. Por ejemplo, si define un color de botón para ofertas proactivas.

6. Configure el Color DE LA fuente que se usará para el texto que aparece en el widget Guide. El color que se usará en el texto en el encabezado y la flecha que aparece en los botones de minimizar y atrás.

   Para ayudar a las personas con discapacidad visual, mantenga una relación de contraste de 4.5:1 entre el Color del tema y el Color DE LA fuente. Hay herramientas en línea disponibles para comprobar el contraste.

7. Opcionalmente, ajuste aún más la marca utilizando las pestañas general, Guide Template, Knowledge Base y Proactive Offer.

   Obtenga más información sobre General pestaña

   Campo	Detalles
   Width (EM)	El ancho del widget Guide en ems. El ancho predeterminado es 23.125 ems.
   Height (EM)	La altura del widget Guide en ems. La altura predeterminada es 40 ems.
   Close Button Icon Color	El color a utilizar para el icono de cierre del widget.
   Close Button Background Color	El color de fondo que se usará para el icono de cierre del widget.

   Obtenga más información sobre Guide Templatepestaña

   Campo	Detalles
   Background Color	El color de fondo que se utilizará para las plantillas del portal del cliente.
   Color de fuente e Icono	La fuente y el color del icono que se utilizarán en las plantillas del portal del cliente.
   Tamaño de fuente del encabezado (EM)	El tamaño del encabezado, en ems, que se usará para las plantillas del portal del cliente. Para obtener mejores resultados, seleccione una plantilla de portal de clientes para obtener una vista previa y luego si es necesario ajuste el tamaño de la fuente del encabezado.
   Tamaño de fuente del subencabezado (EM)	El tamaño de fuente del subtítulo, en ems, que se usará para las plantillas del portal del cliente. Para obtener mejores resultados, seleccione una plantilla de portal de clientes para obtener una vista previa y si es necesario ajuste el tamaño de fuente del subtítulo.

   Obtenga más información sobreChat Windowpestaña

   Campo	Detalles
   Background Color	El color de fondo que se utilizará para el encabezado de la ventana de chat.
   Font and Icon Color	El color que se usará para el texto y los iconos en el encabezado de la ventana de chat.
   Mensaje del agente
   Bubble Background Color	El color de fondo que se utilizará para las burbujas de mensaje del agente.
   Color DE LA fuente	El color del texto que se usa para los mensajes del agente.
   Mensaje del cliente
   Bubble Background Color	El color de fondo que se usará para las burbujas de mensaje del cliente.
   Color DE LA fuente	El color de texto que se usará para los mensajes del cliente.

   Obtenga más información sobreKnowledge Basepestaña

   Campo	Detalles
   Background Color	El color de fondo que se utilizará al visualizar artículos de la base de conocimientos.
   	La fuente y el color del icono que se utilizarán al visualizar artículos de la base de conocimientos.

   Obtenga más información sobreProactive Offerpestaña

   Campo	Detalles
   Tamaño de fuente de encabezado (EM)	El tamaño de fuente, en ems, que se utilizará para un encabezado de oferta proactiva. Para obtener mejores resultados, mire la imagen de vista previa de la oferta proactiva y si es necesario ajuste el tamaño de fuente del encabezado.
   Body Text Font Size (EM)	El tamaño de fuente, en ems, que se utilizará para el texto del cuerpo en una oferta proactiva. Para obtener mejores resultados, mire la imagen de vista previa de la oferta proactiva y si es necesario ajuste el tamaño de fuente del cuerpo.
   Color del encabezado	El color a utilizar para el área de encabezado de la oferta proactiva.
   Color de fondo	El color a utilizar para el fondo de la oferta proactiva.
   Color DE LA fuente	El color de fuente a utilizar para la oferta proactiva. Incluye el texto del encabezado y el texto del cuerpo.
   Primary Button Background and Font Color	Color de fondo y fuente para el botón de llamada a la acción principal en ofertas proactivas.
   Fondo y Color DE LA fuente del botón secundario	Color de fondo y fuente para botones secundarios en ofertas proactivas.
   Posición en Móvil	Si la oferta proactiva debe aparecer en la parte Superior o Inferior de la pantalla en un dispositivo móvil.

8. Vista previa de los ajustes de marca en el panel ubicado en el lado derecho de la página. La vista previa está disponible en todas las pestañas, desde general hasta Oferta proactiva. A medida que modifica los ajustes de marca, la vista previa se actualiza automáticamente para reflejar los cambios, lo que le permite ver las actualizaciones de la interfaz de chat sin necesidad de guardar ni volver a cargar la página.

9. Haga clic en Default para convertir esto en la marca predeterminada. Cuando define un desarrollo de marca como predeterminado, se aplica a todas las plantillas nuevas y existentes.

10. Hacer clicGuardar.

Trabajar con Ems

Guide usa ems para especificar el tamaño de los elementos de la interfaz. Los ems permiten un tamaño responsivo de los elementos de la interfaz en diferentes dispositivos. El tamaño predeterminado de un em en Guide es de 14 píxeles. Puede cambiar esto mediante la API setFontSize.

Crear Botones de Canal

Cree un botón para cada canal que planee ofrecer en Guide. Después de crear los botones, debe asociarlos con los puntos de entrada. Puede anular el botón al definir una plantilla configurando un botón distinto para el punto de entrada.

View a short video on creating channel buttons.

1. Haga clic en el selector de aplicaciones y seleccioneGuide.

2. Haga clic en Buttons. Aparece la página Buttons y muestra los Botones creados anteriormente.

3. Haga clic en Botón nuevo.

4. Introduzca un Título para el botón.

5. Haga clic en Upload para cargar el Icono del botón.

   Las imágenes de los iconos deben ocupar menos de 50 KB, y es recomendable usar archivos .SVG.

6. Establezca una preferencia de Fondo para el botón.

   • Seleccione Sólido para usar un color de fondo para el botón de canal. Deje el campo Theme color en blanco para usar el color de fondo del botón de canal predeterminado establecido para la marca. O utilice el selector de color para seleccionar un color diferente para usar como color de fondo del botón. Establezca el color ingresando un valor hexadecimal o haciendo clic en el cuentagotas para seleccionar un color.

   • Seleccione Transparente para usar un fondo transparente para el botón.

7. Hacer clicGuardar.

Agregar variantes de Idioma para traducción

Puede crear variantes personalizadas de idioma para usar con Guide. Además, puede editar las etiquetas de Guide elementos de interfaz de usuario.

Agregar un Idioma personalizado

1. Haga clic en el selector de aplicaciones y seleccioneGuide.

2. Haga clic en Localización.

3. Haga clic en Nuevo idioma para agregar un nuevo idioma.

   Obtenga más información acerca de los campos de este paso

   Campo	Detalles
   Name	Ingrese un nombre para identificar el idioma.
   Language	Seleccione el Idioma de la lista desplegable.
   País	Seleccione el País de la lista desplegable.
   Alternativa	Seleccione un idioma Alternativa para usar si no hay una traducción para una etiqueta en particular.

4. Hacer clicGuardar. En la sección Traducciones aparecen las etiquetas predeterminadas de la interfaz de usuario que puede traducir. No hay texto proporcionado para traducir.
5. Traduzca las etiquetas de la interfaz de usuario. Para cada Translation Value, reemplace el texto predeterminado en inglés por una versión traducida en el nuevo idioma. Por ejemplo, si estuviera agregando el idioma portugués, podría reemplazar Hide Chat por Ocultar Chat.
6. You can also translate custom fields that you already created:
   1. Haga clic en Agregar en la parte inferior de la sección Translations.
   2. Para Clave de traducción, ingrese la Clave de traducción de Etiqueta del campo personalizado.
   3. Ingrese el texto traducido en el cuadro Valor de traducción.

7. Hacer clicGuardar.

Editar las Etiquetas de un Idioma

1. Haga clic en el selector de aplicaciones y seleccioneGuide.

2. Haga clic en Localización.

3. Haga clic en Edit junto al idioma que desea editar.

4. Desplácese hasta la etiqueta para editar y actualizar el Valor de traducción. Por ejemplo, puede cambiar la etiqueta del botón que se usa para iniciar chats, de Comenzar chat a Iniciar chat.

   Obtenga más información sobre etiquetas de encuesta previa al contacto
   

   Utilice estas claves de traducción para cambiar los mensajes de error y las etiquetas del lector de pantalla en la encuesta previa al contacto. Los mensajes modificados solo aparecen después de que el visitante hace clic en el botón para iniciar la conversación.

   Clave de traducción	Qué cambios realiza
   app.validation.error.mandatory	El mensaje que aparece debajo de un campo requerido vacío. Predeterminado: Los Campos requeridos no pueden estar en blanco.
   app.validation.error.invalidEmail	El mensaje que aparece debajo de una dirección DE correo electrónico con un formato incorrecto. Predeterminado: La dirección DE correo electrónico no es válida. Asegúrese de que contenga un nombre DE usuario, un símbolo "@" y un nombre de dominio.
   app.validation.error.shorterName	El mensaje que aparece cuando un nombre es demasiado largo.
   app.precontact.tree.nav.back.toPreviousLevel	Lo que anuncian los lectores de pantalla para el botón de retroceso en un campo de árbol. Predeterminado: Volver al nivel anterior.
   app.precontact.tree.nav.close	Lo que anuncian los lectores de pantalla para el botón de cierre en un campo de árbol. Predeterminado: Cerrar vista de árbol.

   Algunas organizaciones utilizan un conjunto de claves anterior: app.validation.mandatory, app.validation.invalidEmail y app.validation.shorterName. Si su mensaje no cambia después de editar una clave en la tabla, edite también la clave anterior correspondiente.

5. Hacer clicGuardar.

Interactuar con un widget de Guide

Los visitantes pueden interactuar con un widget de Guide usando el mouse o el teclado para moverse entre los botones. Keyboard navigation es limitada para los visitantes que utilizan un Apple Mac con el navegador Safari o Mozilla Firefox, a menos que esté habilitado en el navegador. El teclado funciona como se espera de forma predeterminada cuando se usa el navegador Chrome.