Web Widget - Advanced Settings

The Feedier feedback widget can be configured directly from the Form builder > Share > Widget code page.  

The goal of this page is to go through the advanced configurations of the Feedier widget.

Feedier 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: {
        foo: bar
    },
    forced: true
});

This method initializes the widget based on the options object.

Example of attributes:

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). Avoid attaching personal data. 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();
});

Use case: Display the Feedier widget on a custom button click

On the Feedier dashboard Form builder > Share > Widget code 

1. Toggle off the "Load on Init" option
2. Add in the "Custom JavaScript Loaded" option: FeedierWidget.toggle()

In the DOM:

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

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

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

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 from Form builder > Share > Widget code
3. Add the display logic directly in Google tag manager

Changing the Widget style using CSS

There are two kinds of CSS changes: 

1. Inside the form:  The CSS can be added on the form's advanced settings: Form builder > Options > Form Advanced options > Custom CSS option.
2. On the widget: The CSS can be added to your application OR on Form builder > Share > Widget code > Widget Custom CSS option

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

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