# 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](/es/developer/pushwoosh-sdk/web-push-notifications/web-push-sdk-30/#integration) 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](/es/developer/pushwoosh-sdk/web-push-notifications/web-push-sdk-30/#integration):
```javascript title="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:
```javascript
// 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**:
```javascript
// 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");
});
```