Web Widget - Advanced Settings

Modified on Fri, 27 Jan 2023 at 01:31 PM

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



This method opens or closes the feedback widget’s content depending on the current status. It either shows the form or closes it.


    form_id: 123,
    attributes: {
        foo: bar
    forced: true

This method initializes the widget based on the options object.

option's nametypedescription
form_idintFeedier form/survey ID. It can be found in the API or Dashboard in the URL when editing a form. 
attributesobjectAttributes to be attached to the feedback on Feedier. Attributes are contextual data coming from the client-side. Avoid personal data and prefer user ID. 
forcedbooleanIf set to true, the widget will be displayed even if the user already replied to the survey before.

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.

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

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

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

Use case: close the widget after the feedback is completed

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

Showing the widget at specific events 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 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: 

CSS classDescription
Widget feedback button
.feedier-widget__popupWidget iframe wrapper 

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;


Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select atleast one of the reasons

Feedback sent

We appreciate your effort and will try to fix the article