...

Where to find the widget’s JS code?

Select the button and click to copy to select the widget code.

...

The widget code has two parts: 

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

...

Adding

...

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:

Here’s how adding an attribute may look:
Standard widget code:

<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 ID', 'Role', 'Signed up' added.

...

Adding attributes is essential to making the feedback collected through the widget actionable from the Feedier Dashboard. It gives depth to the insights and helps detect trends or issues faster.

When adding the widget, very common attributes could be:

• browser

• user_id

• geolocation

• locale

• user_role

• version

• screen_size

• page_url

• etc.

Method 1: adding attribute through the widget code URL

Attributes can be added by simply forwarding them in the URL of the widget code as GET parameters.

Here is an example to attach 3 attributes: user role, user id, signed-up date

<script id="feedier-widget-script" 
src="

...

{endpoint}/js/widgets/v2/widgets.js?form-id=

...

{form}&
public-key=

...

{public_key}&
no_header=true&

user_id=1234&user_role=Premium&signed_up_date=

...

10.02.

...

24" 

async></script>

...

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.

...

Advanced Settings

Manage the widget using JavaScript API  

Object: FeedierWidget

...

Open your console (CTRL/CMD + SHIFT + I) → Application → Storage → Local Storage → Feedier.widget → Delete widget cookies

Method 2: adding attributes through the JavaScript SDK

The widget can also be initialized through JavaScript and attributes can be passed in the configuration. This is very useful if the attributes data are coming after the content is loaded but through other components.

FeedierWidget.init({
    form_id: {form_id},
    attributes: {
        user_id: 'marketing',
        user_role: 'Premium',
        signed_up_date: '10.02.24'
    },
    forced: true
});

JavaScript SDK

The object loaded when the script is set is: FeedierWidget

The methods

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

For this option to work, the display delay must be set to 0.

.init(options);

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
    },
    forced: true
});

This method initializes the widget based on the options object.

...

...

...

...

...

...

...

Example of adding attributes through Javascript:

Attributes are customizable for your own context. It is possible to attach any kind of data from the client-side using JavaScript (ES6/Jquery/Vue/Reach).  The attributes are used in Feedier to bring context and for reporting.

...

Listening to events

Widget event

The SDK will trigger events when the widget is built:

document.addEventListener('FeedierWidget.built', (e) => {
    

...

  // Here for example we open the widget on init
     

...

...

FeedierWidget.toggle();
});

Survey events

The iframe loaded from the SDK will trigger events during the survey completion.

Whenever a question is answered,

 window.addEventListener('message', function(event) {
     if (event.data.eventName === 

...

'question_answered') { 
        console.log(event.data);
     

...

};
});

The event.data, is an object with the following structure:

{
    question_id: INT,
    

...

question_option_id: 

...

?INT,
    question_type: "nps", // "text", "choices", "rating", etc.
    question_name: STRING,
    value: 

...

STRING,
}

...

JavaScript Events 

When the widget is displayed on the page, the Feedier widget script will fire a 'FeedierWidget.built' event. It can be used automatically to open the widget or do other actions on the frontend. 

...

Whenever the survey is completed,

 window.addEventListener('message', function(

...

event) {
     if 

...

(event.data.eventName === 'feedback_completed') { 
         // Do stuff
     };
});

JavaScript

...

Testing the Feedier widget

Feedier will store a timestamp in the browser’s local storage when the user completes a widget linked to the survey ID.

To test the widget without having to wait for the expiration of the timestamp stored in the local storage (defined in the widget setting in Feedier), two options are available:

1. Option 1: Pass a preview=true parameter to stop this behavior.

2. Option 2: In the console, wipe out the Storage → Local Storage → Feedier.widget

...

Use Case 1: Display the Feedier widget on a custom button click through

...

JavaScript

In the settings,

• Toggle off the Show on Init option

• Add in the Custom JavaScript Loaded option: FeedierWidget.toggle()

...

• An example of trigger:

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

HTML

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

...

Example: Close the widget after feedback is completed

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

JavaScript

Use-Case 2: Changing the Widget style using CSS

...

There are two kinds of CSS changes: 

...

All CSS customizations can be managed within Feedier. However, on the widget side, it might be recommended to add these customizations directly through the site’s stylesheet.

Also, there are two types of CSS changes in the Feedier widget: 

Type 1: CSS Inside the form

The styling of the widget’s content, the form is loaded through the iframe and can be controlled here:

...

Type 2: CSS on the

...

widget 

CSS can be added to your application OR under the Design section of the widget page.

...

CSS classes can be explored through the inspector, the most

...

notable ones are: 

Example of adding CSS to the widget

The following example will set the widget button color to red, change its font, and remove the border across the survey:

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

.feedier-widget__popup {
     padding: 0;
}

CSS

Use-Case 3: Showing the widget at specific events using Google Tag Manager

...

...

Create a new tag in 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.

...

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.

...