loading Loading...
add chat to your website

Zendesk 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 your Zendesk. You can even add this form to your external websites or apps.

The following topics are covered on this page:


Activate the integration

Step 1. Go to ProProfs Knowledgebase settings and click on Forms.

 

 

Step 2.  Add your credentials and click on next. 

  1. Username - Enter your Zendesk username such as james@abc.com. This can be any valid Zendesk username.
  2. Subdomain - Enter your Zendesk account URL such as company.zendesk.com.

 

  • API Key - Enter your API key. This can be found by:
    • 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 Token Access checkbox. In token access section you will find your API token key. Copy the API token. 

Create the Support Form

After you enter in your credentials and click next, ProProfs will connect to Zendesk and read all the ticket fields you are 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 to also select the model name and number of your product. Learn how to add ticket fields in Zendesk

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 Zendesk. You can leave as is or rename (this will not affect Zendesk). 
  • Type - The field type as provided by Zendesk (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 form 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.

Customize the Support Form

Form Settings

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, 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. If you are interested in having topics from Zendesk 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 Settings

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.
‚Äč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 - 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.


 

  • Popup - 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.