Widget de boîte de réception web

L’intégration de la Web Message Inbox à votre site web augmente considérablement les conversions. Un Widget de boîte de réception web prêt à l’emploi est nativement abonné à 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.

Prérequis

Pour intégrer la Message Inbox 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 celui-ci. N’importe quel élément DOM de la page peut servir de déclencheur. Spécifiez son ID comme « pwInbox » ou assignez un 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 de 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 URL vers une icône
  }
}]);

API

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

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