En ce qui concerne le widget Feedier,

​

Sources → Enquêtes → Partager → Widget

​

Sélectionnez le bouton et cliquez sur copier pour sélectionner le code du widget.

​

​

Cliquez sur le bouton Enregistrer et prévisualiser pour afficher vos modifications et prévisualiser le widget.

​

L'ajout d'attributs est essentiel pour rendre le feedback collecté par le biais du widget exploitable à partir du tableau de bord Feedier. Il donne de la profondeur aux informations et permet de détecter plus rapidement les tendances ou les problèmes.

Lors de l'ajout du widget, les attributs les plus courants peuvent être les suivants

Feedier n'importe jamais automatiquement les données de l'utilisateur, ni les données de la page où il est chargé.

​

Les attributs peuvent être ajoutés en les transférant simplement dans l'URL du code du widget en tant que paramètres GET.

Voici un exemple d'ajout de 3 attributs : rôle de l'utilisateur, identifiant de l'utilisateur, date d'inscription

<script id="feedier-widget-script" src="{endpoint}/js/widgets/v2/widgets.js?form-id={form}& public-key={public_key}& no_header=true& user_id=1234&user_role=Premium&signed_up_date=10.02.24" async></script>.

Feedier créera automatiquement l'attribut lors de l'enregistrement de la première valeur, il n'est pas nécessaire de le créer au préalable.

​

Le widget peut également être initialisé par JavaScript et les attributs peuvent être passés dans la configuration. Cette méthode est très utile si les données des attributs arrivent après le chargement du contenu mais à travers d'autres composants.

FeedierWidget.init({form_id : {form_id}, attributes : { user_id : 'marketing', user_role : 'Premium', signed_up_date : '10.02.24' }, forced : true }) ;

​

L'objet chargé lorsque le script est défini est : FeedierWidget

FeedierWidget.toggle() ;

Cette méthode ouvre ou ferme le contenu du widget de rétroaction en fonction de l'état actuel. Elle affiche le formulaire ou le ferme.

Pour que cette option fonctionne, le délai d'affichage doit être fixé à 0.

