En ce qui concerne le widget Feedier,

Le widget prend en charge tous les types de questions, toutes les conditions et tous les modèles, comme le font les enquêtes ordinaires lorsqu'elles ne sont pas chargées par l'intermédiaire d'un widget.
Le script du widget est mis en cache à 100 % et servi par un CDN (Cloudflare). De même, les requêtes adressées au backend de Feedier pour charger les données de l'enquête sont mises en cache.
Les options du widget dans Feedier sont conçues pour supprimer autant de ressources de développement que possible du processus.
Dans la mesure du possible, nous recommandons d'utiliser un système Tag Manager pour charger le widget Feedier.

Où trouver le code JS du widget ?

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.

Ajouter des attributs au 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

navigateur
identifiant de l'utilisateur
géolocalisation
locale
rôle_utilisateur
version
taille_de_l'écran
page_url
etc.

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

Méthode 1 : ajouter un attribut via l'URL du code du widget

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.

Méthode 2 : ajout d'attributs via le SDK JavaScript

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

SDK JavaScript

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

Les méthodes

.toggle() ;

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.

.init(options) ;

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.

Nom de l'option	Type d'option	Description de l'option
`form_id`	`int`	ID de l'enquête Feedier. Il peut être trouvé dans l'API ou dans l' enquête-> options → gestion des formulaires
`attributs`	`objet`	Attributs à attacher au feedback sur Feedier. Les attributs sont des données contextuelles provenant du côté client.
`forcé`	`booléen`	Si la valeur est "true", le widget sera affiché même si l'utilisateur a déjà répondu à l'enquête.

Écoute des événements

Événement du widget

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 l'init
 FeedierWidget.toggle() ;
}) ;

Événements de l'enquête

L'iframe chargée à partir du SDK déclenchera 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,
}

Chaque fois que 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é.

Test du widget Feedier

Feedier enregistre un horodatage dans le stockage local du navigateur lorsque l'utilisateur complète un widget lié à l'identifiant 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 :

Option 1 : Passer un paramètre preview=true pour arrêter ce comportement.
Option 2 : Dans la console, effacer le widget Stockage → Stockage local → Feedier.widget

Cas d'utilisation 1 : Afficher le widget Feedier lors d'un clic sur un bouton personnalisé via JavaScript

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

Dans les paramètres,

Désactivez l'option Show on Init (Afficher lors de l'activation)
Ajoutez l'option Custom JavaScript Loaded: FeedierWidget.toggle()

Un exemple de déclencheur :

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

Exemple de JS pour déclencher le bouton avec jQuery :

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

Cas d'utilisation 2 : Modifier le style du widget à l'aide de CSS

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 :

Type 1 : CSS à l'intérieur du formulaire

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é

Type 2 : CSS sur le widget

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 :

Classe CSS	Description
`.feedier-widget__caller`	Bouton de rétroaction du widget
`.feedier-widget__popup`	Widget iframe wrapper

Exemple d'ajout de CSS au widget

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

Cas d'utilisation 3 : Afficher le widget lors d'événements spécifiques à l'aide de Google Tag Manager

L'utilisation d'un gestionnaire de balises présente plusieurs avantages, notamment : aucun temps de développement nécessaire, un retour d'information proactif grâce à des événements déclenchés et la possibilité d'attacher facilement des attributs.

Créer une nouvelle balise dans Google Tag Manager

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

Veillez àpublier une nouvelle version de GTMlorsque 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

Déclencher le GTM en fonction d'un événement

Dans les paramètres de configuration des balises, cliquez sur "Déclenchement". → 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 :

Demander un retour d'information après l'inscription
Demander un retour d'information après la 5e visite
Demander un retour d'information avant de quitter l'application
Demander un feedback après avoir atteint un objectif (commande, réservation, création, mise à jour...)
Demander un retour d'information après qu'un utilisateur n'a pas suivi le flux attendu.

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é.

Cas d'utilisation 4 : Afficher le widget une seule fois en fonction de la valeur d'un attribut spécifique

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,

Si le widget est chargé avec user_id=123, et que user_id=123 répond, le widget pour cette enquête spécifique ne s'affichera plus jamais.

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

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 :

