Trouver le code Widget

Select the button click to copy to select the widget codeSélectionner le bouton cliquer pour copier pour copier le code widget.

The widget code has two parts: 

1) Widget element, use this wherever you prefer, it does not matter. 

2) Feedier API <script> tag to get the widget working. Add this to the end of your markup or right after the </body> tag.

Adding Context Attributes to the Widget

You'll want to attach metadata that you collect on your website/application in order to give better context to the feedback you collect. Some examples may be:

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>

Widget code with context attributes 'user IDCode du widget avec les attributs de contexte 'Identifiant de l'utilisateur', 'RoleRôle', 'Signed up' added.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

In order to make sure the widget is running the way you’d like, you’ll need to clear the cookies to retest on your webpage.

Image Removed

Advanced Settings

Manage the widget using JavaScript API  

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.

Image Added

Paramètres avancés

Gérez le widget à l'aide de l'API JavaScript  

Objet: FeedierWidget

.toggle();

FeedierWidget.toggle();

This method opens or closes the feedback widget’s content depending on the current status. It either shows the form or closes itCette 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.

.init(options);

FeedierWidget.init({
    form_id: 123,
    attributes: {
        department: marketing
    },
    forced: true
});

This method initializes the widget based on the options object.

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

Example of adding attributes through Javascript:

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/ReachReact).  The attributes are used in Feedier to bring context and for reportingLes 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   
    },
});

JavaScript Events 

Événement JavaScript 

Lorsque le widget est affiché sur la page, le script du widget Feedier déclenchera un événement 'FeedierWidget.built' event. It can be used automatically to open the widget or do other actions on the frontend. . 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()

In the Dans le DOM:

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

HTML

JS example to trigger the button with 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

Changing the Widget style using CSS

There are two kinds of CSS changes: 

Changer le style du widget en utilisant le CSS

Il existe deux types de modifications CSS :

CSS à l'intérieur du formulaire :

More info on CSS examplesPlus d'informations sur des exemples CSS.

CSS on the sur le widget: 

CSS can be added to your application OR under the Design section of the widget pageLe CSS peut être ajouté à votre application OU dans la section Design de la page du widget.

CSS classes can be explored through the inspector, most notables ones are: 

Les classes CSS peuvent être explorées via l'inspecteur, les plus remarquables étant

Example of adding CSS to the widget

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:

Trigger GTM based on an event

In the Tag Configuration Settings, click “Triggering“. Then click the + icon to configure when to trigger the widget.

Image Removed

Some examples of times you might like to trigger the widget:

• Ask for feedback after signing up

• Ask for feedback after 5th visit

• Ask for feedback before leaving the app

• Ask for feedback after achieving a product goal (ordering, booking, creating, updating…)

• Ask for feedback after a user hasn’t followed an expected flow.

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.

Image Added

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.