Widget de boîte de réception web

L’intégration de la boîte de réception des messages web à votre site web augmente considérablement les conversions. Un widget de boîte de réception web prêt à l’emploi est abonné par défaut à toutes les méthodes nécessaires pour communiquer avec les utilisateurs. Il vous suffit d’intégrer le widget à votre site web et de personnaliser son apparence pour qu’elle corresponde à votre marque.

Définir inboxWidget.enable: true enregistre l’appareil d’un visiteur pour la livraison dans la boîte de réception même si le visiteur n’a pas accordé l’autorisation pour les notifications push, il peut donc atteindre les visiteurs qui ne se sont jamais abonnés aux notifications push.

Note importante sur le versioning du SDK (v3.66.0+)

À partir de la version 3.66.0, l’appareil d’un visiteur est suivi par un ID matériel (hardware ID) lié à son navigateur avant que le visiteur ne se connecte. Si le visiteur efface les données de son site, change de navigateur ou change d’appareil avant d’appeler registerUser, ce suivi est interrompu. L’historique de ses messages précédents est perdu et n’est pas reporté même après que le visiteur se soit connecté.

Prérequis

Pour intégrer la boîte de réception des messages pour les sites web, veuillez suivre le guide.

Intégration du widget

Lors de l’initialisation du WebSDK de Pushwoosh, ajoutez le paramètre inboxWidget :

Exemple

Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox'
  }
}]);

Déclencheur

Pour afficher le widget, vous devez spécifier un élément déclencheur pour le widget. N’importe quel élément DOM de la page peut servir de déclencheur. Spécifiez son ID comme « pwInbox » ou assignez n’importe quel ID personnalisé au paramètre triggerId lors de l’initialisation du SDK.
Lorsque le WebSDK est initialisé, le badge des messages non lus s’affiche sur l’élément déclencheur. Une fois que l’on appuie sur l’élément déclencheur, le widget apparaît sur la page.

Positionnement

Par défaut, le widget est situé dans la direction opposée au bord de l’écran le plus proche de l’élément déclencheur.
Vous pouvez définir la position du widget via les paramètres de configuration :

Exemple

Pushwoosh.push(['init', {

  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    position: 'top'
  }
}]);

Par défaut, le inboxWidget doit être placé avant la balise de fermeture </body>.
Affichez le widget n’importe où sur la page comme indiqué dans l’exemple ci-dessous :

Exemple

Pushwoosh.push(['init', {
  ...,
  inboxWidget: {

    enable: true,
    triggerId: 'pwInbox',
    appendTo: '.widget-parent-element-class'
  }
}]);

La recherche d’un élément parent est effectuée par querySelector, elle nécessite donc une spécification claire d’une classe, d’un id ou d’un élément.

Personnalisation du widget

Personnalisation des textes

Pour personnaliser le texte du widget, ajoutez les paramètres emptyInboxTitle et emptyInboxText :

Exemple

Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    title: 'Inbox',                                 // titre du widget
    emptyInboxTitle: 'You\'re all caught up',       // titre du widget de boîte de réception vide
    emptyInboxText: 'There are no new messages. Stay tuned!'    // texte du widget de boîte de réception vide
  }
}]);

Le résultat ressemble à ceci :

Personnalisation de l’apparence

Pour personnaliser l’apparence du widget, utilisez les paramètres suivants :

Exemple

Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    bgColor: '#ffffff',         // arrière-plan du widget
    borderColor: 'transparent', // couleur de la bordure du widget
    borderRadius: 4,            // rayon de la bordure du widget (px)
    widgetWidth: 350,           // largeur du widget (px)
    zIndex: 100                 // z-index
  }
}]);

Le badge du nombre de messages non lus peut être personnalisé comme suit :

Exemple

Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    badgeBgColor: '#ff4c00',    // couleur du badge
    badgeTextColor: '#ffffff'   // couleur du texte du badge
  }
}]);

Pour personnaliser les propriétés du texte, ajoutez le code suivant :

Exemple

Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    textColor: '#333333',                       // couleur du texte
    fontFamily: 'Helvetica, Arial, sans-serif', // police
    messageTitleColor: '#7a7a7a',               // couleur du titre des messages
    timeTextColor: '#c4c4c4',                   // couleur du texte de l'horodatage
    emptyInboxTitleColor: '#333333',            // couleur du titre de la boîte de réception vide
    emptyInboxTextColor: '#7a7a7a'              // couleur du texte de la boîte de réception vide
  }
}]);

Enfin, vous pouvez spécifier l’icône pour la boîte de réception vide :

Exemple

Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    emptyInboxIconUrl: 'https://pushon.pushwoosh.com/images/icon-empty-inbox.png'   // Chemin de l'URL vers une icône
  }
}]);

Personnalisation de la disposition des cellules

Le widget affiche un message selon l’une des quatre dispositions de cellule — classic, banner, captioned ou carousel — les mêmes dispositions que celles affichées dans l’aperçu de la campagne dans le panneau de contrôle. Une disposition qui ne peut pas être rendue avec le contenu du message est dégradée en classic : banner nécessite une image principale, captioned nécessite une image principale plus un titre et un corps, et carousel nécessite au moins une diapositive plus un titre et un corps.

Pour personnaliser l’apparence des dispositions, utilisez les paramètres suivants :

Exemple

Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    unreadDotColor: '#ff4c00',    // point non lu sur l'avatar classique
    avatarBgColor: '#e6e6e6',     // arrière-plan de l'avatar classique
    avatarTextColor: '#333333',   // couleur initiale de l'avatar classique
    avatarSize: 52,               // taille de l'avatar classique (px)
    mediaRadius: 8,               // rayon des coins des médias de bannière/légende/carrousel (px)
    slideCaptionColor: '#ffffff', // couleur du texte de la légende de la diapositive du carrousel
    slideScrimColor: '#000000',  // voile d'arrière-plan de la légende de la diapositive du carrousel
    pagerDotActiveColor: '#ff4c00', // point de page actif du carrousel
    pagerDotColor: '#c4c4c4'      // points de page inactifs du carrousel
  }
}]);

Restauration de la cellule classique d'avant la version 3.75

Définissez inboxWidget.legacyClassicCell: true pour conserver l’apparence précédente de la cellule classique — une colonne d’icônes de 40px au lieu de l’avatar arrondi de 52px, pas de point non lu, et un corps non limité. Les dispositions banner, captioned et carousel ne sont pas affectées par cette option.

API

Pour ouvrir ou fermer le widget, utilisez la méthode API suivante :

Exemple

Pushwoosh.pwinboxWidget.toggle(open?: boolean);

L’ouverture du widget le rafraîchit depuis le serveur, au maximum une fois toutes les 30 secondes — un message de boîte de réception d’application autonome utilise un canal sans push, donc rien d’autre n’en annonce un entre les chargements de page.