Personalizar ventanas emergentes de chat proactivo

Las funciones emergentes descritas en esta página ya no son compatibles con el chat. Para continuar usando estas funciones, debe usar Guide para implementar el chat de Digital. Guide le permite crear reglas de participación para interactuar con los visitantes de su sitio web.

Las ventanas emergentes personalizables para Proactive Chat ofrecen más flexibilidad y opciones que básicas. Estas opciones emergentes están disponibles para los canalesClosed Los Agentes y contactos interactúan en tiempo real. Chat en vivoClosed Chat asincrónico en el que los contactos envían un mensaje de conversación en cualquier momento y esperan una respuesta. y Mensajería de chatClosed Diversos medios de comunicación de voz y digitales que facilitan las interacciones con los clientes en un centro de contacto.. Puede especificar:

  • En qué página de su sitio web aparece la ventana emergente.
  • Cuando aparezca la ventana emergente. Puede configurar ciertos eventos que desencadenan la aparición de una ventana emergente. Los Eventos pueden incluir cosas como que un visitante de una página web pase cierta cantidad de tiempo en una página, o que tenga cierta cantidad de artículos en su carrito de compras.
  • Cómo se ve la ventana emergente. Hay muchas opciones para personalizar la apariencia de las ventanas emergentes avanzadas, incluido el color del texto, el color del borde, las imágenes del borde y la ubicación de la ventana emergente.

Aplicaciones de Tag Manager

Para usar las ventanas emergentes personalizables, su sitio web debe tener una aplicación de administrador de etiquetasClosed Un fragmento de código colocado en el código HTML de un sitio web y utilizado por las aplicaciones de administración de etiquetas. Diferente de las etiquetas de código HTML o las etiquetas en contextos de redes sociales.. Los administradores de etiquetas son aplicaciones que pueden "observar" a los visitantes del sitio web y activar una acción que ocurra en respuesta. En el caso de Digital Experience (DX), la aplicación del administrador de etiquetas activa la aparición de una ventana emergente para un visitante.Puede utilizar Google Tag Manager u otro administrador de etiquetas, como Tealium.

En el administrador de etiquetas, usted define los eventos y las condiciones que desea que aparezcan ventanas emergentes a los visitantes del sitio web.Las condiciones le permiten ser muy específico sobre cuándo aparece la ventana emergente. Por ejemplo, si usted define el evento como que el visitante se desplace hacia abajo en una página, es posible que no desee que la ventana emergente aparezca para todos los visitantes que se desplacen en la página. Es posible que desee que la ventana emergente aparezca solo para los visitantes que se desplazan más que la mitad de la página hacia abajo. Puede establecer eso como la condición para el evento de desplazamiento de la página.

En Digital Experience (DX), usted crea un Automatización de Workflow trabajo con un activador que vincula el trabajo con el evento del administrador de etiquetas que usted definió.El trabajo es donde puede personalizar la apariencia de la ventana emergente.

Esto es lo que sucede cuando un visitante del sitio web está en una página web en la que configuró una ventana emergente para que aparezca:

  1. Un visitante del sitio web realiza una acción que cumple con las condiciones que estableció en el administrador de etiquetas.
  2. El administrador de etiquetas se comunica con Digital Experience (DX) mediante APIClosed Interfaz de programación de aplicaciones. Le permite automatizar ciertas funcionalidades al conectar su sistema NiCE CXone con otro software..
  3. El trabajo de automatización de Workflow vinculado al evento del administrador de etiquetas que se activó se ejecuta y muestra la ventana emergente al visitante en la página web que está visitando.

Requisitos de Advanced Pop-Up

Para utilizar ventanas emergentes de Chat proactivo avanzado, debe tener:

Preparación de Tag Gerente

