--- title: "[Integrations] - Swiftype Search" description: Integrate Swiftype Search with Contentstack-powered websites to implement site search. url: https://www.contentstack.com/docs/developers/integrations/swiftype-search product: Contentstack doc_type: integration-guide audience: - developers version: unknown last_updated: 2026-03-25 --- # [Integrations] - Swiftype Search This page explains how to integrate Swiftype Search with Contentstack-powered websites to add search functionality. It is intended for developers implementing site search and should be used when configuring content types and website markup to support Swiftype crawling and indexing. **Note: **This page is no longer maintained, and the underlying code may be outdated or unsupported. It may be removed in a future release. To learn how to use the [Search & Discovery](/docs/developers/automation-hub-connectors#search-discovery) connectors, refer to the [Connectors](/docs/developers/automation-hub-connectors) documentation. 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](https://swiftype.com/users/sign_up) ## 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](https://app.contentstack.com/), add SEO [fields](/docs/developers/create-content-types/about-fields) to all the webpage-type content types within your [stack](/docs/developers/set-up-stack/about-stack). The SEO field should be a [**Global field**](/docs/developers/global-field/about-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 `` 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 element of your website’s HTML file. Here’s an example snippet: ``` {{entry.title}} ``` **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: ``` Header content... # page heading here Nav bar menus... Lots of body content goes here... Other content goes here too, and can be of any type, like a price: Footer content... ``` 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](https://swiftype.com/documentation/site-search/content_inclusion_exclusion). - #### 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](https://swiftype.com/documentation/site-search/crawler_quick_start). 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](https://github.com/swiftype/swiftype-search-jquery#customization-tutorial) 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-autocomplete-jquery) - [https://github.com/swiftype/swiftype-search-jquery](https://github.com/swiftype/swiftype-search-jquery) ``` - ``` 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 = '' + item['title'] + ''; return out.concat('' + item['highlight']['body'] + ' '); }; /** 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](/docs/developers/how-to-guides/add-lucidworks-search-to-contentstack-powered-websites), [Algolia](/docs/developers/how-to-guides/add-algolia-search-to-contentstack-powered-websites-using-aws-lambda), and [Elasticsearch](/docs/developers/how-to-guides/add-elasticsearch-to-contentstack-powered-websites) whichever suits your requirement. ## Common questions ### Is this Swiftype Search integration documentation still maintained? No. **Note: **This page is no longer maintained, and the underlying code may be outdated or unsupported. It may be removed in a future release. ### What do I need before setting up Swiftype Search? You need: - A website powered by Contentstack (deployed online) - A [Swiftype account](https://swiftype.com/users/sign_up) ### How can I prevent parts of a page from being indexed by Swiftype? You can use the `data-swiftype-index='false'` attribute to exclude content (for example, navigation menu). ### Are there alternative search platforms mentioned? Yes: [Lucidworks](/docs/developers/how-to-guides/add-lucidworks-search-to-contentstack-powered-websites), [Algolia](/docs/developers/how-to-guides/add-algolia-search-to-contentstack-powered-websites-using-aws-lambda), and [Elasticsearch](/docs/developers/how-to-guides/add-elasticsearch-to-contentstack-powered-websites).