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
Swiftype Documentation / tutorials: Using Swiftype with Zendesk

How to add Swiftype to your Zendesk Help Center is a customer service application that can include custom Help Centers. This tutorial will help you install your Swiftype search box in place of Zendesk's default search through use of their design customization tools.

What You'll Need

Step 1: Create a Swiftype Account

You can create a Swiftype account for free, and you will use this account to control your search engine once it is installed.

Step 2: Create a Search Engine

To create your search engine, from the main Swiftype dashboard click the Create Search Engine button in the upper right corner.

Create Search Engine

From here we'll select Standard Web Crawler as our search engine creation method. Next you'll be able enter the URL of your Zendesk support portal into the site validation field. Once the validation process completes, you will be able to name your engine.

Crawl Your Help Center

Now, our system will crawl your site and create the search engine in real-time, showing you our progress along the way.

Step 3: Customize the Web Theme of your Zendesk Help Center

  • While Swiftype is indexing your website, switch over to your Zendesk Help Center and select Customize design from within the tools panel.

  • Click on the Edit Theme link in the sidebar. This will open up the Theme editor. Here you are able to edit the HTML, CSS and JS by clicking on the top nav.

Customize Design Edit Theme

  • On this page you'll see a dropdown menu in the upper left corner of the editor will allow you to access all the templates for your Help Center content.

In this example we'll be adding Swiftype search to our Help Center's Homepage. If not viewing it already, select Home page from the content selector within the Theme editor. Once there, get ready to identify and either (i) comment out or (ii) completely replace the default search form with our Swiftype embed snippet.

  • Identify the default Zendesk search function by locating the {{search}} tags. Here you will find the default search snippets. You can either remove these sections all together or comment them out by wrapping them with a <!--    --> container. Commenting this section of code will enable you to more easily revert any changes just in case you need to.

An example of this modification to the Help Center theme can be found below:

Zendesk Theme Editor

Zendesk Theme Editor

Step 4: Copy the Installation Code

After preparing the custom theme template, your search engine should be ready for installation. Head back to your Swiftype dashboard and click the Install button.

Install Snippet

From this tab, select the Overlay install method and then save the configuration. Next, click the Swiftype Install Code link in the left side column, and then copy the embed script from the modal pop-up window.

Step 5: Add the Embed Snippet to your Web Theme

Now it's time to paste your Swiftype code snippet into the prepared section(s) of your custom theme. It's best to do so within the same code blocks we modified in Step 3.

If your theme is also in need of a new search input field, we can provide that as well!

To get your search input code:

  1. Return to your engine's Install tab in the Swiftype dashboard.

  2. Select the My website needs a search field option. This will reveal the code snippet you need to add to your theme to include a search box.

  3. Copy the code snippet and paste it into your Custom Zendesk Theme.

Once you've completed the previous steps, save and publish your theme edits and you should see your Swiftype search box in action!


  • If you paste the Install Code snippet into the Document head of your custom Zendesk theme, it will be included throughout your Help Center. But if you only want it to appear on select page templates, include the script with each unique instance.

  • You may notice that the default styling of the Swiftype search widget stands out a bit like a sore thumb. But have no fear! You can customize the look and feel of your Swiftype search box with the assistance of our Style Guide.