Trouver le code Widget

Sélectionner le bouton cliquer pour copier pour copier le code widget.

Le code widget se compose de deux parties : 

1. Élément de widget, utilisez-le où vous préférez, cela n'a pas d'importance.

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

Ajout d'attributs de contexte au widget

Vous souhaiterez attacher des métadonnées que vous collectez sur votre site web/application afin de fournir un meilleur contexte aux retours que vous recueillez. Quelques exemples pourraient être :

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 soit le formulaire, soit le ferme.

Pour que cette option fonctionne, il faut que le délai d’affichage soit à 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.

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 les rapports.

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.

document.addEventListener('FeedierWidget.built', function(e) {
      FeedierWidget.toggle();
});

JavaScript

Exemple : Afficher le widget Feedier lors d'un clic sur un bouton personnalisé à l'aide de JavaScript.

• Désactivez l’option “Afficher à l’initialisation”

• Ajoutez dans l’option “JavaScript personnalisé chargé” : FeedierWidget.toggle()

Dans le DOM:

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

HTML

Exemple JavaScript 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>

JavaScript

Exemple : Fermer le widget après la fin du feedback

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

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

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 :

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

.feedier-widget__popup {
     padding: 0;
}

CSS

Affichage du widget à des événements spécifiques en utilisant Google Tag Manager

Créez une nouvelle balise dans Google Tag Manager.

Then, add an explicit Tag name like “Feedback Widget Feedier” and click the Tag Configuration icon:

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.