<html><head></head><body>
<style>
.w3-btn,.w3-button{border:none;display:inline-block;outline:0;padding:12px 20px;vertical-align:middle;overflow:hidden;text-decoration:none;color:inherit;background-color:inherit;text-align:center;cursor:pointer;white-space:nowrap}
.w3-btn:hover{box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}
.w3-btn,.w3-button{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none} 
.w3-disabled,.w3-btn:disabled,.w3-button:disabled{cursor:not-allowed;opacity:0.3}.w3-disabled *,:disabled *{pointer-events:none}
.w3-btn.w3-disabled:hover,.w3-btn:disabled:hover{box-shadow:none}
.w3-black,.w3-hover-black:hover{color:#fff!important;background-color:#00BFB3!important}
</style><h2>You need a powerful search backend + a well-designed UI</h2>Depending on the purpose and scale of your website, search can be a critical feature that enables your users to quickly find the information they need. Elasticsearch makes it significantly easier to architect a search engine that delivers relevant results, but building your search backend is only part of the work of implementing a search experience. Without an intuitive search interface, your users may not get the full value of your search engine.
<h3>What we&#x2019;ve learned as search providers</h3>Elastic Site Search (formerly Swiftype Site Search)&#xA0;provides search as a service to completely handle the backend of your search engine, and&#xA0;we also help you build&#xA0;well-designed search UIs. Site Search is built upon the&#xA0;Elastic Stack&#xA0;which has enabled us to support over 10,000 production search engines and serve over 5 billion queries a month. It&#x2019;s safe to say that we&#x2019;ve learned a thing or two about search over the years as we&#x2019;ve helped small and large companies like Lyft, AT&amp;T, Twilio, Asana, and Samsung provide top-notch search experiences. If you&#x2019;d like to learn more about Swiftype&#x2019;s architecture and use of the Elastic Stack, <a href="https://www.elastic.co/webinars/swiftype-technical-journey-with-elasticsearch">check out this webinar</a>.
In our experience helping these organizations and many others with search, we&#x2019;ve been able to see what works well when it comes to search UIs and apply those learnings to both our out-of-the-box search interface&#xA0;as well as our jQuery libraries that we support for creating fully custom UIs. While building a great search interface can take some effort, we&#x2019;ve consistently seen companies reap the rewards of implementing well-designed search UIs which include revenue growth and better user engagement.
<h2>Step 1 &#x2014; Create an Elastic Site Search account&#xA0;and index your data into Swiftype</h2>You can sign up by starting a <a href="https://info.elastic.co/site-search-trial.html?ultron=site-search&amp;elektra=blog">free 14 day trial</a>.&#xA0;During set-up, Site Search will ask you to input your web domain. Your domain will be crawled and your documents will be indexed.
<h2>Step 2 &#x2014; Customize your search results</h2>Elastic Site Search enables you to customize search results on a query-by-query basis (result ranking), adjust the weights placed on your data types (weights), and create synonym groups through a dashboard (synonyms). For full programmatic control of your search engine&#x2019;s relevancy, you can leverage the <a href="https://swiftype.com/documentation/site-search/overview">Swiftype API</a>.
<img src="https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt033e9a419a6d00a3/5c583b9f4651cff70b650fcd/Screen-Shot-2017-12-06-at-1.12.03-PM.png" data-sys-asset-uid="blt033e9a419a6d00a3" alt="Screen-Shot-2017-12-06-at-1.12.03-PM.png"> 

<h2>Step 3 &#x2014; Implement your search bar</h2>How you preform step 3 is determined by whether you used the crawler or API to index your data.
How to implement your search bar if you indexed your data with the crawler:
If you used the Swiftype crawler to index your data, then you can copy the code given to in your&#xA0;dashboard and paste it onto your web pages where you want a search bar to appear. As noted in your&#xA0;dashboard, if you already have a search bar on your website, you will need to add the class &#x2018;st-default-search-input&#x2019; to that input field.
<img src="https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/bltf9cb3a883eec8f31/5c583b9916a7de000c2b359f/install-swiftype.png" data-sys-asset-uid="bltf9cb3a883eec8f31" alt="install-swiftype.png">
Since you&#x2019;ll likely want your search UI to match the design of the rest of your website, Elastic Site Search makes it easy to customize the appearance of your search bar and results container. To customize your search installation, simply click the &#x201C;Edit Install Setup&#x201D; or &#x201C;Edit Appearance&#x201D; cards under the &#x201C;Customize Your Installation&#x201D; portion of the&#xA0;onboarding flow. You can also access the customization features by clicking the &#x201C;Install Search&#x201D; tab on the dark blue side bar. 
<img src="https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/bltb4e562e950a4543e/5c583b94a209c1ca0be9df32/edit-apperance-two.gif" data-sys-asset-uid="bltb4e562e950a4543e" alt="edit-apperance-two.gif">
As you experiment with the look and feel of your search, you can preview your changes in the&#xA0;dashboard (before pushing your changes live).&#xA0;&#xA0;Note that you can also customize your&#xA0;search bar installation through CSS directly on your web page. Here&#x2019;s a <a href="https://swiftype.com/documentation/tutorials/custom_styles">tutorial</a> that introduces you to customizing&#xA0;visual styles with CSS.
How to implement your search bar if you indexed your data with the API:
<div class="redactor-box" role="application">When you use the Swiftype API, the standard embed install code for implementing search on your website is not available because it doesn&#x2019;t work with custom Document Types. Therefore, you&#x2019;ll need to implement your search UI using the Swiftype <a href="https://github.com/swiftype/swiftype-search-jquery">search</a> and/or <a href="https://github.com/swiftype/swiftype-autocomplete-jquery">autocomplete</a> libraries which are written to be flexible based on your specific use-case. While implementing your search bar with these libraries gives you more control over the look and functionality of your UI, they also require a greater understanding of HTML, CSS, and Javascript.
</div>Let&#x2019;s walk through implementing your search UI using the autocomplete&#xA0;library.
Step 1 &#x2014; Add the Swiftype library code to your codebase. Note that you need to add a Javascript and CSS file (unless you want to write all of your own CSS).
Step 2 &#x2014; Include the following code in the header of your web pages where you want your search bar to appear. Note that you need to include a reference to the latest version of jQuery.
<pre class="prettyprint"> &lt;script type=&quot;text/javascript&quot; src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js&quot;&gt;
 &lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;jquery.swiftype.autocomplete.js&quot;&lt;/script&gt;
&lt;link type=&quot;text/css&quot; href=&quot;autocomplete.css&quot; media=&quot;all&quot; /&gt;
</pre>Step 3 &#x2014; Add a search input field to your website. If you already have a search input, then add the id &#x2018;st-search-input&#x2019; as the input&#x2019;s id. Your code would look something like this:
<pre class="prettyprint">&lt;input type=&apos;text&apos; id=&apos;st-search-input&apos; placeholder=&apos;Search&apos; style=&quot;width: 300px;&quot;/&gt;
</pre>Step 4 &#x2014; Include a Javascript snippet on pages where you want your Swiftype search engine to work. Keep in mind you will have to use your own Swiftype engine key which you can find on the right side of on the &#x201C;Overview&#x201D; tab of the Swiftype Dashboard.
<pre class="prettyprint">&lt;script&gt;
$(&apos;#st-search-input&apos;).swiftype({
 engineKey: &apos;your_engine_key&apos;
});
&lt;/script&gt;
</pre>Step 5 &#x2014; Optional: Customize your search queries and how your results are displayed. For example, you can specify a result limit for search queries and explicitly list the fields you want returned for each document type.
Specify a result limit:
<pre class="prettyprint">&lt;script&gt;
$(&apos;#st-search-input&apos;).swiftype({;
 engineKey: &apos;your_engine_key&apos;,
 resultLimit: 20
});
&lt;/script&gt;
</pre>Fetching only the fields you specify:
<pre class="prettyprint">&lt;script&gt;
$(&apos;#st-search-input&apos;).swiftype({
 fetchFields: {&apos;books&apos;: [&apos;title&apos;,&apos;genre&apos;,&apos;published_on&apos;]},
 engineKey: &apos;your_engine_key&apos;
 });