Necesita configurar su aplicación de administración de etiquetasClosed Un fragmento de código colocado en el código HTML de un sitio web y utilizado por las aplicaciones de administración de etiquetas. Diferente de las etiquetas de código HTML o las etiquetas en contextos de redes sociales. para supervisar los eventos y las condiciones que desea que provoquen la aparición de ventanas emergentes digitales en su sitio web. En el administrador de etiquetas, debe configurar:

  • Evento desencadenante: El evento que el desencadenador "observa" mientras las personas navegan por su sitio web.Los administradores de etiquetas ofrecen una amplia variedad de opciones para eventos que un activador puede monitorear. Por ejemplo, puede elegir ver una página web determinada, hacer clic en determinados enlaces, desplazarse hasta determinadas partes de una página o el tiempo dedicado a una página.
  • Condiciones de Activación: Los detalles específicos sobre el evento de activación. Estos detalles ayudan al administrador de etiquetas a decidir en qué casos debe actuar. Por ejemplo, puede especificar hasta dónde debe desplazarse una persona en la página, los enlaces específicos que un visitante debe hacer clic, o cuánto tiempo debe pasar en la página.
  • Etiqueta: La etiqueta contiene información sobre lo que el administrador de etiquetas debe hacer cuando ocurre el evento desencadenante y se cumplen las condiciones. Para los pop-ups de Chat Proactivo de Digital Experience (DX), usted usará una etiqueta HTML personalizada que contiene un Snippet de código script que permite que la aplicación de administrador de etiquetas se comunique con Digital Experience (DX). El código para usar en el HTML personalizado es:

<script>

brandembassy(‘executeTrigger’, ‘[TRIGGER ID]’)

</script>

donde [TRIGGER ID] es el número de ID del disparador de automatización de flujo de trabajo que usted crea. Puede encontrar el ID en la URL del disparador cuando lo está viendo en modo de edición en Digital Experience (DX).

Es posible que deba coordinar con una persona de su organización que tenga experiencia con la aplicación de administración de etiquetas. Cada administrador de etiquetas es un poco diferente, por lo que es posible que sea necesario ajustar el formato de la secuencia de comandos HTML personalizada.

Crear un trabajo emergente de automatización del Flujo de trabajo

