Configurar la intefaz 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últiples sitios web, determine si necesita definir una personalización de marca única para cada sitio web.

• Para utilizar el color de marca predeterminado, no configure 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. Observe lo siguiente:

  • 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 de los colores de la marca.

• Para aplicar un estilo personalizado avanzado, puede usar las Guide API o trabajar con su representante de cuenta para crear una apariencia personalizada.

Crear un desarrollo de marca

Marca establece los colores que se utilizará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 de Guide en diferentes sitios web, puede usar una marca única para cada sitio web. Al definir la regla para mostrar una plantilla o una 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. Escriba 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 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 configura 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 Color de LA fuente en el color 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. De manera opcional, 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
   Ancho (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.
   Color de fondo del botón Cerrar	El color de fondo que se usará para el icono de cierre del widget.

   Obtenga más información sobreGuide Templatepestaña

   Campo	Detalles
   Background Color	El color de fondo que se utilizará para las plantillas del portal del cliente.
   Font and Icon Color	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 usará para el encabezado de la ventana de chat.
   Color de fuente e Icono	El color que se usará para el texto y los íconos en el encabezado de la ventana de chat.
   Mensaje de agente
   Bubble Background Color	Color de fondo que se utilizará para las burbujas de mensaje del agente.
   Color de LA fuente	El color de texto que se usará para los mensajes del agente.
   Mensaje del cliente
   Bubble Background Color	El color de fondo que se utilizará 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 sobre elKnowledge Basepestaña

   Campo	Detalles
   Background Color	El color de fondo que se utilizará al visualizar artículos de la base de conocimientos.
   Font and Icon Color	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 del 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.
   Secondary Button Background and Font Color	Color de fondo y fuente para botones secundarios en ofertas proactivas.
   Position on Mobile	Si la oferta proactiva debe aparecer en la parte superior o parte inferior de la pantalla en un dispositivo móvil.

8. Vista previa de la configuración 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 la configuración de marca, la vista previa se actualiza automáticamente para reflejar sus cambios, lo que le permite ver las actualizaciones de la interfaz de chat sin necesidad de guardar ni recargar la página.

9. Haga clic en Default para convertir esta 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 Diversos medios de comunicación de voz y digitales que facilitan las interacciones con los clientes en un centro de contacto. que planea 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 Botones y se muestra una lista de los Botones creados anteriormente.

3. Haga clic en Botón nuevo.

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

5. Haga clic en Cargar para cargar el ícono 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 del canal. Deje el campo Theme color en blanco para usar el color de fondo predeterminado del botón de canal establecido para la marca. Или utilice el selector de color para seleccionar un color diferente para usarlo 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 la 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.
   Fallback	Seleccione un Alternativa idioma que se debe utilizar si no hay una traducción para una etiqueta en particular.

4. Hacer clicGuardar. Las etiquetas predeterminadas de la interfaz de usuario que puede traducir aparecen en la sección Traducciones. Estos están en inglés, que debe traducir al idioma deseado.
5. Traducir las etiquetas de la interfaz de usuario. Para cada Translation Value, reemplace el texto predeterminado en inglés con una versión traducida en el nuevo idioma. Por ejemplo, si estuviera agregando el idioma portugués, podría reemplazar Hide Chat con 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 Translation Key, ingrese la Label Translation Key del campo personalizado.
   3. Intro 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.

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. La navegación con teclado es limitada para los visitantes que usan un Apple Mac con el navegador Safari o Mozilla Firefox, a menos que esté habilitada en el navegador. El teclado funciona como se espera de forma predeterminada cuando se usa el navegador Chrome.