If you signed up before Aug 9, 2021, please click Previous plans to view your applicable plans.
Note: If you can't see the Feedback Widget in your admin settings, you can make use of Widgets and the Feedback form. The Feedback widget is being phased out in batches due to the availability of the better and more functional help widget. Please contact support@freshdesk.com if you need any help with setting up the help widget.
The Feedback Widget can be easily installed on your website, your portal, or just about any web page you want. It lets your customers create support tickets easily, and makes your support more accessible to them.
You can pre-populate the meta information in your Freshdesk Feedback Widget when your customers try to get in touch with you. Whenever they use the widget, you could have their names, email addresses, or any common relevant information pre-populated into the ticket form based on existing data. That way, they will be able to get the ticket created quickly.
You can also set default values for ticket fields, such as dropdowns, nested fields, checkboxes, etc.
Passing ticket form elements into the feedback widget
- You can pass any number of ticket form field values by appending: helpdesk_ticket[fieldName]=fieldValue
- You can fill up static fieldValues if you want the same field to be populated for all users, or you can pass data from your database using the same business logic as in your web applications.
Passing default fields
| Ticket field | How to use this | Ruby on rails example |
| Requester email (the email address of logged in users) | helpdesk_ticket[requester]={{user.email}} | helpdesk_ticket[requester]=<% logged_in_user.email %> |
| Ticket subject | helpdesk_ticket[subject]={{ticket.subject}} | helpdesk_ticket[subject]=Order tracking |
Passing custom fields
- You can also pass custom field values in the Feedback widget by appending helpdesk_ticket[custom_field][fieldName]=fieldValue
- Note that the custom field name will have a unique identifier number added to it. To identify the fieldName for custom fields, click on the 'New Ticket' page and inspect the form element HTML.
- Hint: Right-click on the field and hit 'inspect element' in Chrome, or use the firebug in Firefox.
- Copy the contents in the “name” of this custom field.
- You can now append this code along with the value you want to pre-populate for this field in your feedback widget.
A quick guide on pre-populating ticket fields:
- Setup your feedback widget customization (learn how to customize your widget)
- Your default widget code will look something like this:
- You can copy this code in your editor and modify it to auto-populate fields. For example, in this code, the email address of the requester, the ticket subject, the phone number of the requester and the product name are set to auto-populate (Phone number and product id are custom ticket fields).
For the Pop-up widget:
< script type = "text/javascript"
src = "https://assets.freshdesk.com/widget/freshwidget.js" > < /script><script type="text/javascript
"> FreshWidget.init("
", {"
queryString ":" & helpdesk_ticket[requester] = {
{
user.email
}
} & helpdesk_ticket[subject] = {
{
user.subject
}
} & helpdesk_ticket[custom_field][phone_number] = {
{
user.phone
}
}
", "
utf8 ": "✓
", "
widgetType ": "
popup ", "
buttonType ": "
text ", "
buttonText ": "
Support ", "
buttonColor ": "
white ", "
buttonBg ": "
#006063", "alignment": "4", "offset": "235px", "formHeight": "500px", "url": "https://yourcompany.freshdesk.com"} );</script>
Note: The pop-up widget is being phased out in batches due to the availability of help widget, which is better and more functional. You can learn how to prepopulate fields in the help widget here.
For the Embedded widget:
<script type = "text/javascript" src = "https://assets.freshdesk.com/widget/freshwidget.js" > < /script>
<style type = "text/css" media = "screen, projection" > @import url(https: //assets.freshdesk.com/widget/freshwidget.css);
</style>
<iframe title = "Feedback Form" class = "freshwidget-embedded-form" id = "freshwidget-embedded-form" src = "https://yourcompany.freshdesk.com/widgets/feedback_widget/new?&widgetType=embedded&screenshot=no&helpdesk_ticket[requester]={{user.email}};helpdesk_ticket[subject]={{user.subject}}"
scrolling = "no"
height = "500px"
width = "100%"
frameborder = "0" >
</iframe>
- Paste this new code on your website or application between the <body> and </body> tags
Disabling pre-populated fields
You can disable the fields you pre-populate in the feedback widget so that their values cannot be changed by your ticket requesters. For example, you may have a custom field called location in your ticket form which you don't want your customers to edit. In that case, you can disable the location field by tweaking the widget code. You just need to add '&disable[fieldName]=true' or '&disable[custom_field][fieldName]=true' depending on whether the field is default or custom.
In this code, the fields 'requester' and 'product_id' are disabled.
<script type="text/javascript" src="https://assets.freshdesk.com/widget/freshwidget.js"></script><script type="text/javascript">
FreshWidget.init("", {"queryString": "&helpdesk_ticket[requester]={{user.email}}&helpdesk_ticket[subject]={{user.subject}}&helpdesk_ticket[custom_field][phone_number]={{user.phone}}&helpdesk_ticket[custom_field][product_id]={{helpdesk.product}}&disable[requester]=true&disable[custom_field][product_id]=true", "buttonText": "Support",
"buttonColor": "white", "buttonBg": "#006063", "alignment": "4",
"offset": "235px", "url": "https://yourcompany.freshdesk.com",
"assetUrl": "https://yourcompany.freshdesk.com/widget"} );
</script>
Paste this code on all the pages of your website and application that you want the popup feedback widget to appear on.
Sample screenshot of how the field would show up on your widget upon disabling pre-populated fields:
Further instructions for web applications:
If you are looking to use the Freshdesk feedback widget in applications based on frameworks like React, Angular or Ember, you need to include a line along with the widget's code to the population is working properly. This will make the widget initialize immediately instead of waiting for a window.load which would have already happened in the case of a web application.
{
...
loadOnEvent: 'immediate'
}The Feedback Widget can be easily installed on your website, your portal, or just about any web page you want. It lets your customers create support tickets easily, and makes your support more accessible to them.
You can pre-populate the meta information in your Freshdesk Feedback Widget when your customers try to get in touch with you. Whenever they use the widget, you could have their names, email addresses, or any common relevant information pre-populated into the ticket form based on existing data. That way, they will be able to get the ticket created quickly.
You can also set default values for ticket fields, such as dropdowns, nested fields, checkboxes, etc.
Passing ticket form elements into the feedback widget
- You can pass any number of ticket form field values by appending: helpdesk_ticket[fieldName]=fieldValue
- You can fill up static fieldValues if you want the same field to be populated for all users, or you can pass data from your database using the same business logic as in your web applications.
Passing default fields
| Ticket field | How to use this | Ruby on rails example |
| Requester email (the email address of logged in users) | helpdesk_ticket[requester]={{user.email}} | helpdesk_ticket[requester]=<% logged_in_user.email %> |
| Ticket subject | helpdesk_ticket[subject]={{ticket.subject}} | helpdesk_ticket[subject]=Order tracking |
Passing custom fields
- You can also pass custom field values in the Feedback widget by appending helpdesk_ticket[custom_field][fieldName]=fieldValue
- Note that the custom field name will have a unique identifier number added to it. To identify the fieldName for custom fields, click on the “New Ticket” page and inspect the form element HTML.
- Hint: Right-click on the field and hit “inspect element” in Chrome, or use the firebug in Firefox.
- Copy the contents in the “name” of this custom field.
- You can now append this code along with the value you want to pre-populate for this field in your feedback widget.
A quick guide on pre-populating ticket fields:
- Setup your feedback widget customization (learn how to customize your widget)
- Your default widget code will look something like this:
- You can copy this code in your editor and modify it to auto-populate fields. For example, in this code, the email address of the requester, the ticket subject, the phone number of the requester and the product name are set to auto-populate (Phone number and product id are custom ticket fields).
For the Pop-up widget:
<script type="text/javascript" src="https://assets.freshdesk.com/widget/freshwidget.js"></script>
<script type="text/javascript">
FreshWidget.init("", {"queryString":"&helpdesk_ticket[requester]={{user.email}}&helpdesk_ticket[subject]={{user.subject}}&helpdesk_ticket[custom_field][phone_number]={{user.phone}}", "utf8": "✓", "widgetType": "popup", "buttonType": "text", "buttonText": "Support", "buttonColor": "white", "buttonBg": "#006063", "alignment": "4", "offset": "235px", "formHeight": "500px", "url": "https://yourcompany.freshdesk.com"} );
</script>For the Embedded widget:
<script type="text/javascript" src="https://assets.freshdesk.com/widget/freshwidget.js"></script>
<style type="text/css" media="screen, projection">
@import url(https://assets.freshdesk.com/widget/freshwidget.css);
</style>
<iframe title="Feedback Form" class="freshwidget-embedded-form" id="freshwidget-embedded-form" src="https://yourcompany.freshdesk.com/widgets/feedback_widget/new?&widgetType=embedded&screenshot=no&helpdesk_ticket[requester]={{user.email}}&helpdesk_ticket[subject]={{user.subject}}" scrolling="no" height="500px" width="100%" frameborder="0" >
</iframe>
- Paste this new code on your website or application between the <body> and </body> tags.
Disabling pre-populated fields
You can disable the fields you pre-populate in the feedback widget so that their values cannot be changed by your ticket requesters. For example, you may have a custom field called location in your ticket form which you don't want your customers to edit. In that case, you can disable the location field by tweaking the widget code. You just need to add '&disable[fieldName]=true' or '&disable[custom_field][fieldName]=true' depending on whether the field is default or custom.
In this code, the fields 'requester' and 'product_id' are disabled.
<script type="text/javascript" src="https://assets.freshdesk.com/widget/freshwidget.js"></script><script type="text/javascript">
FreshWidget.init("", {"queryString": "&helpdesk_ticket[requester]={{user.email}}&helpdesk_ticket[subject]={{user.subject}}&helpdesk_ticket[custom_field][phone_number]={{user.phone}}&helpdesk_ticket[custom_field][product_id]={{helpdesk.product}}&disable[requester]=true&disable[custom_field][product_id]=true", "buttonText": "Support",
"buttonColor": "white", "buttonBg": "#006063", "alignment": "4",
"offset": "235px", "url": "https://yourcompany.freshdesk.com",
"assetUrl": "https://yourcompany.freshdesk.com/widget"} );
</script>
Paste this code on all the pages of your website and application that you want the popup feedback widget to appear on.
Sample screenshot of how the field would show up on your widget upon disabling pre-populated fields:
Further instructions for web applications:
If you are looking to use the Freshdesk feedback widget in applications based on frameworks like React, Angular or Ember, you need to include a line along with the widget's code to the population is working properly. This will make the widget initialize immediately instead of waiting for a window.load which would have already happened in the case of a web application.
{
...
loadOnEvent: 'immediate'
}
