Let's find out how you can embed or use the widget for your website or web-app.
Feedier offers you two ways to plug your Feedier Carrier on your website, let's find out how.
We've crafted our own widget, attractive, smooth and fitting most website, so you can collect feedback or answers straight from your visitors/users.
It's a simple snippet you can grab from your Share tab of every carrier. You can then add it to your website code, any website or web-app would do.
As we mention on the page, you must have jQuery loaded, otherwise it won't work.
Attribute that can be changed:
- Position of the widget: left or right, using the data-position attribute
- The shaking effect: true or false, the widget will shake and open automatically after 10sec if not clicked by the user before. Using the data-shake attribute
- The probability for which the widget will display: a number between 0 to 100 (default), probability to display the widget. If 50, the widget will be displayed randomly one time out of two. Using the data-display-probability attribute
- The email of the user: If your user is logged in, you might already know his email, you can pass it and we associated with the feedback. Using the data-email attribute
- Pass custom fields: If you have created custom fields for your Carrier, you can pass them in the widget, using the data-custom-fields. With two custom fields user_id and name, it would look like data-custom-fields="user_id=22&name=bapt". Note that you need to create those custom fields in your Feedier dashboard beforehand (learn how here).
- Whether you want the user to leave the website or not to answer: true or false, using the data-in-site attribute
- Customise the title: If it remains absent, the reward name will be used, or "Give your feedback" if we don't have any reward. Use the data-widget-title attribute
- Add a trailing line: optional extra information that will be displayed in the widget at the end. Using the data-extra-line attribute
- Change the size: if you want the widget (for the user answering on-site) to be smaller, you can pass the parameter data-size="small"
Note that the Feedier widget script have to be loaded first, otherwise, it will not work. Always check that the window.feedierWidget object is defined.
The available methods are:
- window.feedierWidget.engager.show(): Will show the Engager widget. No matter if it's been hidden before. Can be checked with the isAvailable() method.
- window.feedierWidget.engager.hide(): Will hide the Engager widget for the current user.
- window.feedierWidget.engager.isAvailable(): Returns a Boolean. Whether the Engager widget is hidden or not.
- window.feedierWidget.engager.toggle(): Will open or close the Engager widget's content depending on the current status.
- window.feedierWidget.engager.shake(): Will shake the Engager button for 1 second to attract the visitor's attention.
Answering directly on the website
If you want your users to answer directly on the website, without leaving it, you have to use the data-in-site="true" attribute, as simple as that.
So our code looks like this:
And it looks like this:
Display the widget on specific conditions
That's being said, you can make that happen using your backend. For example, if you're running a Laravel application, you could do the following to display the widget only if the user is logged:
Example with Google Tag Manager
We have written a full tutorial on this page.
Example for a Shopify website
Let's say we want to add the widget on our Shopify website, and only on specific pages. For the sake of this example, we will display only on the cart, on the left side.
Example for a WordPress website
We have a WordPress plugin underway, stay tuned.
Embed an IFRAME
For some reason, you might prefer falling back to a simple iFrame instead of the widget, in order to embed the Carrier at a specific place of your website.
You can grab the iFrame code from the Share page.
Couple of things to note:
- Please make sure to wrap it inside a div with a given height
- It's your developer responsibility to make it responsive. iFrame are not responsive by default.
- Example of CSS you can use: https://jsfiddle.net/8q4sphjx/