loading Loading...

Freshdesk Support Widget

The Support Widget allows you to collect feedback or support requests directly from your ProProfs site. This saves your customers from having to locate your support email or contact details. With a single click, your customers can fill out your support form and the data will automatically be sent to Freshdesk as a ticket. You can even add this form to your external websites or apps.

The following topics are covered on this page:


Subscription

This feature is not available on the Basic or Solo plan. Learn how to upgrade your plan.

Creating the Support Form

  1. Go to Settings > Support Form then choose the site you want to add the support form to.
  2. Select Freshdesk.

Step 1 > Enter Credentials

The Support Widget will submit the data to Freshdesk via API. The first step is to fill in the API credentials.

  • Username - Enter your Freshdesk username such as johndoe@xzy.com. This can be any valid Freshdesk username.
  • Subdomain - Enter your Freshdesk account URL such as company.freshdesk.com.
  • API Key - Enter your API key. This can be found by going to:
    • Log in to Freshdesk. On the top right corner, you will see your profile image. Click on that and select Profile settings.
    • On the right side you will see Your API key. Copy that key.

      Next paste it into ProProfs.
    • After you enter in your credentials, click next

Step 2 > Select Ticket Fields

After you enter in your credentials and click next, ProProfs will connect to Freshdesk and read all the ticket fields. Custom ticket fields are typically used to gather more information about the support issue, product, or service. For example, you may want your customers to also select the model name and number of your product. Learn how to add ticket fields in Freshdesk

After ProProfs reads the ticket fields, you will set which fields you want to display, if the field is required, and the order of the fields. Note: ProProfs will read all fields including hidden fields. It is up to you to select which fields you want to collect. 

  • Show Field - Place a checkmark for each field you want to display on the form. Uncheck, and the field will be hidden.
  • Make Field Required - Place a checkmark for each field you want to be required to fill out.
  • Label - The original label is shown as provided by Freshdesk. You can leave as is or rename (this will not affect your help desk). 
  • Type - The field type as provided by Freshdesk (text, email, mult-line, drop down, etc.,)
  • Layout - This refers to the form layout. 1 column layout means that the form field will span the entire width. 2 column layout means the form will allow 2 fields side-by-side to each other. 
  • Field Order - You can change the order of the fields by dragging and dropping to the desired order. For example, lets say you want 'Type' to appear before 'Name'. You can simply drag it above.

Once you have finished with the fields, click Next.

Customizing the Support Form

After you have successfully setup the fields you can now customize the Support Form. 

  • Form Title - Enter a form title. 
  • Thank you message - The thank you message will be shown after the form has successfully been submitted. 
  • Enable search suggestions (ticket deflection) - As the user types in a subject for the ticket, pages from your ProProfs site are instantly suggested. The goal is to help the user find what they are looking for so they don't have to submit a ticket. This is often referred to as ticket deflection, as it helps customers find answers without ever having to submit a ticket.
     
At this time only topics from your ProProfs site are suggested.
  • Show placeholder text in form fields - Select this option is you want placeholder text to be in the form fields.
  • Lightbox Height - Enter in the height of the lightbox window. The default is 500 pixels.
  • Background Overlay - Select if you want the lightbox to have a transparent (80%) background overlay color.

You can also test the form at any time by click the Test button.

Tab

The tab is what your users can click on to display the support form (the tab can also be hidden). It is a small tab that can appear on the top, bottom, left, or right of the web browsers window. 

The tab's text and color can be customized and branded. 

  • Enable Tab - Unselect if you do not want to use the tab. You can still open the support form via hyperlink as describe below
  • Type - You can use the default 'text' tab or upload your own image. 
  • Position - Choose the position of the tab (top, bottom, left, or right). Changing will instantly update so you can preview it. You can also change the offset to move the tab to the desired location. 
  • Label - Enter in the text of the label. The default is 'Support' but some other good options are: Feedback, Help, Questions, Comments, Email, Ask Us.
  • Background and Text color.  Use the color picker to select the color of the tab. You can also change the color of the text.
  • CSS - For more advanced customizations, you can enter in your own custom CSS for the tab. 

Image Tab

  • If you choose to use Your Image, you can upload a custom image.
‚ÄčEvery customization you make will reflect in real-time so you can have a live preview of all your changes as you customize.

Embed Options

In addition to the tab, we provide a few other options in displaying the Support Form.

  • Lightbox Hyperlink - This option allows you to add hyperlink anywhere inside of ProProfs to open the support form in a lightbox. You could add the link in your navigation or anywhere on a page, that when clicked, will open the lightbox. To use, simply copy the provided hyperlink code <a href="#" rel="supportlightbox">Support</a> and paste it onto any page or in your header. You can see a link we added to the custom header called 'Support' below.

    When click, it will open the support form.
  • Pop-Up - This option works best for external websites and web applications. Just copy the provide code and paste it in your website. Clicking the link will open the support form in a pop-up window.
  • Embed Code - If you want to embed just the form (no lightbox or pop-up window) then you can use this code. Just copy the provided code and paste it in the source code of any page of your external website.