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.

Prérequis

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

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

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 :

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 :

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 des textes

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

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 :

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 :

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 :

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 :

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 :

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
  }
}]);

Le gérer dans le Panneau de configuration

Le site charge le SDK Web depuis le CDN de Pushwoosh, comme l’indique la carte. La carte fonctionne quelle que soit la valeur de Settings source, l’extrait d’initialisation de votre site ou cette page (voir Web Push SDK 3.0), mais la version du SDK requise dépend de cette source :
- L’extrait d’initialisation de votre site : SDK Web 3.93.1 ou ultérieur. Un SDK plus ancien ignore la carte et lit inboxWidget uniquement depuis l’extrait.
- Cette page : SDK Web 3.92 ou ultérieur pour les valeurs de la carte, et 3.93.0 ou ultérieur pour la désactivation sur npm décrite ci-dessous.
La page contient l’élément qui ouvre la boîte de réception, #pwInbox par défaut. S’il est absent, la boîte de réception ne s’ouvre pas, et la console du navigateur affiche une erreur Error during Pushwoosh initialization qui nomme l’élément manquant et indique où modifier son ID.
Sur un site qui installe le SDK depuis npm, la carte peut désactiver le widget mais pas l’activer, car le site construit lui-même le widget.

Pour configurer le widget depuis le Panneau de configuration :

Allez dans Settings → Configure platforms → Web.
Sur la carte Inbox widget, cliquez sur Configure.
Activez Show the inbox on the site.
Remplissez les champs que vous souhaitez gérer depuis le panneau et laissez les autres vides. Un champ vide n’est pas enregistré : la valeur de l’extrait, ou la valeur par défaut du SDK, continue donc de s’appliquer. Laissez ID of the element that opens the inbox et Insert into (CSS selector) vides pour conserver triggerId et appendTo dans l’extrait, à côté du balisage vers lequel ils pointent.
Vérifiez le résultat dans l’aperçu. Basculez entre With messages et No messages pour voir les deux états.
Enregistrez le formulaire. Width, px accepte un nombre entier de 200 à 1200, et Corner radius, px de 0 à 64. Toute autre valeur affiche une erreur sous le champ et n’est pas enregistrée.

Fonctionnement de la carte avec l’extrait

Les valeurs enregistrées dans la carte remplacent les mêmes clés inboxWidget de l’extrait d’initialisation, clé par clé. Chaque champ définit une clé :

Section	Champ	Clé `inboxWidget`
Placement	ID of the element that opens the inbox	`triggerId`
Placement	Opens	`position`
Placement	Insert into (CSS selector)	`appendTo`
Texts	Widget title	`title`
Texts	Title when there are no messages	`emptyInboxTitle`
Texts	Text when there are no messages	`emptyInboxText`
Texts	Image when there are no messages (URL)	`emptyInboxIconUrl`
Appearance	Width, px (200–1200)	`widgetWidth`
Appearance	Corner radius, px (0–64)	`borderRadius`
Appearance	Font	`fontFamily`
Appearance	Background, Text, Border	`bgColor`, `textColor`, `borderColor`
Appearance	Counter background, Counter text, Unread mark	`badgeBgColor`, `badgeTextColor`, `unreadDotColor`

Les clés que la carte ne propose pas, comme les paramètres de disposition des cellules et legacyClassicCell, sont toujours lues depuis l’extrait.

L’interrupteur Show the inbox on the site fonctionne de la même manière. Tant qu’il n’est pas enregistré dans le panneau, le badge de la carte indique Set in the snippet et la valeur enable de l’extrait détermine si le widget s’affiche. Une fois l’interrupteur enregistré, le badge indique On ou Off et la carte remplace l’extrait :

Off masque le widget même si l’extrait définit enable: true.
On affiche le widget même si l’extrait ne contient aucun inboxWidget. Comme enable: true, il enregistre les visiteurs pour la livraison dans la boîte de réception sans autorisation pour les notifications push.

Les modifications enregistrées atteignent le site en moins d’une minute, au prochain chargement de la page.

Pour rendre la gestion du widget à l’extrait, cliquez sur Return to snippet sur la carte et confirmez. Le bouton apparaît dès qu’une valeur est enregistrée dans la carte. Il supprime tous les paramètres de la boîte de réception enregistrés dans le panneau, et le site utilise de nouveau les paramètres inboxWidget de son extrait.

API

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

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.