In order to implement the web widget exactly how you'd like, you might need to delve into the advanced aspects the web widget.. We recommend you run the below through with a developer to make sure everything is working smoothly.


1. Advanced Settings in the Widget


Widget show onit = Display widget on loading of page.

Widget show with Delay = How many seconds until the widget appears

Warn before close = Popup when user tries to exit the page or moves the cursor outside of the screen

Widget Manual Target = The widget is displayed on this event

Widget Script = Location for adding Javascript methods

Widget reappaear after (days) = After completing the widget, how many days it'll take to come back.

Widget excluded pages = Pages you don't want the widget to show in



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


3.  Showing the widget at specific moments using JavaScript


The widget settings inside the form gives you a number of basic settings. In order to specify exact moments for the widget to be activated, you can set up a JavaScript framework like Angular, Vue.js or React? This is the best way to get quality feedback at defined moments 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() 


4. Showing 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



5. Changing the Widget style using CSS


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



6. Widget FAQs


How do you 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 do you attach user data to the feedback (email, ID, role…)?

To attach context attributes to the feedback, use the data-custom-fields option (see Widget Integration and Context attribute help articles). 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 do you 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;
}
}