FeedierWidget.init({ form_id : 123, attributes : { browser : navigator.userAgent, // Attache le navigateur du client screen_width : window.innerWidth, // Attache la largeur du navigateur du client page : window.location, // Attache l'URL du client }, forced : true }) ;

Cette méthode initialise le widget en fonction de l'objet options.

Le SDK déclenche des événements lorsque le widget est construit :

document.addEventListener('FeedierWidget.built', (e) => { // Ici, par exemple, nous ouvrons le widget lors de son lancement FeedierWidget.toggle() ; }) ;

L'iframe chargée à partir du SDK déclenche des événements pendant la réalisation de l'enquête.

Chaque fois qu'une réponse est apportée à une question,

window.addEventListener('message', function(event) { if (event.data.eventName === 'question_answered') { console.log(event.data) ; } ; }) ;

Le fichier event.data est un objet dont la structure est la suivante :

{ question_id : INT, question_option_id : ?INT, question_type : "nps", // "text", "choices", "rating", etc. question_name : STRING, value : STRING, }

Lorsque l'enquête est terminée,

window.addEventListener('message', function(event) { if (event.data.eventName === 'feedback_completed') { // Do stuff } ; }) ;

Il se peut que le répondant ne termine jamais l'enquête. Il se peut donc que cet événement ne soit jamais déclenché.

​

Feedier enregistre un horodatage dans le stockage local du navigateur lorsque l'utilisateur complète un widget lié à l'ID de l'enquête.

Pour tester le widget sans avoir à attendre l'expiration de l'horodatage stocké dans le stockage local (défini dans les paramètres du widget dans Feedier), deux options sont disponibles :

Sources → Enquêtes → Partage → Widget → Visibilité

Dans les paramètres,

<a href="#" id="feedback-start" class="btn btn-primary"> Feedback </a>

<script id="feedier-widget-script" src="https://feedier.com/js/widgets/v2/widgets.min.js?form-id=770&public-key={PUBLIC_KEY}&no_header=true" type="text/javascript" async></script> <script type="text/javascript"> $(document).ready(function() { $('#feedback-start').on('click', function () { FeedierWidget.init({ form_id : 770, forced : true }) ; }) ; }) ; </script>.

Ceci peut être adapté avec n'importe quel framework frontend : React, Vue, etc.

Exemple : Fermer le widget une fois le feedback terminé

window.addEventListener('message', function(event) { if (event.data.eventName === 'feedback_completed') { $('.feedier-widget').hide() } ; }) ;

Toutes les personnalisations CSS peuvent être gérées dans Feedier. Cependant, du côté des widgets, il peut être recommandé d'ajouter ces personnalisations directement à travers la feuille de style du site.

Par ailleurs, il existe deux types de modifications CSS dans le widget Feedier :

Le style du contenu du widget, le formulaire est chargé via l'iframe et peut être contrôlé ici :

Enquête → Image de marque → CSS personnalisé

Enquête → Share→ Widget → Design

Les feuilles de style CSS peuvent être ajoutées à votre application OU dans la section Design de la page du widget.

Les classes CSS peuvent être explorées à l'aide de l'inspecteur, les plus notables étant les suivantes :

L'exemple suivant définit la couleur du bouton du widget en rouge, modifie sa police et supprime la bordure de l'enquête :

.feedier-widget__caller { background : #ce0707 ; color : #FFF ; border : 0 ; font-family : Arial ; } .feedier-widget__popup { padding : 0 ; }

​

​

L'utilisation d'un gestionnaire de balises présente plusieurs avantages, notamment le fait qu'elle ne nécessite pas de temps de développement, qu'elle permet un retour d'information proactif grâce à des événements déclenchés et qu'elle permet d'attacher facilement des attributs

Tag Manager → Ajouter une nouvelle balise → Configuration de la balise → Coller le code du widget Feedier

Veillez à publier une nouvelle version de GTM lorsque vous apportez des modifications à votre configuration (par exemple, vous changez la méthode de déclenchement).

Ensuite, ajoutez un nom de balise explicite comme "Feedback Widget Feedier" et cliquez sur l'icône Configuration de la balise :

Sélectionnez "HTML personnalisé" dans le type de balise et, dans l'éditeur, collez le code du widget Feedier

​

En utilisant le Custom HTML sous la configuration de la balise, vous pouvez attacher des attributs via GTM. GTM remplacera automatiquement les variables définies en utilisant leur couche de données. Par exemple, role=##{{user.role}}&plan=##{{user.plan}} devient role=director&plan=enterprise

​

Dans les paramètres de configuration des balises, cliquez sur "Triggering". → Cliquez ensuite sur l'icône "+" pour configurer le moment où vous souhaitez déclencher le widget.

Voici quelques exemples de moments où vous pourriez vouloir déclencher le widget :

Assurez-vous que jQuery est chargé sur la page. Il s'agit d'une erreur courante. Si votre widget ne se charge pas et que vous ne savez pas pourquoi, vous pouvez facilement déterminer si jQuery est le coupable. Ouvrez la console (cliquez avec le bouton droit de la souris sur la page > "Inspecter la page"). Vous verrez l'erreur indiquant que jQuery n'est pas chargé.

​

Il est possible dans la plateforme Feedier de restreindre la visibilité du widget en fonction de règles avancées. L'un des cas d'utilisation les plus courants consiste à restreindre l'affichage du widget en fonction d'une valeur d'attribut.

Par exemple,

Pour ce faire, allez dans les paramètres avancés et sélectionnez l'attribut dans "Restreindre l'accès par valeur d'attribut".

Cette règle est uniquement basée sur la valeur d'attribut x de l'enquête correspondante.

Si vous souhaitez ajouter une chronologie spécifique, nous vous recommandons de concaténer les valeurs d'attribut avec un élément temporel.
Par exemple, pour l'afficher tous les mois :