Popup de suscripción personalizado

El Popup de suscripción personalizado es una ventana emergente que se muestra en la página web y sugiere a los usuarios que se suscriban a las notificaciones push web. Se implementa con el SDK Web de Pushwoosh y permite superar las restricciones del navegador sobre la visualización de las solicitudes de suscripción nativas. Un popup de suscripción nativo solo puede mostrarse a un usuario en particular dos veces. Si un usuario no permite las notificaciones push y cierra el popup de suscripción nativo dos veces seguidas, no se volverá a mostrar y las notificaciones push se considerarán bloqueadas. A su vez, un Popup de suscripción personalizado puede mostrarse tantas veces como sea necesario, a menos que un usuario se suscriba o bloquee explícitamente las notificaciones push.

Un Popup de suscripción personalizado puede contener cualquier texto que explique las ventajas de suscribirse a las notificaciones push y dos botones personalizables: uno para la opción “Preguntar más tarde” y otro para “Suscribirse”.

Una vez que un usuario presiona el botón “Suscribirse”, aparece un popup de suscripción nativo.

Cuando un usuario presiona el botón “Preguntar más tarde” o simplemente cierra la ventana, el Popup de suscripción personalizado volverá a aparecer en un tiempo especificado (por defecto, una semana después; el retraso para reintentar se puede personalizar a través del parámetro “retryOffset”).

Implementación

Para habilitar y personalizar un Popup de suscripción personalizado, utilice el siguiente script al inicializar el SDK Web de Pushwoosh:

Ejemplo

Pushwoosh.push('init', {
    // . . .,
    subscribePopup: {
        enable: true,                      // (booleano) activación del popup
        text: 'Text on popup',             // (cadena) un texto para mostrar en el popup
        confirmSubscriptionButtonText: 'Subscribe', // (cadena) texto personalizado para el botón "Suscribirse"

        manualToggle: false,               // (booleano) control manual para mostrar el popup
        delay: 60,                         // (entero) un retraso entre la carga de la página y la aparición del popup
        retryOffset: 604800,               // (entero) un desfase en segundos para volver a mostrar el popup

        iconUrl: 'https://...',            // (cadena) URL del icono personalizado
        iconAlt: 'Descriptive text for your icon', // (cadena) texto ALT para el icono
        overlay: false,                    // (booleano) habilita la superposición de la página cuando se muestra el popup
        position: 'top',                   // (cadena) posición en la página. Valores posibles: 'top' | 'center' | 'bottom'
        mobileViewMargin: '10px',          // (cadena) margen para la vista móvil

        bgColor: '#fff',                   // (cadena) color de fondo del popup
        borderColor: 'transparent',        // (cadena) color del borde del popup
        boxShadow: '0 3px 6px rgba(0,0,0,0.16)', // (cadena) sombra del popup

        textColor: '#000',                 // (cadena) color del texto del popup
        textSize: 'inherit',               // (cadena) tamaño del texto del popup
        textWeight: 'normal',              // (cadena) grosor del texto del popup
        fontFamily: 'inherit',             // (cadena) fuente del texto del popup

        subscribeBtnBgColor: '#4285f4',         // (cadena) color de fondo del botón "Suscribirse"
        subscribeBtnTextColor: '#fff',          // (cadena) color del texto del botón "Suscribirse"
        subscribeBtnTextWeight: 'bold',         // (cadena) grosor del texto del botón "Suscribirse"
        subscribeBtnBorderColor: 'transparent', // (cadena) color del borde del botón "Suscribirse"
        subscribeBtnBorderRadius: '4px',        // (cadena) radio del borde del botón "Suscribirse"

        askLaterButtonText: 'Not now',          // (cadena) texto personalizado para el botón "Preguntar más tarde"
        askLaterBtnBgColor: 'transparent',      // (cadena) color de fondo del botón "Preguntar más tarde"
        askLaterBtnTextColor: '#000',           // (cadena) color del texto del botón "Preguntar más tarde"
        askLaterBtnBorderColor: 'transparent',  // (cadena) color del borde del botón "Preguntar más tarde"
        askLaterBtnBorderRadius: '4px',         // (cadena) radio del borde del botón "Preguntar más tarde"
        askLaterBtnTextWeight: 'normal',        // (cadena) grosor del texto del botón "Preguntar más tarde"

        theme: 'material',               // (cadena) tema del popup, valores posibles: 'material' | 'topbar'
        viewport: 'desktop'              // (cadena) viewport de destino, valores posibles: 'desktop' | 'mobile'
    }
});

Acceder a la instancia del Popup de suscripción personalizado

La instancia del Popup de suscripción personalizado está disponible a través de Pushwoosh.moduleRegistry.subscribePopup.

Nota: Esta instancia solo es accesible después de que se active el evento subscribe-popup-ready. Sin embargo, no estará disponible si el usuario ya está suscrito a las notificaciones push.

La instancia proporciona un método toggle() que le permite mostrar u ocultar manualmente el popup:

// Muestra u oculta el Popup de suscripción personalizado manualmente
Pushwoosh.moduleRegistry.subscribePopup.toggle(); // Alterna la visibilidad
Pushwoosh.moduleRegistry.subscribePopup.toggle(true); // Muestra el popup
Pushwoosh.moduleRegistry.subscribePopup.toggle(false); // Oculta el popup

Esto permite un mayor control sobre el comportamiento del popup directamente desde su código.

Temas

Por defecto, el Popup de suscripción utiliza un tema ‘material’ y superpone una parte de la pantalla cuando se muestra, ocultando así parte del contenido al visitante del sitio web.

Para evitar ocultar contenido valioso con el Popup de suscripción, utilice el tema ‘topbar’ para que el popup se muestre como una barra estrecha en la parte superior de la pantalla.

Eventos del Popup de suscripción personalizado

Los siguientes eventos están disponibles para rastrear las interacciones con el Popup de suscripción personalizado:

// Se ejecuta cuando el popup de suscripción personalizado se carga y está listo para mostrarse
// Nota: Este evento NO se activará si el usuario ya está suscrito a las notificaciones push.
Pushwoosh.addEventHandler('subscribe-popup-ready', function() {
  console.log("Triggered event: subscribe-popup-ready");
});

// Se ejecuta cuando se muestra el popup de suscripción personalizado
Pushwoosh.addEventHandler('subscribe-popup-show', function() {
  console.log("Triggered event: subscribe-popup-show");
});

// Se ejecuta cuando un usuario hace clic en el botón 'Suscribirse' en la ventana emergente
Pushwoosh.addEventHandler('subscribe-popup-accept', function() {
  console.log("Triggered event: subscribe-popup-accept");
});

// Se ejecuta cuando un usuario hace clic en el botón 'Preguntar más tarde' en la ventana emergente
Pushwoosh.addEventHandler('subscribe-popup-decline', function() {
  console.log("Triggered event: subscribe-popup-decline");
});

// Se ejecuta cuando el popup se oculta
Pushwoosh.addEventHandler('subscribe-popup-hide', function() {
  console.log("Triggered event: subscribe-popup-hide");
});