Bouton d'abonnement aux notifications push

Obtenez plus d’abonnés aux notifications push et améliorez l’expérience utilisateur ! Configurez un bouton d’abonnement personnalisé sur votre site web pour augmenter le taux d’opt-in. Au lieu d’afficher automatiquement la boîte de dialogue standard aux nouveaux visiteurs, expliquez la valeur de vos messages et invitez-les à s’abonner aux notifications push lorsque les utilisateurs sont satisfaits. En deux étapes faciles, votre bouton d’abonnement aux notifications push personnalisé sera prêt et fonctionnel !

1. Implémenter le bouton d’abonnement du SDK Web

Pour afficher le bouton sur votre site web, veuillez ajouter le code suivant dans les paramètres d’initialisation du SDK Web Pushwoosh :

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

Assurez-vous de désactiver autoSubscribe lors de la configuration du bouton !

2. Personnaliser le bouton

Pour que le bouton corresponde à l’apparence de votre site web, personnalisez son design ! Vous pouvez modifier des paramètres tels que la couleur de la cloche, sa position, sa bordure et son ombre ; de plus, il est possible de modifier les textes des infobulles.

Pushwoosh.push(['init', {
  //...
  subscribeWidget: {
    enable: true,
    position: 'bottomLeft', //valeurs possibles : ‘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: 'Vous êtes abonné avec succès !',
      needSubscribe: 'Recevez des notifications sur les actualités importantes !',
      blockSubscribe: 'Cliquez pour voir comment recevoir des notifications',
      alreadySubscribed: 'Vous êtes déjà abonné'
    }
    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',
    }
  }
}]);