&lt;/script&gt;
</pre>For more information on customizing your search UI with the Swiftype jQuery libraries, see this <a href="https://swiftype.com/documentation/tutorials/jquery">tutorial</a>.
<h2>In Review: Getting your search UI to production</h2>How is your search implementation going? Hopefully, you were able to get up and running with Elastic Site Search&#xA0;and implement a beautiful search bar on your website. If you&#x2019;re struggling to get your search bar set up, feel free to reach out at support@elastic.co. Happy building!
</body></html>

search-ui-elastic-blog-larg-2.jpg

search-ui-elastic-blog-small-img-2.jpg

How to Build a Site Search UI

Start free trial

Blog Footer CTA

Sign up for Elastic Cloud free trial

Blog Footer

Sam Reid

Can't make it? Register and we'll send you the recording. You'll also receive an email with related content

Can't make it? Register and we'll send you the recording. You'll also receive an email with related content.

You'll also receive an email with related content.

You'll also receive an email with related content

Load More

By submitting you acknowledge that you've read and agree to our <a href="/legal/elastic-cloud-account-terms" target="_blank">Terms of Service</a>, and that Elastic may <a href="/legal/privacy-statement#how-we-use-the-information" target="_blank">contact you</a> about our related products and services, using the details you provide above. See <a href="/legal/privacy-statement/" target="_blank">Elastic’s Privacy Statement</a> for more details or to opt-out at any time.

Newsletter GDPR Text

Speakers

Close

See more insights

The content on this page is not available in the selected language. As Elastic grows globally, we continue to support content in multiple languages.

Elasticsearch Platform

ELK Stack

Elastic Cloud

Observability

Security

Search

By industry

By solution

Customer spotlight

Developers

Connect

Learn

Help

See what's happening at Elastic

Author

Articles by Sam Reid

How to Build a Site Search UI

Follow us

About us

Join us

Press

Partners

Trust & Security

Investor relations

EXCELLENCE AWARDS