Seguir estos pasos para este trabajo le permite personalizar una ventana emergente de chat basada en una plantilla.

  1. Haga clic en el selector de aplicaciones icon of app selector y seleccioneACD.
  2. Vaya a Digital > Trabajos de automatización.

  3. Hacer clicAgregar.
  4. Entrar anombreque describe lo que hace el trabajo.
  5. En el menú desplegable Acción, seleccione Cuadro Emergente de chat.
  6. Ingrese un nombre de cuadro Emergente.
  7. Selecciona la Plantilla que desea utilizar para el diseño del cuadro emergente. Los ejemplos de cada plantilla aparecen debajo de la lista desplegable Plantilla.
  8. En la sección contenido, configure el texto y la imagen utilizados en la ventana emergente. En los campos de texto, puede ingresar texto sin formato o puede ingresar datos con formato para usar campos personalizados. El uso de campos personalizados puede ayudar a personalizar la experiencia de su cliente.

  9. En la sección Llamada a la Acción, seleccione Activar del menú desplegable Mostrar llamada a la acción si la plantilla que ha seleccionado admite una llamada a la acción y desea incluir una en esta ventana emergente.. Introducir el Texto de Llamada a la acción.
  10. En la sección Personalización del Diseño, configure la apariencia del tamaño, el fondo, los bordes y el texto de la ventana emergente. Si incluye colores, no necesita incluir etiquetas CSS, como background-color.solo necesita incluir el nombre del color, el número HEX (incluido el signo de número (#)). configuración RGB u otro método compatible con CSS para definir colores.
  11. En la sección Posición, seleccione la ubicación en la página desde la lista desplegable Posición. Puede modificar aún más la ubicación de la ventana emergente ingresando un número de píxeles en las cajas de texto Desplazamiento X y Desplazamiento Y.
  12. En la sección transferencia, seleccione hasta tres campos personalizados.
  13. Hacer clicGuardar.

Crear un trabajo para ventana emergente HTML

Seguir los pasos para este trabajo le permite crear su propia ventana emergente sin estar restringido a una plantilla. Puede agregar elementos más personalizados, como botones, formularios, enlaces y más.

  1. Haga clic en el selector de aplicaciones icon of app selector y seleccioneACD.
  2. Vaya a Digital > Trabajos de automatización.

  3. Hacer clicAgregar.
  4. Entrar anombreque describe lo que hace el trabajo.
  5. En el menú desplegable Acción, seleccione Cuadro Emergente de chat html.
  6. Ingrese un nombre de cuadro Emergente, diseño personalizado, y JS personalizado.
  7. En la sección Posición, seleccione la ubicación en la página en la lista desplegable Posición. Puede modificar aún más la ubicación de la ventana emergente ingresando un número de píxeles en las cajas de texto Desplazamiento X y Desplazamiento Y.
  8. Hacer clicGuardar.

Crear un trabajo para Mensaje de bienvenida con ventana emergente

Este trabajo funciona de manera levemente diferente a los demás. Con este trabajo, en lugar de solo una ventana emergente, se abre una ventana de chat y muestra un mensaje de bienvenida.

  1. Haga clic en el selector de aplicaciones icon of app selector y seleccioneACD.
  2. Vaya a Digital > Trabajos de automatización.

  3. Hacer clicAgregar.
  4. Entrar anombreque describe lo que hace el trabajo.
  5. En el menú desplegable Acción, seleccione Mensaje de bienvenida de chat.
  6. Ingrese un nombre de Mensaje de bienvenida y el texto del cuerpo Principal. Seleccione hasta tres campos personalizados.
  7. Hacer clicGuardar.

Crear un activador de automatización de Flujo de trabajo

  1. Haga clic en el selector de aplicaciones icon of app selector y seleccioneACD.
  2. Vaya a Digital > Activadores de automatización.

  3. Haga clic en Agregar activador.
  4. Entre un nombre para el gatillo.
  5. Seleccione Activado por APIcomo el Evento.
  6. Desde la lista desplegable Tipo de datos, seleccione Ventana de chat.
  7. En el campo ejecución retrasada, ingrese la cantidad de segundos que Digital Engagement debe esperar después de que ocurra el evento seleccionado antes de activar el disparador. Si quieres que suceda de inmediato, ingresa0.
  8. Si tiene carpetas que organizan sus disparadores, puede seleccionar en qué carpeta colocar este disparador desde el menú desplegable.
  9. Hacer clicGuardar.

Agregar Condiciones

Si ingresó un valor en el campo Delayed execution al crear un disparador, asegúrese de que las configuraciones de condición no excedan ese tiempo. Por ejemplo, si configuró el tiempo de Delayed execution en 86400 segundos, o 24 horas, no puede agregar una condición de Contact status update time con un periodo de tiempo mayor a 1 día.

Si ingresó un valor en el campo Delayed execution cuando creó un desencadenador, configure las condiciones tanto en las secciones Conditions y Delayed conditions como únicamente en la sección Conditions normal. Si solo configura Delayed conditions, el sistema podría duplicar eventos.

  1. En la página de detalles, haga clic en Agregar Condición.
  2. Use el menú desplegable para seleccionar la condición que desea. Consulte la tabla a continuación para ver una lista de condiciones disponibles para lo que acaba de crear.
  3. Haga clic en Seleccionar.
  4. Algunas condiciones requieren una configuración adicional. Consulte la tabla siguiente para obtener instrucciones.

Agregar un trabajo

  1. Desde la página de detalles de este desencadenador, haga clic en Agregar trabajo existente.
  2. Utilice el menú desplegable para seleccionar este trabajo. El menú desplegable muestra el nombre que le asignó al trabajo, no la Acción del trabajo.
  3. Hacer clicAgregar.
  4. Haga clic en Activar.

Cuando su Desencadenador esté completamente configurado con Condiciones y Trabajos, haga clic en Activar. A continuación, asegúrese de haber configurado completamente su administrador de etiquetas, incluyendo agregando el script a la etiqueta HTML personalizada.