# 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

<Aside type="caution">
#### Web SDK de Pushwoosh

Asegúrate de haber implementado el Web SDK de Pushwoosh en tu sitio web. Para hacerlo, por favor sigue nuestra [guía](/es/developer/pushwoosh-sdk/web-push-notifications/web-push-sdk-30/#integration).
</Aside>

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:

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

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

<Aside type="note">
Para que el botón sea visible para los visitantes que usan Chrome y Mozilla, necesitas especificar el `fcm_sender_id` en el archivo `manifest.json`; para Safari, especifica `safariWebsitePushID`.
</Aside>

## 2. Personalizar el botón

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).

```javascript
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',
    }
  }
}]);
```

<Aside type="tip">

Para maximizar las tasas de aceptación de notificaciones push, asegúrate de que los beneficios de la suscripción sean obvios para los usuarios. ¡Cambia el texto de `needSubscribe` para que explique el valor de tus mensajes, y la gente se suscribirá a las notificaciones!
</Aside>