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.

Prácticas recomendadas

• 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 varios sitios web, determine si necesita definir una única personalización de marca para cada uno.

• Para basarse en el color predeterminado de la marca, no configure el Theme color al definir los botones o plantillas.

• Para anular el color predeterminado de desarrollo de marca, puede definir colores distintos en un botón o plantilla específicos. Tenga en cuenta lo siguiente:

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

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

• Para aplicar estilos personalizados avanzados, puede usar las API Guide o consultar a su Representante de cuenta CXone para crear un aspecto personalizado.

Crear un desarrollo de marca

La marca define los colores que se utilizarán de forma predeterminada para plantillas, botones y ofertas proactivas. Guide proporciona la marca Default que puede personalizar según sea necesario. Si fuera necesario, puede crear varias personalizaciones de marca. Por ejemplo, si tiene previsto ofrecer plantillas de Guía Guíaen distintos sitios web, puede usar una personalización de marca única para cada uno. Al definir la regla para mostrar una plantilla o una oferta proactiva, utilice la acción Guide Set Branding para determinar la marca por utilizar.

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

2. Hacer clic en Branding.

3. Hacer clic en New Branding.

4. Introduzca un nombre de marca único para Branding Title.

5. Establezca Theme Color el color principal que se utilizará para el widget de Guide. Establezca el color ingresando un valor hexadecimal o haciendo clic en el cuentagotas para seleccionar un color.

   El Theme Color se usa 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.

   • Puede establecer otras preferencias de marca más allá de las configuraciones principales. Por ejemplo, si define un color de botón para ofertas proactivas.

6. Defina Font Color al color que se utilizará 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 Theme Color y Font Color. 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 los campos enGeneralpestaña

   Campo	Detalles
   Width (EM)	El ancho del widget de Guide en ems. El tamaño de em predeterminado se basa en la configuración de CSS o la configuración del navegador. Para obtener mejores resultados, seleccione una plantilla de portal de clientes para obtener una vista previa y luego ajuste el ancho del widget Guide si es necesario.
   Height (EM)	La altura del widget de Guide en ems. El tamaño de em predeterminado se basa en la configuración de CSS o la configuración del navegador. Para obtener mejores resultados, seleccione una plantilla de portal de clientes para obtener una vista previa y luego ajuste la altura del widget Guide si es necesario.
   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 utilizará para el icono de cierre del widget.

   Obtenga más información sobre los campos enGuide 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.
   Heading Font Size (EM)	El tamaño del encabezado, en ems, que se utilizará en las plantillas del portal del cliente. El tamaño de em predeterminado se basa en la configuración de CSS o la configuración del navegador. 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.
   Subheading Font Size (EM)	El tamaño de la fuente de subencabezado, en ems, que se utilizará en las plantillas del portal del cliente. El tamaño de em predeterminado se basa en la configuración de CSS o la configuración del navegador. 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 sobre los campos enKnowledge 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 sobre los campos enProactive Offerpestaña

   Campo	Detalles
   Heading Font Size (EM)	El tamaño de fuente en ems a utilizar para un encabezado de oferta proactiva. El tamaño de em predeterminado se basa en la configuración de CSS o la configuración del navegador. 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 cuerpo del texto en una oferta proactiva. El tamaño de em predeterminado se basa en la configuración de CSS o la configuración del navegador. 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.
   Header Color	El color a utilizar para el área de encabezado de la oferta proactiva.
   Background Color	El color a utilizar para el fondo de la oferta proactiva.
   Font Color	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 Top o Bottom inferior de la pantalla en un dispositivo móvil.

8. Obtenga una vista previa de la configuración de marca seleccionando una plantilla de la lista desplegable en el lado derecho de la página. O bien, para obtener una vista previa de la marca para ofertas proactivas, haga clic en la pestaña Proactive Offer. Si personaliza esta configuración, aparecerá una vista previa a la derecha.

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

10. Hacer clic en Save.

Crear botones de canales

Cree un botón para cada canal Una forma de que los contactos interactúen con agentes o bots. Un canal puede ser de voz, correo electrónico, chat, redes sociales, etc. que tenga previsto 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 seleccioneACD.

2. Ir a Digital > Points of Contact Digital.

3. En General channel features, haga clic en Guide.

4. Desplácese hacia abajo a la sección Buttons y haga clic en Add button.

   Ver imagen

   

5. Ingrese un Name para el botón.

6. Haga clic en Choose File para cargar el Icon para el botón.

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

7. Si fuera necesario, defina un color de fondo para el botón de canales en el campo Theme color .

   Deje este campo en blanco para usar el color de fondo predeterminado del botón de canales para la marca.

   Para usar un fondo transpartente para el botón, seleccione Transparent background.

8. Hacer clic en Save.

Agregar variantes de idioma para Traducción

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

Agregar un idioma personalizado

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

2. Ir a Digital > Points of Contact Digital.

3. En General channel features, hacer clic en Guide.

4. Hacer clic en Translations.

5. Haga clic en Add Language para agregar un nuevo idioma.

   Obtenga más información sobre los campos en este paso

   Campo	Detalles
   Name	Ingrese un nombre para identificar el idioma.
   Language	Seleccione el Language de la lista desplegable.
   Country	Seleccione el Country de la lista desplegable.
   Fallback	Elija un Fallback idioma a usar si no hay la traducción de una etiqueta en particular.

6. Hacer clic en Save. Aparecen las etiquetas predeterminadas provistas con Guide.
7. Por cada Translation Key, ingrese un Translation Value. Esta es la cadena que se muestra a los visitantes en el widget Guide. No puede cambiar la Translation Key para las etiquetas predeterminadas incluidas con Guide.
8. Si fuera necesario, cree nuevas claves de traducción haciendo clic en Agregar en la parte inferior de la página. Defina el Translation Key y el Translation Value. Puede cambiar la Translation Key de cualquier etiqueta nueva que cree. Si agrega claves de traducción nuevas, asegúrese de proporcionar los valores traducidos en todos los idiomas que ofrezca a sus visitantes.

9. Haga clic en Guardar.

Editar las etiquetas de un idioma

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

2. Ir a > Points of Contact Digital.

3. En General channel features, hacer clic en Guide.

4. Hacer clic en Translations.

5. Haga clic en Edit junto al idioma que desee editar.

6. Desplácese hasta la etiqueta para editar y actualizar el Translation Value. Por ejemplo, puede cambiar la etiqueta del botón que iniciar chats de Begin Chat a Start Chat.

7. Hacer clic en Save.

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. Tenga en cuenta que la navegación del teclado es limitada para los visitantes que usen Mac con el navegador Safari o Firefox, a menos que esté activada en el navegador. Con el navegador Chrome, las teclas funcionan según lo previsto de manera predeterminada.