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 add Swiftype to your Support Portal is a customer service application that can include custom Support Centers. This tutorial will help you install your Swiftype search box in place of desk's default search through use of their Advanced Theme Editor.

What You'll Need

  • Knowledge of HTML/CSS.
  • Scripting enabled on your account ('s support team can do this for you).
  • Administrator access level or above (required to be able to make changes in the Advanced Theme Editor).

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 Web Crawler as our search engine type. Next you'll be able enter the URL of your support portal into the site validation field. Once the validation process completes, you'll be able to name your engine.

Create Search Engine

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

Step 3: Prepare your custom Web Theme within

While Swiftype is indexing your website, switch over to your Admin interface. Once here, you're able to create a new theme or edit a current one. Located in the Administrator panel under Channels → Support Center → Web Themes, you'll click on the gear icon at the right of the theme row. This will open an "Edit Web Theme" pop-up. Now click on the "Advanced Themes" link tab. Edit Theme

NOTE: Advanced mode allows you to make changes to the theme directly, but once you save your changes it will disable automatic updates.

There are 3 section templates that we'll be working with primarily:

  1. Header
  2. Layout
  3. Page (Index)

The Header section is where you'll add your custom CSS styles to match your overall theme. The Layout & Page (Index) sections are where we'll replace the default search form with our Swiftype embed snippet.

By locating the search_form_begin and search_form_end tags you'll find the default search snippets. You can either remove these sections all together or comment them out by enclosing with <!--    -->. Commenting this section of code will enable you to more easily revert any changes just in case you need to.

Examples of where these sections exist in the default Web Template can be found below:

Layout Section Theme Layout

Page (Index) Section Theme Page(Index)

Step 4: Copy the Installation Code

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

Install Snippet

Next, select your preferred install method and copy the embed script. You can find an overview of installation options here.

Step 5: Add the Embed Snippet to your Web Theme

Now it's time to paste your Swiftype code snippet into the prepared sections of your Web Theme. It's best to do so within the same code blocks as where you commented out the default snippets.

Once that's done, you can update your theme and you should see your Swiftype search bars in action!

You'll probably 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.

For even more refined targeting you may want to wrap your snippets in their own <div> tags. This will allow you to assign custom IDs or Classes to each instance of the search box.

Advanced Customization

Through's Advanced Theme Editor it's also possible to integrate many of Swiftype's key features.

By adding custom meta tags you can add custom fields and values to your indexed page documents. With this included data you can customize your embed script to filter and sort your results.

You can also use our content inclusion/exclusion features to curate the sections of article content that are indexed. This will enable you to prevent navagation, footer, and info elements within your help center template from being indexed.