IMPORTANT! We have new documentation for Feedier! Fully illustrated and a lot more updated. 


Check it out here: https://manual.feedier.com/


To use Feedier in your site, you can use the Engager widget. 
It will add a nice dynamic button on your website to engage directly your visitors.
But also showcases the best reward available as well as the estimated time needed to complete the feedback.

1. How to get the widget's code

When editing a form on the Feedier Dashboard:

You will find on that tab HTML code similar to: 


<div class="feedier-widget" data-type="engager" data-layout="horizontal" data-shake="true" data-position="right" data-in-site="true" data-carrier-id="565" data-key="Zgu2k6cMgd8gEQRVOYTfNyZoViucobN8"></div>


<!-- Include this line only one time, also if you have multiple widgets on the current page -->
<script src="https://feedier.com/js/widgets/widgets.min.js" type="text/javascript" async></script>


Simply copy/paste this into your own website/app, you probably need to get in touch with your developer if right now you're like "what the heck is this". 

As you can see we have two parts: 

  1. Widget element, use that wherever you want, it does not matter. 
  2. Feedier API to get the widget working, add this at the end of your markup or right after the </body> tag. 


2. How to configure the widget?

The widget can be configured using data attributes. If you have no idea what these are, please checkout this article. You can see them from the snippet in the last section, data-key is for example the one giving your public API key so Feedier makes sure it's used by you and that the form is attached to your account. You can pass many configuration parameters to extend the Engager widget.

Here is an extensive table of all options available:

data-attribute Values you can giveDescription
data-layout
Eg. data-layout="horizontal"
horizontal or vertical, default is horizontalWhether the widget is displayed on the horizontal axis or vertical one.
data-in-site
Eg. data-in-site="true"
true or false, default is trueIf true, the participant will not leave your platform, the form will open inside your site. Otherwise, if you false, it will be opened in a new tab.
data-position
Eg. data-position="right"
left or right, default is rightChanges if the widget is displayed on the left side or the right one.
data-display-probability
Eg. data-display-probability="90"
a number between 0 and 100, 100 is the default one.Probability for a visitor to see the widget. If you want 1 visitor out of two to see the widget, set it to 50.
data-email
Eg. data-email="john@doe.com"
a string (email address), can be null or emptyUse this to dynamically inject the participant's email if you know it already. In that way Feedier doesn't ask for it later and it is attached to the Feedback.
data-custom-fields
Eg. data-custom-fields="name=John&country=FR"

a string (URL query), so exactly as if you'd pass them in the URL, {name1}={value1}&{name2}={value2}Any data passed here will be attached to the Feedback. You can use it to apply question conditions and segment your Feedback later.
data-skip-intro
Eg. data-skip-intro="true"
true or false, default is falseIf enabled, there will be no intro to engage the visitor. When the button is clicked, the Feedback form starts.
data-widget-title
Eg. data-widget-title="We need your Feedback"
a stringIt replaces the "Give your Feedback" text on the button, you can use any text, make it short though.
data-extra-line
Eg. data-extra-line="We love you"
a stringThis option adds an extra line in the intro (when the button is clicked but before the form). You can pass any relevant information.
data-shake
Eg. data-shake="true"
true or false, default is trueThe widget will shake and open automatically after 10 seconds if not clicked by the user beforehand.
data-init
Eg. data-init="true"
true or false, default is trueIf set to false, Feedier will not display the widget until you choose to display it. How? Using the Feedier JavaScript API (next section). 

 

That's it. If you need help, feel free to open a new ticket, we're here to help.


3. (Advanced) Use the JavaScript API to integrate it    

Feedier comes with a JavaScript API that aims to make your life easy when it comes to integrate the widget in your technology. 


JavaScript methods

Note that the Feedier widget script have to be loaded first, otherwise, it will not work. Always check that the feedierWidget object is defined.


The available methods are:

MethodDescription
feedierWidget.engager.show()Will show the Engager widget. No matter if it's been hidden before. Can be checked with the isAvailable() method.
feedierWidget.engager.hide()Will hide the Engager widget for the current user.
feedierWidget.engager.isVisible()Returns a Boolean. Whether the Engager widget is hidden or not.
feedierWidget.engager.toggle()Will open or close the Engager widget's content depending on the current status.
feedierWidget.engager.shake()

Will shake the Engager button for 1 second to attract the visitor's attention.



JavaScript events

You can bind your own actions to the widget's actions. Feedier Engager widget has 3 events you can use:

The available events are:

Event nameWhen is it fired?
feedierWidget.init
When the widget is initialized on your page
feedierWidget.show
When the widget is displayed (clicked/opened)
feedierWidget.close
When the widget is closed by the user



How to display the widget at a specific moment

It's a common use case, whether you're using plain JavaScript, Vue.js, React or any framework: 

  1. Add the API file:
    <script src="https://feedier.com/js/widgets/widgets.min.js" type="text/javascript" async></script>
  2. Add the widget markup (see first section) in your site or in a component, make sure to have data-init="false".
  3. Call: feedierWidget.engager.show()

Easy peasy.