Saltar al contenido
Guías de usuarioSoporte Solicitar demo Iniciar sesión
Pushwoosh.com

Botón de suscripción a notificaciones push

¡Consigue más suscriptores de notificaciones push y mejora la experiencia de usuario! Configura un botón de suscripción personalizado en tu sitio web para aumentar la tasa de aceptación. En lugar de mostrar automáticamente a los recién llegados el diálogo estándar, explica el valor de tus mensajes e invítalos a suscribirse a las notificaciones push cuando los usuarios estén satisfechos. ¡En dos sencillos pasos, tendrás un botón de suscripción a notificaciones push personalizado listo y funcionando!

1. Implementar el botón de suscripción del Web SDK

Anchor link to

Para mostrar el botón en tu sitio web, por favor añade el siguiente código en los parámetros de inicialización del Web SDK de Pushwoosh:

Pushwoosh.push(['init', {
  //...
  autoSubscribe: false,
  subscribeWidget: {
    enable: true,
  }
}]);

¡Asegúrate de deshabilitar autoSubscribe al configurar el botón!

2. Personalizar el botón

Anchor link to

Para que el botón coincida con la apariencia de tu sitio web, ¡personaliza su diseño! Puedes cambiar parámetros como el color de la campana, la posición, el borde y la sombra; además, es posible cambiar los textos de la información sobre herramientas (tooltip).

Pushwoosh.push(['init', {
  //...
  subscribeWidget: {
    enable: true,
    position: 'bottomLeft', //possible values: ‘bottomLeft’, ‘bottomRight’, ‘topLeft’, ‘topRight’
    bgColor: '#12AE7E',
    bellColor: 'white',
    bellStrokeColor: '#08754f',
    bellButtonBorder: '1px solid #379676',
    shadow: '0px 0px 6px rgba(0, 0, 0, 0.75)',
    size: '48px',
    indent: '20px',
    zIndex: '999999',
    tooltipText: {
      successSubscribe: '¡Te has suscrito correctamente!',
      needSubscribe: '¡Recibe notificaciones sobre noticias importantes!',
      blockSubscribe: 'Haz clic para ver cómo recibir notificaciones',
      alreadySubscribed: 'Ya estás suscrito'
    }
    buttonImage: 'https://url-image.jpg',
    contentImages: {
      chrome: 'https://url-image.jpg',
      mobileChrome: 'https://url-image.jpg',
      firefox: 'https://url-image.jpg',
      opera: 'https://url-image.jpg',
      safari: 'https://url-image.jpg',
      edge: 'https://url-image.jpg',
    }
  }
}]);