Swiftype Search

Swiftype is a tool that helps you add search to your websites. If you have created Contentstack-powered websites, you can add search to your website by integrating Swiftype with Contentstack. This document will guide you through the process of implementing search using Swiftype for your website.

Prerequisites

In order to get started, you'll need the following:

A website powered by Contentstack (deployed online)
A Swiftype account

Steps to set up search

Installing search on your site involves making certain changes in your stack (in Contentstack) and modifying your site’s HTML code.

Changes in your content types in Contentstack

Add SEO fields to content types

In your Contentstack account, add SEO fields to all the webpage-type content types within your stack. The SEO field should be a Global field that should contain the following fields:

Title (Field Type: Single line Text Box)
Description (Field Type: Multiline Text Box)

You can optionally categorize pages and add meta tags to your pages by using the tags field in your entries. Once you do this, you will need to define title, description, and tags in the <head> element of your website’s HTML code. Read the subsequent steps for more details.

Changes in your website code

Define meta details in your site HTML

You need to define the title, description and tags in the <head> element of your website’s HTML file. Here’s an example snippet:

<head>
   <title>{{entry.title}}</title>
   <meta class="swiftype" name="title" data-type="string" content="{{entry.title}}" />
   <meta class="swiftype" name="description" data-type="text" content="{{entry.description}}" />
   <meta class="swiftype" name="tags" data-type="string" content="{{entry.tags[0]}}" />
   <meta class="swiftype" name="tags" data-type="string" content="{{entry.tags[1]}}" />
</head>

Note: This example is considering Nunjucks as template engine and content type entry object passed to the template.

Defining body content in HTML file

The body text of your website pages should be structured in the manner that Swiftype understand easily. One of the best ways is to enter body text by using body-embedded Data Attribute tags as shown below:

<body>
  <header data-swiftype-index='false'>
    Header content...
  </header>
  <h1 data-swiftype-type="string">page heading here</h1>
  <div  data-swiftype-index='false' class="right-or-left-nav">
    Nav bar menus...
  </div>
  <div data-swiftype-index='true' data-swiftype-name="body" data-swiftype-type="text">
    Lots of body content goes here...
    Other content goes here too, and can be of any type, like a price:
  </div>
  <footer data-swiftype-index='false'>
    Footer content...
  </footer>
</body>

If you want to exclude some content from the section (for example, navigation menu), you can use the data-swiftype-index='false' attribute as mentioned in example above. Read more about content inclusion and exclusion here.

Generate sitemap
Having a sitemap makes searching content easier. The Swiftype crawler can crawl through your web pages and the content quickly with the help of a sitemap. It is therefore recommended that you create a sitemap for your website, if you don’t have one.

Install search on website

In Swiftype, create a new engine and provide the URL of the site that you want to index. Swiftype will then start crawling your website content. Learn more about setting up a new engine here.

Once the setup is complete, you will get the search installation code in the Interface > Install Search section in your Swiftype dashboard. Use this code in every page of you website if you want to install Swiftype’s default search.

However, if you want custom search functions and interface, you can use the Swiftype jquery plugin. This plugin lets you use advanced customization options such as adding filters and changing HTML structure of autocomplete.

To use this plugin, include the following in the header of your webpage:

latest version of jQuery
hashchange jQuery plugin (version included)
Swiftype Search jQuery plugin
Swiftype Search stylesheet (optional)
Swiftype jQuery plugin
Swiftype Autocomplete stylesheet (optional)

Note: You can find following files here:
- https://github.com/swiftype/swiftype-autocomplete-jquery
- https://github.com/swiftype/swiftype-search-jquery

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script type='text/javascript' src='jquery.ba-hashchange.min.js'></script>
<script type="text/javascript" src="jquery.swiftype.search.js"></script>
<link type="text/css" rel="stylesheet" href="search.css" media="all" />
<script type="text/javascript" src="jquery.swiftype.autocomplete.js"></script>
<link type="text/css" rel="stylesheet" href="autocomplete.css" media="all" />

Sample code for initializing autocomplete search box and search box on search page:

  /**
   Swiftype Initialization for search page search box and rendering
   **/
   $("#st-search-page-input").swiftypeSearch({
       engineKey: 'YOUR_ENGINE_KEY',
       renderFunction: customRenderFunctionResultPage,
       fetchFields: {page: ['title','body','url']},
       resultContainingElement: "#st-results-container",
       filters: readFilters,
       highlightFields: readHighLightedFileds
   });

var readHighLightedFileds = function() { 
    return {'page': {'body': {'fallback': true}}}; 
}

var customRenderFunction = function(document_type, item) { 
    var out = '<a href="' + item['url'] + '" class="st-search-result-link">' + item['title'] + '</a>'; 
    return out.concat('<p class="genre">' + item['highlight']['body'] + '</p>'); 
};

   /**
   Swiftype Initialization for autocomplete search box in header
   **/
   $('#st-search-input').swiftype({
       engineKey: 'YOUR_ENGINE_KEY',
       fetchFields: { page: ['title','url']}
   });

Additional Resource: You can integrate your Contentstack-powered website with other search platforms such as Lucidworks, Algolia, and Elasticsearch whichever suits your requirement.