Ajoutez un attribut dans l'URL du widget comme widgetuid=####{{userId}}-###{month}}##{year}}
Cela créera quelque chose comme widgetuid=123-0225
Si vous sélectionnez widgetuid dans l'option Paramètres avancés, l'utilisateur 123 ne pourra répondre qu'une fois par mois.

🎨 Paramètres de design

• Disposition — Verticale vs Horizontale → En horizontal : le bouton du widget apparaît à plat en bas de l'écran (coin gauche ou droit). Le popup du survey s'ouvre au-dessus du bouton. → En vertical : le bouton du widget est pivoté sur le côté et ancré au bord latéral de l'écran (à 50% de hauteur). Le texte du bouton s'affiche verticalement. Le popup s'ouvre à côté (vers le centre de la page). Sur mobile (< 767px), la largeur du popup est limitée à 75% de l'écran.

• Alignement — Gauche vs Droite → À droite : le widget est épinglé à droite de l'écran (30px du bord). La flèche du popup pointe vers la droite. → À gauche : le widget est épinglé à gauche de l'écran (30px du bord). La flèche du popup pointe vers la gauche. → Combinaisons : Vertical + droite → le bouton colle au bord droit, pivoté dans le sens antihoraire. Vertical + gauche → bord gauche, pivoté dans le sens horaire.

• Texte du bouton → Saisissez votre propre libellé (ex : "Donnez votre avis"). Ce texte s'affiche directement sur le bouton cliquable. Si laissé vide, la valeur par défaut est "Give your Feedback".

• Style du bouton — Tag vs Notes → Tag : un bouton/label cliquable standard apparaît à l'écran. L'utilisateur clique dessus pour ouvrir le popup du survey. → Notes : le bouton du widget est entièrement masqué. Le survey est intégré directement dans la page (à l'intérieur de l'élément Mount spécifié). Quand l'utilisateur répond à la première question, le widget s'agrandit en overlay modal (centré, avec fond sombre) affichant le survey complet. Le bouton de fermeture n'apparaît qu'après cette expansion.

