In regards to the Feedier widget,
The widget supports any question types, conditions, and design as does the regular surveys when they are not loaded through a widget.
The widget’s script is 100% cached and served through a CDN (Cloudflare). Also, the requests to Feedier’s backend to load the survey data are cached.
The widget options in Feedier are designed to remove as much developer resource as possible from the process.
When possible, we recommend using a Tag Manager system to load the Feedier widget.
Where to find the widget’s JS code ?
Sources → Surveys → Share → Widget
Select the button and click to copy to select the widget code.
Click the button Save and Preview to view your changes and Preview the widget.
Adding attributes to the Widget
Adding attributes is essential to making the feedback collected through the widget actionable from the Feedier Dashboard. It gives depth to the insights and helps detect trends or issues faster.
When adding the widget, very common attributes could be:
browser
user_id
geolocation
locale
user_role
version
screen_size
page_url
etc.
Feedier never automatically imports any user data, or data from the page where it is loaded.
Method 1 : adding attribute through the widget code URL
Attributes can be added by simply forwarding them in the URL of the widget code as GET parameters.
Here is an example to attach 3 attributes: user role, user id, signed-up date
<script id="feedier-widget-script"
src="{endpoint}/js/widgets/v2/widgets.js?form-id={form}&
public-key={public_key}&
no_header=true&
user_id=1234&user_role=Premium&signed_up_date=10.02.24"
async></script>
Feedier will automatically create the attribute when the first value is recorded, it does not require to be created beforehand.
Method 2: adding attributes through the JavaScript SDK
The widget can also be initialized through JavaScript and attributes can be passed in the configuration. This is very useful if the attributes data are coming after the content is loaded but through other components.
FeedierWidget.init({
form_id: {form_id},
attributes: {
user_id: 'marketing',
user_role: 'Premium',
signed_up_date: '10.02.24'
},
forced: true
});
JavaScript SDK
The object loaded when the script is set is: FeedierWidget
The methods :
.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.
For this option to work, the display delay must be set to 0.
.init(options);
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
},
forced: true
});
This method initializes the widget based on the options object.
Option name | Type | Description |
|
| Feedier survey ID. It can be found in the API or on survey-> options → form management |
|
| Attributes to be attached to the feedback on Feedier. Attributes are contextual data coming from the client side. |
|
| If set to true, the widget will be displayed even if the user has already replied to the survey. |
Listening to events
Widget event
The SDK will trigger events when the widget is built:
document.addEventListener('FeedierWidget.built', (e) => {
// Here for example we open the widget on init
FeedierWidget.toggle();
});
Survey events
The iframe loaded from the SDK will trigger events during the survey completion.
Whenever a question is answered,
window.addEventListener('message', function(event) {
if (event.data.eventName === 'question_answered') {
console.log(event.data);
};
});The event.data, is an object with the following structure:
{
question_id: INT,
question_option_id: ?INT,
question_type: "nps", // "text", "choices", "rating", etc.
question_name: STRING,
value: STRING,
}
Whenever the survey is completed,
window.addEventListener('message', function(event) {
if (event.data.eventName === 'feedback_completed') {
// Do stuff
};
});
⚠️ The respondent might never complete the survey. Therefore this event might never be triggered.
Testing the Feedier widget
Feedier will store a timestamp in the browser’s local storage when the user completes a widget linked to the survey ID.
To test the widget without having to wait for the expiration of the timestamp stored in the local storage (defined in the widget setting in Feedier), two options are available:
Option 1: Pass a
preview=trueparameter to stop this behavior.Option 2: In the console, wipe out the Storage → Local Storage → Feedier.widget
Use Case 1: Display the Feedier widget on a custom button click through JavaScript
Sources → Surveys → Share → Widget → Visibility
In the settings,
Toggle off the Show on Init option
Add in the Custom JavaScript Loaded option: FeedierWidget.toggle()
An example of trigger:
<a href="#" id="feedback-start" class="btn btn-primary">
Feedback
</a>
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>
This can be adapted with any frontend framework: React, Vue, etc.
Example: Close the widget after feedback is completed
window.addEventListener('message', function(event) {
if (event.data.eventName === 'feedback_completed') { $('.feedier-widget').hide() };
});
Use-Case 2: Changing the Widget style using CSS
All CSS customizations can be managed within Feedier. However, on the widget side, it might be recommended to add these customizations directly through the site’s stylesheet.
Also, there are two types of CSS changes in the Feedier widget:
Type 1: CSS Inside the form
The styling of the widget’s content, the form is loaded through the iframe and can be controlled here:
Survey → Branding → Custom CSS
Type 2: CSS on the widget
Survey → Share→ Widget → Design
CSS can be added to your application OR under the Design section of the widget page.
CSS classes can be explored through the inspector, the most notable ones are:
CSS class | Description |
| Widget feedback button |
| Widget iframe wrapper |
Example of adding CSS to the widget
The following example will set the widget button color to red, change its font, and remove the border across the survey:
.feedier-widget__caller {
background: #ce0707;
color: #FFF;
border: 0;
font-family: Arial;
}
.feedier-widget__popup {
padding: 0;
}
Use-Case 3: Showing the widget at specific events using Google Tag Manager
There are several advantages of using a Tag manager, including :No developer time needed, proactive feedback using triggered events, and attaching attributes easily.
Create a new tag in Google Tag Manager
Tag Manager → Add a new tag → Tag configuration → Paste Feedier widget code
Make sure to publish a new version of GTM when you make changes in your configuration (eg. you change the triggering method).
Then, add an explicit Tag name like “Feedback Widget Feedier” and click the Tag Configuration icon:
Select “Custom HTML” in the Tag Type and in the editor paste the Feedier widget code
Using the Custom HTML under tag configuration, you can attach attributes via GTM. GTM will automatically replace the variables defined using their data layer.
Eg. role=##{{user.role}}&plan=##{{user.plan}} becomes role=director&plan=enterprise
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.
Make sure that jQuery is loaded on the page. It's a common error. If your widget isn't loading, and you have no idea why, you can easily determine if jQuery is the culprit. Open the console (right-click on the page > "Inspect the page"). You will see the error that jQuery isn't loaded.
Use-Case 4: Showing the widget only once based on a specific attribute value
It’s possible in the Feedier Platform to restrict the widget visibility based on advanced ruled. One of the most common use case is to restrict the widget based on an attribute value.
So for example,
If the widget is loaded with user_id=123, and user_id=123 replies, the widget for this specific survey will never show up again.
To do this, go to Advanced settings and select the attribute in “Restrict access by attribute value“.
If you want to add a specific timeline, we recommend concatenating attribute values with a time element.
For exemple, to display it every month :
Add an attribute in the widget URL like widgetuid=##{{userId}}-##{{month}}##{{year}}
This will create something like widgetuid=123-0225
If you select widgetuid in the Advanced Settings option, user id 123 will only be able to reply once a month.
Widget settings explained
🎨 Design Settings
• Layout — Vertical vs Horizontal
→ Set to horizontal: the widget button appears flat at the bottom of the screen (left or right corner). The survey popup opens above the button.
→ Set to vertical: the widget button is rotated sideways and anchored to the side edge of the screen (at 50% height). The button text reads vertically. The survey popup opens next to it (inward toward the page center). On mobile (< 767px), the popup width is capped at 75% of the screen.
• Align — Left vs Right
→ Set to right: the widget is pinned to the right side of the screen (30px from the edge). The popup arrow points toward the right.
→ Set to left: the widget is pinned to the left side of the screen (30px from the edge). The popup arrow points toward the left.
→ Combined with Layout: If layout is vertical + align right → button sticks to the right edge, rotated counter-clockwise. If vertical + align left → button sticks to the left edge, rotated clockwise.
• Button Text
→ Type your own label (e.g., "Share your opinion"). This text is displayed directly on the clickable widget button. If left empty, it defaults to "Give your Feedback".
• Button Style — Tag vs Ratings
→ Set to tag: a standard clickable label/button appears on the screen. Users click it to open the survey popup.
→ Set to ratings: the widget button is hidden entirely. Instead, the survey is embedded inline directly into your page (inside the Mount element you specify). When the user answers the first question, the widget expands into a modal overlay (centered, with a dark background) showing the full survey. The close button becomes visible only after this expansion.
• Mount (only visible when Button Style = Ratings)
→ Enter a CSS selector (e.g., #my-div or .feedback-section). The ratings widget will be injected inside that element on your page. If left as body, it attaches to the page body. If the element is not found on the page, the widget will not appear.
• Button Color
→ Pick a color. This sets the background color and border color of the widget button. Applies to the floating button in "tag" mode.
• Background Color
→ Pick a color. This sets the background color of the survey popup container.
• Progress Color
→ Pick a color. This sets the color of the progress bar displayed at the top of the survey inside the widget.
• Width (in pixels)
→ Enter a number. This overrides the width of the survey popup. If not set, the popup defaults to 30% of the browser window width on desktop (90% on mobile).
• Height (in pixels)
→ Enter a number. This overrides the height of the survey popup. If not set, the popup auto-adjusts dynamically based on the survey content (with a 110px offset). This auto-resize only works when button style is NOT "ratings" and no fixed height is set. When button style is "ratings", the default height is 220px (before expansion).
• Custom CSS
→ Paste any CSS code. It will be injected as a <style> tag on the page where the widget loads. Use this to fully customize the widget appearance. Example: .feedier-widget__caller{ background: red; color: white !important; } changes the button to red with white text.
👁️ Visibility settings
• Reappear on Close
→ Turned ON: if a visitor closes the widget without submitting feedback, the widget will reappear on their next page load (ignoring the expiration timer). It only stays hidden once the visitor actually completes the survey.
Feedier Survey Developer [10 h 56]
→ Turned OFF: once a visitor closes the widget (even without answering), the widget will not reappear until the expiration period has passed.
• Show on Init (Auto-display)
→ Turned ON: the widget automatically appears when the page finishes loading (subject to the Delay setting).
→ Turned OFF: the widget does not appear automatically. It will only show if triggered by another method (Exit Intent, Manual Target, or Custom JavaScript).
• Delay (in seconds — only visible when Show on Init is ON)
→ Enter a number (0 to 1000). The widget will wait this many seconds after page load before appearing. Example: set to 30 → the widget slides in 30 seconds after the visitor lands on the page. Set to 0 → appears immediately.
• Exit Intent (Warn Before Close)
→ Turned ON: the widget automatically appears when the visitor moves their mouse outside the browser window (e.g., toward the browser's close button or address bar). This is a common technique to catch users before they leave. Only triggers once per page load.
→ Turned OFF: mouse movement has no effect on widget display.
• Manual Target (CSS selector)
→ Enter a CSS selector (e.g., .your-css-selector or #feedback-btn). When the visitor clicks on that element on your page, the widget opens. This lets you attach the widget to your own custom button or link. If the element is not found on the page, nothing happens (a warning is logged in the console).
• Custom JavaScript
→ Paste JavaScript code that runs 500ms after the widget is initialized. You can use the widget's built-in API:
◦ FeedierWidget.toggle(); → opens/closes the popup
◦ FeedierWidget.show(); → shows the widget
◦ FeedierWidget.show(true); → force-shows the widget (ignores expiration)
◦ FeedierWidget.hide(); → closes the widget
→ You can also listen to events:
◦ FeedierWidget.on('feedback_completed', function() { ... }); → runs when feedback is submitted
◦ FeedierWidget.on('question_answered', function() { ... }); → runs when a question is answered
◦ FeedierWidget.on('feedier_widget_closed', function() { ... }); → runs when the widget is closed
• Expiration (in days)
→ Enter a number. After a visitor closes or completes the widget, it will not reappear for this many days. Default is 30 days. This is stored in the visitor's browser (localStorage under feedier.widgetV2). Example: set to 7 → the widget won't show again for 7 days after interaction.
📄 Display Management (optional)
• Included Pages
→ Enter a comma-separated list of URLs or URL patterns. The widget will only appear on pages matching these patterns. The matching uses regex against the full page URL. Example: https://mysite.com/pricing, /contact → the widget only shows on the pricing page and any page containing "/contact". If left empty, the widget can appear on all pages.
• Excluded Pages
→ Enter a comma-separated list of URLs or URL patterns. The widget will never appear on pages matching these patterns, even if they match the Included Pages. Example: https://mysite.com/admin, /dashboard → the widget is hidden on admin and dashboard pages. Excluded pages take priority if a URL matches both included and excluded lists.
⚙️ How settings interact ?
• Display priority chain: Excluded Pages → Included Pages → Expiration check → Reappear logic → Show on Init / Exit Intent / Manual Target
• On feedback completion: the expiration timer starts, and the widget auto-closes after 2.5 seconds
• On mobile devices (< 767px): horizontal widgets stretch to full screen width, the button sits at the bottom edge, and the popup takes up nearly the full screen
• Hash changes (single-page apps): the widget automatically re-initializes when the URL hash changes, so it works with SPA routing.