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 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 Guide en 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 Set Guide 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 elGeneralpestañ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 utilizará para el icono de cierre del widget.

   Obtenga más información sobre elGuide 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. 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 fuente del subtítulo, en ems, que se utilizará en 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 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 sobre elProactive Offerpestaña

   Campo	Detalles
   Heading Font Size (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 cuerpo del texto 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.
   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.

Trabajando con Ems

Guide usa ems para especificar el tamaño de los elementos de la interfaz. Ems permite dimensionar de forma adaptativa los elementos de la interfaz en diferentes dispositivos. El tamaño predeterminado de un em en Guide es 13 píxeles. Puedes cambiar esto utilizando la API setFontSize.

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.

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

2. Hacer clic en Buttons. Aparece la página Botones y enumera todos los botones creados previamente.

   Ver imagen

   

3. Hacer clic en New Button.

4. Ingrese un Title para el botón.

5. Haga clic en Upload 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.

6. Establezca una preferencia Background para el botón.

   • Seleccione Solid para utilizar un color de fondo para el botón del canal. Deje el campo Theme color en blanco para utilizar 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 para el botón. Establezca el color ingresando un valor hexadecimal o haciendo clic en el cuentagotas para seleccionar un color.

   • Seleccione Transparent para utilizar un fondo transparente para el botón.

7. 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 seleccioneGuide.

2. Hacer clic en Localization.

3. Haga clic en New 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	Seleccione un idioma Fallback para usar si no hay una traducción para una etiqueta en particular.

4. Hacer clic en Save. Aparecen las etiquetas predeterminadas provistas con Guide.
5. 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.
6. 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.

7. Haga clic en Ahorrar.

Editar las etiquetas de un idioma

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

2. Hacer clic en Localization.

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

4. 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.

5. 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.