search mobile facets autocomplete spellcheck crawler rankings weights synonyms analytics engage api customize documentation install setup technology content domains user history info home business cart chart contact email activate analyticsalt analytics autocomplete cart contact content crawling custom documentation domains email engage faceted history info install mobile person querybuilder search setup spellcheck synonyms weights engage_search_term engage_related_content engage_next_results engage_personalized_results engage_recent_results success add arrow-down arrow-left arrow-right arrow-up caret-down caret-left caret-right caret-up check close content conversions-small conversions details edit grid help small-info error live magento minus move photo pin plus preview refresh search settings small-home stat subtract text trash unpin wordpress x alert case_deflection advanced-permissions keyword-detection predictive-ai sso

How to Reduce Zendesk Support Tickets with Swiftype

Zendesk is a customer service application that can include custom Help Centers. This tutorial will go over tips for integrating Swiftype into your Help Center ticket forms.

If you would like to learn how to replace Zendesk's default search with Swiftype search, you can follow our tutorial, How to add Swiftype to your Zendesk Help Center.

Integrating Swiftype into your support request forms can reduce the number of requests and help your customers find what they are looking for quicker.

In order to complete this tutorial you should have:

  • A Swiftype search engine containing your Help Center pages
  • A Zendesk Help Center and access to ticket forms
  • Experience working with HTML/CSS and jQuery

Swiftype jQuery Autocomplete

We have two jQuery plugins that help create custom Swiftype integrations, one for autocomplete and one for search. This tutorial will be using our autocomplete library.

Open your Theme Editor

Zendesk has a theme editor available when logged into your Help Center. A Help Center theme is broken down into a several HTML templates, global CSS and JavaScript files, and an assets category.

Theme Editor

Add the jQuery Autocomplete library

Before you can start implementing Swiftype, you need to add the jQuery autocomplete file to your Help Center assets. After the file is uploaded, you will see the file path below the file name. Copy this path. You will use it for the YOUR_PATH_HERE below.

Link to the jQuery Autocomplete library

To start using the asset you have to add it to the Head template of your Help Center. Open up the template and add the following:

<script type="text/javascript" src="YOUR_PATH_HERE"></script>

Find the Subject input DOM id

Next, you will need to locate the input DOM id of your subject box. The autocomplete plugin connects to a specific input by knowing the unique DOM id or class. You can use Chrome's DevTools to inspect the subject field from your ticket.

Inspect Element

In our example, the subject field has the id request_subject.

Locate your engine key

The last thing you need before installing Swiftype is your Swiftype engine key. This can be found in your Swiftype dashboard. Once logged in, select your engine, and on the righthand side you will see you engine key listed. You will use it for the 'YOUR_ENGINE_KEY' below.

Configure the Swiftype jQuery autocomplete plugin

You can now configure the subject input field to use Swiftype. In the JS file of your Help Center template add the following code:

    engineKey: "YOUR_ENGINE_KEY"

Style using CSS

Your Zendesk Suggested Articles may still appear. Before you begin styling, you can hide Zendesk's default Suggested Articles by adding the following CSS:

  .suggestion-list {
    display: none;

Now you have Swiftype's suggestions populating from the subject line, but they have no CSS. Most likely, you will want to add some custom CSS. Here is an example of some CSS to get your started:

.autocomplete {
  background: #fff;
  border: 1px solid rgba(0,0,0,.3);
  box-shadow: 0 3px 6px rgba(0,0,0,.15);
  margin-top: 4px;
  overflow: hidden;

.autocomplete li {
  padding: 8px 10px;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;

.autocomplete li:hover {
  background: #fafafa;
  color: #444;

.autocomplete .title {
  margin: 0;


You now have a basic ticket form deflection implemented. Final Product

Advanced Implementations (optional)

You can now take this implementation a step further and customize it to better fit your needs.

Some ideas for further customizations include:

Customize your autocomplete configuration with our tutorial

  • Limit the number of results displayed to the user.

  • Show different information in the results using a customRenderFunction.

Use the jQuery search plugin to show more articles when a user submits the form

  • Before submitting the form, you could add a modal window that shows additional relevant articles using our jQuery search plugin.

Add CSS to brand it with your colors and design

  • Build out the CSS we provided and have it match the look and feel of your Help Center theme.