Freshdesk allows you to collect feedback from your customers using our handy feedback widget, which may be embedded into your website, support portal or any third party website. This allows your customers to submit tickets without having to look around for a support portal or remember your support email.

In order to set it up, you need to configure a feedback widget in Freshdesk and put up the code snippet on your website. If you want it to be available across several pages, you can set up a pop- up widget that will appear as a small tab on the side of your screen and will open up a form when clicked. You could also set up an embeddable widget, which will put a form directly on one of your pages (for example, the Contact Us page). Either way, the widget will display the ticket form with all the ticket fields you have configured inside Freshdesk, automatically.

You can choose to allow users to attach screenshots, take screenshots or search through your knowledge base through the feedback widget. You can also pre-populate the ticket form with requester information.


Quick guide to customizing and adding a feedback widget:

  • Login to your support portal as an administrator.
  • Go to Admin > Support Channels > Feedback Widget.
  • You can place the ticket form inside your web page as a pop up widget (accessible through a button available across all pages in your website) or as an embedded widget (the ticket form itself will be placed in the page), or both.

Pop-up widget Button customization:


You can customize the widget button in the case of a pop-up widget. The button could display text or an image.

  • If you choose to have a text in the button, you can specify the display text under Label and pick a color for the button that goes with your website from Background.
  • If you choose to have an image in the button, you need to specify the URL of the image under Image URL.
  • You can also choose the position of the widget button. The drop down lets you choose where on the page the button should appear and the offset box lets you choose how far away from the corner the button should appear.
  • Every customization you make here will be reflected in the prototype widget button. You can make changes accordingly.

Form customization
You can customize the ticket form in both pop up and embedded widgets. In case of the pop up widget, the ticket form opens when you click on the button.
  • Give a title to your ticket form under Form Heading.
  • Form submit message will be shown to the ticket requester after they submit a ticket through the form. You could include a message telling your requesters when they can expect a solution to their problem.
  • You can specify the height of the ticket form in pixels based on the number of ticket fields you have in the form.
  • Under Form Options, you can add more capabilities to your ticket form like:
    • Letting users take a screenshot of the screen which is open (not available in embedded widget)
    • Letting users attach files to their ticket
    • Allowing them to search your knowledge base directly from the ticket form
    • Using the widget in SSL encrypted pages. In this case, enable the Use Https toggle before copying the code
    • Preventing spam by enabling CAPTCHA in the form
    • Making the form visible on mobile phones


Widget code

  • The widget code would have changed to reflect the customizations update. You can copy it and paste it in the web page where you want the widget to appear.
  • In case of a popup widget, paste the code within <title> and </title> tags of the page. If you are putting it on your website, make sure that you paste the code on every page.
  • You can use the Mobile view toggle to enable the widget on your mobile optimized page.
  • If you are using the embedded widget, paste the embedded widget code at the exact place in the page where you want the form to show up.
  • If you are using the widget in SSL encrypted pages, enable the Use https toggle and then copy the code.
  • If you make any changes in customization after you put the codes in place, make sure that you copy paste the new code again.

Pre-populating ticket fields
You can pre-populate the meta information in your Freshdesk Feedback Widget whenever 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. You can also set default values for ticket fields, such as drop downs, nested fields, checkboxes etc. This saves your customer a lot of time and effort.


Take the code for your widget and copy it to 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).


<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}}", "widgetType": "popup", "buttonType": "text", "buttonText": "Support", "buttonColor": "white", "buttonBg": "#338700", "alignment": "4",

"offset": "235px", "formHeight": "500px",

"url": "http://<yourcompany>.freshdesk.com"} ); 

</script>

Paste this new code on your website or application between the <body> and </body> tags.


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.


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.
  • The fields "requester" and "product_id" are disabled in the following example.

<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": "http://<yourcompany>.freshdesk.com", "assetUrl": "http://<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.
Note: You can also follow the same steps to pre-fill field values in both the Embedded as well as the Popup Feedback Widgets