Passer au contenu principal

Intégrer le widget

Widget de journal des modifications affichant les notifications

Le widget Ducalis informe les utilisateurs des nouvelles fonctionnalités directement dans votre produit. Intégrez-le pour augmenter l'engagement avec votre Tableau de votes.

Widget de journal des modifications et notifications​

Lorsque vous intégrez le widget, les utilisateurs reçoivent des notifications intégrées au produit concernant les nouvelles fonctionnalités. Lorsque vous déplacez des Idées vers le statut Terminé, le widget affiche les mises à jour avec une bulle de notification rouge.

Démo en direct : Visitez https://hi.ducalis.io/ et cliquez sur What's New dans le menu d'en-tête.

Intégrez n'importe où​

Intégrez le widget sur n'importe quelle page. Si les utilisateurs sont identifiés, ils verront des notifications personnelles sur tous les sous-domaines. Par exemple, lorsqu'un utilisateur lit une annonce et navigue vers une autre page, la bulle rouge n'apparaîtra plus jusqu'à la prochaine version.

Chez Ducalis, nous intégrons le widget sur :

Configurer le widget​

Le widget de journal des modifications comporte deux parties :

  • Code JavaScript de base du widget qui charge le widget
  • Un bouton pour ouvrir le widget
avertissement

Si votre Tableau de votes est privé avec des restrictions d'accès, vous devez transmettre les identités des utilisateurs au widget. Sinon, personne ne pourra y accéder.

1. Ouvrir les paramètres du Tableau de votes​

  1. Accédez aux paramètres du Tableau de votes.

    Page des paramètres du Tableau de votes

  2. Trouvez la section Embed (Intégrer).

  3. Cliquez sur Add 'What's New' Widget (Ajouter le widget 'Quoi de neuf').

2. Installer le code de base du widget​

Ajoutez ce code en bas des pages où vous souhaitez afficher le widget.

<!-- hi.ducalis.io Changelog Widget -->
<script>
  !function(b,c,f,d,a,e){b.dclsPxl||(((d=b.dclsPxl=function(){d.callMethod?d.callMethod.apply(d,arguments):d.queue.push(arguments)}).push=d).queue=[],(a=c.createElement("script")).async=!0,a.src=f,(e=c.getElementsByTagName("script")[0]).parentNode.insertBefore(a,e))}(window,document,"https://hi.ducalis.io/js/widget.js")
  dclsPxl("initWidget", {
    appId: "_YOUR_APP_ID", // Required
    boardId: "_YOUR_BOARD_ID", // Required
  });
</script>
<!-- End hi.ducalis.io Changelog Widget -->

3. Créer un bouton de widget​

Bouton de widget avec bulle de notification

Ajoutez une classe CSS à n'importe quel élément pour créer un bouton qui ouvre le widget et affiche les notifications :

<div class="Ducalis-changelog-widget">What's new</div>
Exemple de code pour le bouton de widget

Exemple de notre page d'accueil :

Bouton de widget dans l'en-tête de la page d'accueil

4. Fonctionnalités du widget dans la configuration de base​

Cette configuration de base fournit :

  • Le widget affiche les dernières Idées au statut Terminé, triées par date de publication
  • Bulle de notification pour les fonctionnalités nouvellement publiées (Idées déplacées vers Terminé)
  • Les visiteurs peuvent lire jusqu'à 20 Idées publiées
  • Lien vers le Tableau de votes pour consulter la feuille de route, ajouter des Idées, voter et commenter
  • Capture d'email pour les mises à jour hebdomadaires de la feuille de route

Trouvez les abonnés au Tableau de votes dans les paramètres du Tableau de votes.

Liste des abonnés au Tableau de votes

Configurer les options du widget​

Page par défaut​

Choisissez si la page Feuille de route ou Journal des modifications s'ouvre en premier dans votre widget.

Pour spécifier la page, configurez defaultView dans le code. Utilisez roadmap ou changelog :

dclsPxl("initWidget", {
  ...
    // optional, default state is undefined
    // Use 'roadmap' or 'changelog' to open specific page
    defaultView: undefined,
  ...
});

Pour les pages Journal des modifications et Feuille de route, vous pouvez éventuellement ouvrir un filtre ou une action spécifique (utilisateurs autorisés uniquement) :

dclsPxl("initWidget", {
   ...

   // optional,
   // use it to open a specific filter (only for authorized users)
   openNewIdea: true,
   myIdeas: true,
   myVotes: true,

   ...
});

Méthode d'authentification​

Choisissez entre l'authentification Ducalis ou votre propre méthode d'authentification.

Option 1 : Utiliser l'authentification Ducalis (par défaut)

Par défaut, l'authentification Ducalis est utilisée lorsque les clients souhaitent voter, ajouter des Idées ou commenter.

Option 2 : Utiliser votre propre authentification

Si vous utilisez votre propre authentification, spécifiez-la dans le code : onAuth: showUserAuth

dclsPxl("initWidget", {
    appId: "_YOUR_APP_ID", // Required
    boardId: "_YOUR_BOARD_ID", // Required
    ...
    onAuth: showUserAuth
    ...
});

Lorsque cette fonction est spécifiée, elle remplace l'authentification Ducalis. Vous gérez l'ensemble du processus d'authentification, mais vous devez transmettre l'utilisateur du widget authentifié : user.email + user.hash sont requis.

dclsPxl("initWidget", {
    // required
    appId: "dc9ae89*******",
    boardId: "78aef2c7c0********",

    user: {
        // required
        email: "Your user Email",
        hash: "User hash",
        ...
     },
     onAuth: showUserAuth
    ...
});

Personnaliser l'apparence du widget​

