Partager une enquête avec Widget Web
- Carlos Carasco
- Anna Khrystenko (Unlicensed)
- Julien Van Doorn (Deactivated)
- Faustine Delebarre
Trouver le code Widget
Sources → Enquêtes → Partager → Widget dynamique web
Sélectionner le bouton cliquer pour copier pour copier le code widget.
Vous avez la possibilité de personnaliser le design du widget ainsi que ses opérations de base sur cette page.
Le code widget se compose de deux parties :
L'élément de widget, utilisez le à l’endroit qui vous conviens le plus, cela n'a pas d'importance.
Balise <script> de l'API Feedier pour faire fonctionner le widget. Ajoutez ceci à la fin de votre balisage ou juste après la balise </body>.
Cliquez sur le bouton 'Enregistrer et Prévisualiser' pour voir vos modifications et prévisualiser le widget.
Ajout d'attributs de contexte au widget
Vous pouvez attacher des métadonnées que vous collectez sur votre site web/application afin de fournir un meilleur contexte aux retours que vous recueillez. Voici quelques exemples :
ID de l'utilisateur
Pays / Ville / Région
Langue
Service de l'entreprise
Rôle de l'utilisateur
Niveau de direction
Navigateur
Taille de l'écran
Version du logiciel
Voici à quoi pourrait ressembler l'ajout d'un attribut : Code de widget standard :
<script id="feedier-widget-script" src="https://feedier.com/js/widgets/v2/widgets.js?form-id=13&public-key=cb6c6eb920a84638d90e557d988193f8&no_header=true" type="text/javascript" async></script>
Code du widget avec les attributs de contexte 'Identifiant de l'utilisateur', 'Rôle', 'Inscrit' ajoutés :
<script id="feedier-widget-script" src="https://feedier.com/js/widgets/v2/widgets.js?form-id=13&public-key=cb6c6eb920a84638d90e557d988193f8&no_header=true&user_id=1234&role=Premium&signed_up=14.02.21" async></script>
Test du Widget
Afin de vous assurer que le widget fonctionne comme vous le souhaitez, vous devrez effacer les cookies pour effectuer un nouveau test sur votre page web.
Paramètres avancés
Gérez le widget à l'aide de l'API JavaScript
Objet: FeedierWidget
.toggle();
FeedierWidget.toggle();Cette méthode ouvre ou ferme le contenu du widget de feedback en fonction de l'état actuel. Elle affiche le formulaire, ou le ferme.
Pour que cette option fonctionne, il faut que le délai d’affichage soit égal à 0.
.init(options);
FeedierWidget.init({
form_id: 123,
attributes: {
department: marketing
},
forced: true
});Cette méthode initialise le widget en fonction de l'objet d'options fourni.
Nom de l’option | type | description |
|---|---|---|
form_id | int | Identifiant de l'enquête Feedier. Il peut être trouvé dans l'API ou dans Enquête -> Options -> Gestion du formulaire. |
attributes | object | Attributs à attacher au feedback sur Feedier. Les attributs sont des données contextuelles provenant du côté client. |
forced | boolean | Si défini sur “true”, le widget sera affiché même si l'utilisateur a déjà répondu au sondage précédemment. |
Exemple d'ajout d'attributs via JavaScript :
Les attributs sont personnalisables selon votre propre contexte. Il est possible d'attacher tout type de données du côté client en utilisant JavaScript (ES6/Jquery/Vue/React). Les attributs sont utilisés dans Feedier pour apporter du contexte et pour créer des rapports concrets.
FeedierWidget.init({
form_id: 123,
attributes: {
browser: navigator.userAgent, // Attach the client's browser
screen_width: window.innerWidth, // Attach the client's browser width
page: window.location, // Attach the client's URL
user_id: $('#user-id').val() // Attach the user ID using Jquery if set in the DOM with ID user-id
},
});
Événement JavaScript
Lorsque le widget est affiché sur la page, le script du widget Feedier déclenchera un événement 'FeedierWidget.built'. Il peut être utilisé automatiquement pour ouvrir le widget ou effectuer d'autres actions côté frontend.
JavaScript
Exemple : Afficher le widget Feedier lors d'un clic sur un bouton personnalisé à l'aide de JavaScript.
Désactivez l’option “Affichage du Widget au chargement”
Ajoutez dans l’option “JavaScript personnalisé chargé à l’initialisation” : FeedierWidget.toggle()
Dans le DOM:
HTML
Exemple JavaScript pour déclencher le bouton avec jQuery :
JavaScript
Exemple : Fermer le widget après la fin du feedback
JavaScript
Changer le style du widget en utilisant le CSS
Il existe deux types de modifications CSS :
CSS à l'intérieur du formulaire :
Plus d'informations sur des exemples CSS.
CSS sur le widget:
Le CSS peut être ajouté à votre application OU dans la section Design de la page du widget.
Les classes CSS peuvent être explorées via l'inspecteur, les plus remarquables étant
CSS class | Description |
|---|---|
.feedier-widget__caller | Widget feedback button |
.feedier-widget__popup | Widget iframe wrapper |
Exemple d'ajout de CSS au widget :
L'exemple suivant définira la couleur du bouton du widget en rouge, changera sa police et supprimera la bordure autour du sondage :
CSS
Affichage du widget à des événements spécifiques en utilisant Google Tag Manager
Créez une nouvelle balise dans Google Tag Manager.
Ensuite, ajoutez un Nom de tag explicite comme : “Widget de Feedback Feedier” et cliquez sur l’icone Configuration du Tag.
Déclenchez GTM en fonction d'un événement
Dans les paramètres de configuration de la balise, cliquez sur “Triggering”. Ensuite, cliquez sur l'icône + pour configurer quand déclencher le widget.
Quelques exemples de moments où vous pourriez souhaiter déclencher le widget :
Demander un feedback après l'inscription
Demander un feedback après la 5e visite
Demander un feedback avant de quitter l'application
Demander un feedback après avoir atteint un objectif produit (commande, réservation, création, mise à jour…)
Demander un feedback après qu'un utilisateur n'a pas suivi un flux attendu.