• Mount (visible uniquement si Style du bouton = Notes) → Saisissez un sélecteur CSS (ex : #mon-div ou .section-feedback). Le widget sera injecté à l'intérieur de cet élément. Si laissé sur body, il s'attache au corps de la page. Si l'élément est introuvable, le widget n'apparaît pas.

• Couleur du bouton → Choisissez une couleur. Définit la couleur de fond et la couleur de bordure du bouton du widget (mode "tag").

• Couleur de fond → Choisissez une couleur. Définit la couleur de fond du conteneur du popup du survey.

• Couleur de la barre de progression → Choisissez une couleur. Définit la couleur de la barre de progression affichée en haut du survey dans le widget.

• Largeur (en pixels) → Saisissez un nombre. Remplace la largeur du popup. Si non défini, le popup occupe par défaut 30% de la largeur de la fenêtre sur desktop (90% sur mobile).

• Hauteur (en pixels) → Saisissez un nombre. Remplace la hauteur du popup. Si non défini, la hauteur s'ajuste automatiquement selon le contenu du survey (avec un décalage de 110px). Ce redimensionnement automatique ne fonctionne que si le style n'est pas "Notes" et qu'aucune hauteur fixe n'est définie. En mode "Notes", la hauteur par défaut est de 220px (avant expansion).

• CSS personnalisé → Collez du code CSS. Il sera injecté sous forme de balise <style> sur la page où le widget se charge. Exemple : .feedier-widget__caller{ background: red; color: white !important; } rend le bouton rouge avec du texte blanc.

👁️ Paramètres de visibilité

• Réapparaître à la fermeture → Activé : si un visiteur ferme le widget sans soumettre de feedback, le widget réapparaîtra à son prochain chargement de page (en ignorant le délai d'expiration). Il reste masqué uniquement une fois que le visiteur a réellement complété le survey. → Désactivé : une fois le widget fermé (même sans réponse), il ne réapparaîtra pas avant la fin de la période d'expiration.

• Afficher à l'initialisation (affichage automatique) → Activé : le widget apparaît automatiquement quand la page finit de se charger (en tenant compte du délai configuré). → Désactivé : le widget n'apparaît pas automatiquement. Il ne s'affiche que s'il est déclenché par une autre méthode (Exit Intent, Cible manuelle ou JavaScript personnalisé).

• Délai (en secondes — visible uniquement si "Afficher à l'initialisation" est activé) → Saisissez un nombre (0 à 1000). Le widget patientera ce nombre de secondes après le chargement de la page avant d'apparaître. Exemple : réglé à 30 → le widget apparaît 30 secondes après l'arrivée du visiteur. Réglé à 0 → apparaît immédiatement.

• Exit Intent (Avertir avant fermeture) → Activé : le widget apparaît automatiquement lorsque le visiteur déplace sa souris en dehors de la fenêtre du navigateur (par exemple vers le bouton de fermeture ou la barre d'adresse). Technique courante pour retenir les utilisateurs avant qu'ils ne quittent. Ne se déclenche qu'une seule fois par chargement de page. → Désactivé : le mouvement de la souris n'a aucun effet sur l'affichage du widget.

• Cible manuelle (sélecteur CSS) → Saisissez un sélecteur CSS (ex : .votre-selecteur-css ou #btn-feedback). Quand le visiteur clique sur cet élément, le widget s'ouvre. Permet d'associer le widget à votre propre bouton ou lien. Si l'élément est introuvable, rien ne se passe (un avertissement est enregistré dans la console).

• JavaScript personnalisé → Collez du code JavaScript qui s'exécute 500ms après l'initialisation du widget. API disponible :

FeedierWidget.toggle(); → ouvre/ferme le popup
FeedierWidget.show(); → affiche le widget
FeedierWidget.show(true); → force l'affichage (ignore l'expiration)
FeedierWidget.hide(); → ferme le widget → Événements disponibles :
FeedierWidget.on('feedback_completed', function() { ... }); → se déclenche à la soumission du feedback
FeedierWidget.on('question_answered', function() { ... }); → se déclenche quand une question est répondue
FeedierWidget.on('feedier_widget_closed', function() { ... }); → se déclenche à la fermeture du widget

• Expiration (en jours) → Saisissez un nombre. Après qu'un visiteur a fermé ou complété le widget, celui-ci ne réapparaîtra pas pendant ce nombre de jours. Par défaut : 30 jours (stocké dans le navigateur sous feedier.widgetV2). Exemple : réglé à 7 → le widget ne se réaffiche pas pendant 7 jours après interaction.

📄 Gestion de l'affichage (optionnel)

• Pages incluses → Saisissez une liste d'URLs ou de motifs d'URL séparés par des virgules. Le widget n'apparaîtra que sur les pages correspondant à ces motifs (comparaison via regex sur l'URL complète). Exemple : https://monsite.com/tarifs, /contact → le widget s'affiche uniquement sur la page tarifs et toute page contenant "/contact". Si laissé vide, le widget peut apparaître sur toutes les pages.

• Pages exclues → Saisissez une liste d'URLs ou de motifs séparés par des virgules. Le widget n'apparaîtra jamais sur les pages correspondant à ces motifs, même si elles figurent dans les pages incluses. Exemple : https://monsite.com/admin, /dashboard → le widget est masqué sur les pages admin et dashboard. Les pages exclues ont priorité en cas de correspondance avec les deux listes.

⚙️ Interactions entre les paramètres

• Chaîne de priorité d'affichage : Pages exclues → Pages incluses → Vérification d'expiration → Logique de réapparition → Affichage à l'initialisation / Exit Intent / Cible manuelle.

• À la complétion du feedback : le timer d'expiration démarre et le widget se ferme automatiquement après 2,5 secondes.

• Sur mobile (< 767px) : les widgets horizontaux s'étendent en pleine largeur, le bouton se positionne en bas de l'écran et le popup occupe presque tout l'écran.

• Changements de hash (applications SPA) : le widget se réinitialise automatiquement lors d'un changement d'URL hash, ce qui le rend compatible avec le routage des applications monopage.

Partager une enquête via un widget web