Après avoir intégré le widget de journal des modifications Ducalis, personnalisez-le pour correspondre à votre produit.

Ajoutez ces paramètres à votre code :

<script>
  !function(b,c,f,d,a,e){b.dclsPxl||(((d=b.dclsPxl=function(){d.callMethod?d.callMethod.apply(d,arguments):d.queue.push(arguments)}).push=d).queue=[],(a=c.createElement("script")).async=!0,a.src=f,(e=c.getElementsByTagName("script")[0]).parentNode.insertBefore(a,e))}(window,document,"https://hi.ducalis.io/js/widget.js")
  dclsPxl("initWidget", {
    appId: "_YOUR_APP_ID", // Required
    boardId: "_YOUR_BOARD_ID", // Required
    selector: "_YOUR_SELECTOR", // optional - default .Ducalis-changelog-widget
    width: "400", // optional, Widget width (minimal width 400px)
    debug: true, // optional - Always show Notification bubble and logs for events

    bubble: {
      selector: '#embedBoardBuble', // optional - use it for bubble without widget, default ".Ducalis-changelog-widget"
      className: 'some-class-name', // optional - clear initial styles. Usage for custom styles by className ONLY. Default undefined
      style: { // optional, customization initial styles. Default undefined
	right: '7px',
	top: '7px',
	backgroundColor: '#db3737',
	borderRadius: '4px',
	fontSize: '13px',
       }
     },
   });
 </script>

Migrer vers le nouveau paramètre bubble​

info

Les paramètres top, right, backgroundColor et color sont obsolètes. Utilisez bubble.style à la place.

Ajoutez le nouveau paramètre bubble.style :

bubble: {
    ...
    // optional, default state is undefined
    // customization initial styles
    style: {
	right: '7px',
	top: '7px',
	backgroundColor: '#db3737',
	borderRadius: '4px',
	fontSize: '13px',
    }
    ...
}

Mode débogage​

debug: true,

Lorsque vous ouvrez le widget, il marque toutes les mises à jour comme lues et la bulle rouge disparaît. Pour un meilleur test de mise en page, utilisez le mode débogage.

Le widget affichera toujours un cercle de notification rouge lorsque vous le fermez et le rouvrez. Cela vous aide à tester la position correcte.

Attacher la bulle de notification à n'importe quel élément​

selector: "_YOUR_SELECTOR"

Sélectionnez ou créez un élément pour déclencher le widget Ducalis. Utilisez l'ID ou la classe unique de cet élément pour le paramètre selector.

astuce

Si le sélecteur est une classe (et non un ID), commencez-le par un point. Pour la classe openWidget, votre sélecteur est .openWidget.

Pour votre widget selector, vous pouvez utiliser :

  • ID : #DucalisChangelogNotification, #someID, …
  • Classe : .DucalisChangelogNotification, .someClass, .some-class, …
  • Attribut : [data-bubble="1"], [data-whats-new], …
  • Mix : div.someClass[data-show-bubble="true"], a[href^="https://feedback.ducalis.io"], …

Couleurs de notification​

Adaptez les couleurs à votre produit. Couleurs par défaut :

backgroundColor: "#f04438", // Notification bubble Background color

color: "#fee4e2", // Notification bubble text color

Position de la bulle de notification​

Par défaut, la bulle de notification est positionnée par rapport à l'élément attaché au sélecteur.

Démo de la position de la bulle de notification

Si vous n'aimez pas la position de la bulle de notification, ajustez-la dans l'outil de développement du navigateur et ajoutez-la aux paramètres du widget :

top: "-10px", // Notification bubble position by top

right: "-10px", // Notification bubble position by right

Largeur du widget​

Par défaut, la largeur du widget est de 376 px. Vous pouvez la modifier :

width: "376px", // optional, Widget width

Classe CSS personnalisée​

Pour utilisation avancée uniquement. Ajoute un nom de classe personnalisé à la bulle de notification sans styles de notre part. Vous pouvez personnaliser la bulle de notification avec votre CSS.

bubble.className: "_SOME_CLASS_NAME"

bubble: {
    ...
    // optional - clear initial styles.
    // Usage for custom styles by className ONLY. Default undefined
    className: 'some-class-name',
    ...
}
info

Le paramètre bubbleClassName est obsolète. Utilisez bubble.className à la place.

Abonner les utilisateurs aux notes de version​

L'une des fonctionnalités les plus utiles des Tableaux de votes est l'automatisation des notes de version.

Étant donné que le Tableau de votes est une application distincte, l'auto-abonnement aux notes de version est activé par défaut pour éviter d'importer constamment des listes de nouveaux utilisateurs actifs.

Les utilisateurs sont automatiquement abonnés lorsque :

  1. Vous envoyez des données utilisateur à Ducalis via L'API Ducalis ou Widget (user.email + user.hash sont requis).

  2. L'utilisateur ouvre le widget ou le cadre du tableau.

Avec ces conditions remplies, les utilisateurs sont abonnés aux notes de version automatiquement.

avertissement

Pour que les utilisateurs reçoivent les mises à jour des notes de version, configurez un domaine email personnalisé.

dclsPxl("initWidget", {
    // required
    appId: "dc9ae89*******",
    boardId: "78aef2c7c0********",

    user: {
        // required
        email: "Your user Email",
        hash: "User hash",
        ...
    },

     // Auto subscribe current user on current board (needed user.email + user.hash)
    autoSubscribe: true,  // optional, default: true
});

Si vous remplissez les conditions ci-dessus mais que vous n'avez pas besoin d'abonner les utilisateurs automatiquement, changez en autoSubscribe: false.

Mis à jour : Cette semaine