Finding the widget code to share

Select the button 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. 

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:

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.

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

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.

Advanced Settings

Manage the widget using JavaScript API  

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

.init(options);

FeedierWidget.init({
    form_id: 123,
    attributes: {
        department: marketing
    },
    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.

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 

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. 

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

JavaScript

Example: Display the Feedier widget on a custom button click through Javascript

• Toggle off the Show on Init option

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

In the DOM:

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

JavaScript

Example: Close the widget after feedback is completed

 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: 

CSS Inside the form:

More info on CSS examples.

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, most notables 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 border across the survey:

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

.feedier-widget__popup {
     padding: 0;
}

CSS

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.