Support Ticket Widget

 

The Support Ticket 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 your help desk (either Zendesk, Desk, or 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.

 

Help Desk Vendors

 

At this time Zendesk, Freshdesk, and Desk.com are supported. Please email us to request additional vendors.

 

Creating the Support Form

 

  1. Go to Settings > Support Form then choose the site you want to add the support form to.
  2. Select which Help Desk vendor you want. The available options are Zendesk, Desk, and Freshdesk.
  3. As mentioned above, when your customer fills out the form, the data will automatically be submitted to your help desk.

Step 1 > Enter Credentials

The Support Widget will submit the data to your help desk provider via API. The first step is to fill in the API credentials.

Select your help desk provider below for detailed guidance on how to find the API credentials.
 

 Zendesk

  • Username - Enter your Zendesk username such as johndoe@xzy.com. This can be any valid Zendesk username. 
  • Subdomain - Enter your Zendesk subdomain such as company.zendesk.com 
  • API Key - Enter your API key. This can be found by going to:
    • After you log in to Zendesk click on the Settings icon on the bottom left side.
    • In the left navigation bar, under Channels group, click on API.
    • Enable the Token Access checkbox. In the token access section, you will find your API token key. Copy the API token. 

      Paste into ProProfs 
    • After you enter in your credentials, click next.


 Desk.com

  • Username - Enter your Desk.com username such as johndoe@xzy.com. This can be any valid Desk username. 
  • Subdomain - Enter your Desk account URL such as company.desk.com 
  • API Key/Token and Token Secret - This can be found by:
    • Log into Desk.com. From the top navigation select Settings.
    • Then on the upper right look for Settings.
    • On the left side navigation select API.
    • Now from the API page click Add API Application.
       
    • It will open an overlay to create an API key. For the name enter 'ProProfs' and for the website URL enter your ProProfs site URL such as http://mysite.helpdocsonline.com. You do not need to enter in a Callback URL or a Support URL.
    • Click Add. The form will save and display your API key and API secret. Copy these values and paste them into ProProfs.
    • Next, Desk requires some additional credentials. Click on Your Access Token.
    • An overlay will appear. Copy the Token and Token Secret and paste into ProProfs. 
    • After you fill in your credentials, click next.


 Freshdesk

  • 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 your help desk vendor and read all the ticket fields your help desk is using. Custom ticket fields are typically used to gather more information about the support issue, product, or service. For example, you may want your customers also to select the model name and number of your product. Learn how to add ticket fields in Zendesk, Desk, and 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 your help desk vendor. You can leave as is or rename (this will not affect your help desk). 
  • Type - The field type as provided by your help desk vendor (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. 
  • Allow attachment - Select this option if you want to allow users to attach files to the ticket. 
  • Enable search suggestions (ticket deflection) - As the user types in a subject for the ticket, suggested pages from your ProProfs site are instantly shown. 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. If you are interested in having topics from Zendesk, Desk, or Freshdesk also appear in the suggestions, please contact us. 

 

  • 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 Support 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 you click, it will open the support form.

 

  • Pop-Up - This option works best for external websites and web applications. Just copy the provided code and paste it into 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 into the source code of any page of your external website. 

 

© 2005 - 2024 ProProfs
-
add chat to your website