Feedier Manual

Feedier Manual

Web widget – Integration guide

To use Feedier in your sites and applications and get live feedback, you can use the Web widget. It will add a great looking dynamic button on your website or application to engage directly with your users.

Step 1 – Get the widget code

To use the widget, Feedier generates a unique HTML snippet for every form that you can use in your application to generate it.

  1. Go to the Forms page
  2. Click “Share” (Figure 1)
  3. Select “Web Widget”
  4. Click “Copy” (Figure 2)
Figure 1
Figure 2

Notes:

  • 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 at the end of your markup or right after the </body> tag.
  • The widget can be previewed directly in the Dashboard

Step 2 – Configure the widget

The widget can be configured using data attributes. Learn more about data attributes in this article.

Available options:

data-attribute Supported valuesDescription
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″
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”
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”
string (URL query), so exactly as if you’d pass them in the URL, {name1}={value1}&{name2}={value2}Used for context attributes. 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, the feedback form will start directly after the click.
data-widget-title
Eg. data-widget-title=”We need your Feedback”
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”
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). 
data-expire
Eg. data-expire=”15″
number between 1 and 100, 30 is the default one.The number of days for the widget to show again when it was closed. 0 means it will always show.

Step 3 – Testing the 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.
Please open your console (CTRL/CMD + SHIFT + I) -> Application->Storage -> 1.Local Storage ->2.Feedier.widget -> 3.Delete widget cookies.

Step 4 – Implement the widget

Case 1 – Show the widget all the time on a certain page

In order to show the widget all time on a certain page:

  1. Get the code (Step 1 of this page)
  2. Copy in your web page, directly in the HTML, or if you use a CMS like WordPress you can use a widget to add custom HTML in your site in certain pages. Therefore, you can copy the code in the widget setting.

Case 2 – Show the widget at specific moments using JavaScript

Using a JavaScript framework like Angular, Vue.js or React? This is the best way to get quality feedback at defined moment of the user journey.

  1. Load the API file:
    <script src=”https://feedier.com/js/widgets/widgets.min.js” type=”text/javascript” async></script>
  2. Add the widget markup (Step 1 of this page) in a component or backend rendered page, make sure to set data-init=”false” in the widget attributes so the widget is not loaded.
  3. Whenever it needs to be loaded, after the events you defined, call the following function in JavaScript: feedierWidget.engager.show()

Case 3 – Show the widget at specific moments using Google Tag Manager

The widget can also be loaded using third party tag managers like Google Tag Manager

  1. Create a new tag type CUSTOM HTML
  2. Copy/paste the widget code (Step 1 of this page)
  3. Add the display logic directly in Google tag manager

Advanced – JavaScript API

The widget also support a simple yet powerful API to give full control. Note that the Feedier widget script has to be loaded first, otherwise, it will not work. Always check that the feedierWidget object is defined.

JavaScript methods

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.

So for example, if you needed the widget to appear after 60 seconds, you can use the below after the widget code:

<script type="text/javascript">
feedierWidget.engager.hide();
setTimeout(function(){ feedierWidget.engager.show(); }, 60000);
//time in milliseconds - 60 seconds = 60000
</script>

JavaScript events

Bind your own actions to the widget’s actions.

Event nameWhen is it fired?
feedierWidget.initWhen the widget is initialized on your page
feedierWidget.showWhen the widget is displayed (clicked/opened)
feedierWidget.closeWhen the widget is closed by the user

F.A.Q

Can I change the widget style?

If the options are not covering your design requirements, use custom CSS to change the widget style easily. Here is a quick preview:

How to show the feedback form in a modal or specific page?

The form can be displayed and loaded directly into the application UI using an Iframe. Please refer to this article.

How to attach user data to the feedback (email, ID, role…)?

To attach context attributes to the feedback, use the data-custom-fields option (see Section 2). The elements can be variables.

Example: data-custom-fields=”user_id={user.id}&role={user.role}&signed_up={user.created}&version={app.version}”

Once replaced for the user, would be for example: data-custom-fields=”user_id=123&role=admin&signed_up=Sept2020&version=1.8.0″

The feedback recorded will contain this information:

How to dynamically change the form in the widget to show the right form to the right user?

To dynamically change the form ID, use a variable for the data-carrier-id option. To find the form’s ID, edit it in Feedier or use the Feedier API:

Example: data-carrier-id=”{form_id}”. Then, the form_id variable can be replaced depending on the user type, progress or role based on criteria and pre-defined logic.

Can I have the widget only appear for non-mobile users?

You can use custom CSS code to hide the widget so it only appears when the user is not usiing their form.

@media only screen and (max-width: 600px) {
.feedier-widget–engager {
     display: none;
}
}