Introducción
Web Push permite enviar notificaciones a los usuarios que visitan un sitio web, incluso cuando no están activos en la página. Esta configuración se realiza directamente en la plataforma Inngage y requiere de unos pocos pasos para ser funcional.
Guía paso a paso para configurar Web Push:
1. Configuración de acceso:
- Inicie sesión en la plataforma Inngage.
- En el menú lateral, haga clic en “Configuración de la aplicación”.
- Seleccione la opción “Web Push”.
2. Agregar la URL del sitio web:
- En el campo de configuración de Chrome/Firefox, haga clic en "Agregar URL".
- Introduzca la URL del sitio web en el que desea configurar Web Push.
- Confirmar la adición de la URL.
3. Configuración de funciones adicionales (opcional):
Después de agregar la URL, configure funciones adicionales para mejorar la experiencia del usuario:
✅ Habilitar mensajes en el sitio: le permite mostrar mensajes dentro del sitio web.
✅ Habilitar captura de formulario: habilita la captura automática de formularios para la segmentación.
✅ Habilitar registros de scripts: habilita registros para la depuración y la supervisión de la configuración.
4. ¿Qué es SW.js?
✔ SW.js es un archivo JavaScript que actúa como un Service Worker, una tecnología utilizada para mejorar el rendimiento y la experiencia del usuario en aplicaciones web.
Funciones principales de SW.js:
1. Almacenamiento en caché y navegación sin conexión:
- Almacena archivos en la caché, lo que permite que el sitio web funcione incluso sin Internet.
2. Solicitar intercepción:
- Captura y modifica las solicitudes realizadas por el navegador, lo que permite cargar recursos desde la memoria caché antes de recuperarlos de la red.
3. Notificaciones push:
- Recibe notificaciones incluso cuando el sitio no esté abierto, habilitando alertas, promociones y actualizaciones.
4. Sincronización de fondo:
- Garantiza que las acciones del usuario, como el envío o la carga de formularios, se completen cuando Internet vuelva a estar disponible.
4.1. ¿Cómo instalar SW.js?
- Descargue el archivo sw.js y cárguelo en el servidor de su sitio web.
- Agregue este script al directorio raíz de su sitio web, asegurándose de que sea accesible a través de la URL:
https://www.YOURSITE.com.br/sw.js. - En el panel de Inngage, ingrese correctamente la ruta del archivo, el nombre del archivo y el alcance:
Ruta del archivo:
✔ Al registrar el Service Worker, informamos al navegador la ruta exacta del archivo JavaScript responsable de esta funcionalidad.
💡 Ejemplo:
Si registramos el archivo en:
De esta manera tendrá control sobre todas las páginas del dominio.
Nombre del archivo:
✔ El nombre del archivo es simplemente el nombre del script del Service Worker.
✔ Normalmente se utiliza sw.js, pero puede tener cualquier nombre, como service-worker.js, siempre que esté referenciado correctamente en el código de registro. (ejemplo: sw.js)
Alcance del registro:
✔ El alcance del registro define qué páginas del sitio web puede controlar el Service Worker.
✔ Ejemplo: / es válido para todo el sitio.
5. Inserción del código de integración:
- Acceda a las instrucciones de configuración de Web Push.
- Copie el código de integración que se muestra.
- Pegue este código dentro de la etiqueta <body> de su sitio web.
- Asegúrese de incluir el CDN de Inngage para que el servicio funcione correctamente.
6: Identificación de usuarios y eventos:
- Para identificar usuarios conectados y registrar eventos, utilice los códigos de integración disponibles:
7: Configuración previa al permiso:
✔ Recomendación: Habilitar esta opción aumenta la tasa de aceptación ya que permite al usuario recibir una introducción amigable antes del aviso del navegador.
Habilite la opción "Permiso previo" para optimizar la tasa de aceptación del usuario.
1. Habilitar permiso previo:
- Función: Habilita o deshabilita la visualización de la ventana emergente de permiso previo antes de que el navegador solicite el consentimiento oficial para las notificaciones.
2. Tiempo de espera:
- Función: Establece el tiempo (en segundos) que tardará en aparecer la ventana emergente de permiso previo después de que el usuario cargue la página.
- Ejemplo: si se configura en 20 segundos, la ventana emergente aparecerá 20 segundos después de que se cargue la página.
- Recomendación: Establezca un horario adecuado para que el usuario tenga tiempo de interactuar con el sitio antes de que se le solicite permitir las notificaciones.
3. Mensaje personalizado:
- Función: Establece el texto que se mostrará en la ventana emergente de permiso previo.
- Ejemplo: “Activa las notificaciones para recibir nuestras novedades”.
- Recomendación: Utilice un mensaje claro y objetivo para animar al usuario a aceptar.
4. Personalizar el botón Aceptar
- Texto del botón Aceptar: define el texto del botón que el usuario debe hacer clic para permitir las notificaciones.
- Ejemplo: “Quiero recibir”
- Color del botón: elija el color de fondo del botón aceptar.
- Ejemplo: #0091FF (Azul)
- Color del botón al pasar el cursor sobre él: elige el color del botón cuando el usuario pase el cursor sobre él.
- Ejemplo: #58B7FF (azul más claro)
- Color del texto del botón: establece el color del texto dentro del botón Aceptar.
- Ejemplo: #FFFFFF (Blanco)
5. Personalizar el botón Cancelar:
- Texto del botón Cancelar: establece el texto del botón que permite al usuario rechazar notificaciones.
- Ejemplo: “No, gracias”
- Color del texto del botón: establece el color del texto dentro del botón cancelar.
- Ejemplo: #000000 (Negro)
Resumen de personalizaciones:
Próximos pasos:
Después de completar estas configuraciones en Inngage, debe integrar Web Push en su sitio web. Para ello, siga las instrucciones técnicas detalladas en los enlaces a continuación:
Guía técnica de configuración de Web Push:
Implementando SW.js en el servidor
Si tiene alguna pregunta, consulte nuestro centro de ayuda o comuníquese con el soporte de Inngage.
