An important part of any great website experience is a powerful search box, as anyone who’s struggled to find something on a site knows. As the owner of a personal website, I want to make sure my site isn’t causing any search-related headaches. But as a non-technical person with a lot on my plate, I don’t have time for complicated solutions that are over my head and require technical expertise or coding 
I still needed a top-notch search box, though. Not the generic kind that come with most site builders, but the kind that gives me full control over both the appearance (frontend) and result tuning (backend). I wanted search that looked great and always returned the best results. So the question was: Would my limited technical knowledge be enough to set up a robust and powerful search box on a website?
Yes, yes it would.
If you want to install a search box on your website, but you don’t have the time or expertise for complicated solutions, <a href="https://www.elastic.co/site-search">Elastic Site Search</a> is perfect for you. I’ll show you step by step (and screenshot by screenshot) how I set up Elastic Site Search, customized the settings for my search results to my heart’s content, and added functional search to my website with ease.
For more experienced folks, this might not be the right blog for you. If you care about things like <a href="https://swiftype.com/documentation/site-search/guides/crawler-optimization">crawler optimization</a>, <a href="https://swiftype.com/documentation/site-search/guides/schema-design">search engine schema design</a>, and <a href="https://swiftype.com/documentation/site-search/guides/analytics">search analytics</a>, Elastic Site Search is a perfect solution, but this blog won’t be getting into advanced stuff like that. Our <a href="https://swiftype.com/documentation/site-search/site_search">documentation</a> does, though, so hop over there and explore.&nbsp;&nbsp;
 <h3>Note to WordPress users</h3>Before reading any further, if you use WordPress for your website, stop reading this blog, and starting reading our <a href="https://www.elastic.co/blog/elastic-site-search-wordpress-search-plugin">Site Search WordPress Plugin</a> blog. The WP plugin we offer makes implementing Site Search even easier.&nbsp;
 <h2>1.&nbsp;Ladies and gentlemen, start your (search) engines</h2>To create a better website search experience, <a href="http://info.elastic.co/site-search-trial-v9.html?baymax=web&elektra=simple-site-search-blog">start by signing up for free 14-day trial of Elastic Site Search.</a>&nbsp;
<img src="https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/bltb86e88255465c847/5da760a50ef9ac6378485a73/site-search-trial-signup-form.jpg" data-sys-asset-uid="bltb86e88255465c847" alt="" style="width: 370px; display: block; margin: auto;">
After that, you’ll be able to create an Engine. An Engine is what powers your website’s search box. Just specify the URL to your website, and Site Search will take take care of the heavy lifting.
<img src="https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt2200acce34be13d1/5da760f38854f368b9b0be3e/site-search-create-an-engine.png" data-sys-asset-uid="blt2200acce34be13d1" alt="" style="width: 450px; display: block; margin: auto;">
You’ll then name your Engine and pick a language. For general usage, you can just pick Universal. But if you’d like language-specific search optimization, <a href="https://swiftype.com/documentation/site-search/crawler-configuration/language-optimization">choose the language</a> that best suits your site and its visitors.
<img src="https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt0da147d065f53fd1/5da7615809df4c686a4ad408/site-search-name-engine.png" data-sys-asset-uid="blt0da147d065f53fd1" alt="" style="width: 478px; display: block; margin: auto;">
After clicking Create Engine, Elastic Site Search launches a crawler that looks through all the pages on the website and&nbsp; saves them into the Engine as documents (packets of info about a page). Each document contains key details about each page, like title, author, body, images, timestamps, and more. It’s easy to monitor the progress by watching this screen in the Overview tab on my dashboard, or clicking on the Engine name in the top left.
<img src="https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt8b6c683d15bc5529/5da761a6da02b165ecb5cebc/site-search-check-engine-status.png" data-sys-asset-uid="blt8b6c683d15bc5529" alt="" style="width: 293px; display: block; margin: auto;">
Boom!
Site Search just crawled 54 documents, which are mostly my blog posts.&nbsp;
Now, just to make sure it’s working, I can preview the results from within the Site Search dashboard. I have a popular blog post about my opinions on The Lego Movie so let’s see what happens if I search “lego”...&nbsp;
<img src="https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/bltae07b27ee10a84ff/5da762de1a18ec672d9bc8f2/site-search-search-preview.png" data-sys-asset-uid="bltae07b27ee10a84ff" alt="" style="display: block; margin: auto;">
There it is! It even highlighted my search term in the result. This is already looking fancy.
Now, I just need to get this search bar onto my site and customize my results.
 <h2>2.&nbsp;Adding a search box to your site</h2>Now that the search engine is created, it’s time to put the search box on the site. To do this, navigate to Install Search on the left side of the navigation.&nbsp;
Simply copy the script (highlighted in light blue) and place it between the <code>&lt;body&gt;</code> tags on every page that you want to a search box on. I know you see code! But don’t panic, all you have to do is copy and paste it! You don’t have to make a single edit to it.
<img src="https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt9076b8477dad5f21/5da763678854f368b9b0be5a/site-search-javascript-code-snippet.png" data-sys-asset-uid="blt9076b8477dad5f21" alt="" style="width: 450px; display: block; margin: auto;">
And voila!! We’re all connected!&nbsp;
 <h2>3.&nbsp;Adding the search box</h2>Whether you want to add a new search box to a website, or reuse an existing widget,&nbsp;
Elastic Site Search makes it easy.
 <h3>Reusing an existing search box</h3>My site already had a generic search box on it, so all I needed to do was add this small snippet to the code I already had on my site for my search box.&nbsp;
<img src="https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt2f95de6e37ad94ca/5da764203c3a9367e61d4bf4/site-search-add-search-field.png" data-sys-asset-uid="blt2f95de6e37ad94ca" alt="" style="width: 550px; display: block; margin: auto;">
Tada!
 <h3>Adding a new search box (with no technical skills required)</h3>So that’s all nice and fun if you’ve already got a search box on your site, but what if you don’t?
Not to worry! Elastic Site Search has you covered.&nbsp;
Under configuration, go to the Search Field section and select “My site needs a search input field” and then select “Use the Site Search search tab.
<img src="https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt6780f3c9f1535ef4/5da7644e228709693c82ec0b/site-search-use-site-search-tab.jpg" data-sys-asset-uid="blt6780f3c9f1535ef4" alt="" style="width: 540px; display: block; margin: auto;">
And once I save and activate my configuration, Site Search will automatically add a search box to the bottom of&nbsp;your site.
<img src="https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blte1f779a6bd6816d2/5da738c1e5aefb63f5caafd3/site-search-intro-blog-banner.jpg" data-sys-asset-uid="blte1f779a6bd6816d2" alt="site-search-intro-blog-banner.jpg"> 
Look at that! Search is now available on a once searchless website. And like I said, no technical skills required.
 <h2>4.&nbsp;Styling and customizing your search box</h2>Now time to customize the way the search form and results to look the way you want.
 <h3>What fields show up when people search?&nbsp;</h3>You can show timestamp, category, excerpts, body text, author, or whatever fields you want. I’ve decided to just show the title in the Primary Line and a category and snippet of the body in the second line.
<img src="https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blte93f8a22a94afd8c/5da764ca0e045e6904a2948b/site-search-customize-appearance.jpg" data-sys-asset-uid="blte93f8a22a94afd8c" alt="" style="width: 480px; display: block; margin: auto;">
<h3>What’s the color scheme?&nbsp;</h3>No more wonky, off-brand colors on my website! Now everything fits the color palette I’ve already created for my site.
<img src="https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt68d4e01adb7bb295/5da7650e228709693c82ec17/site-search-adjust-color-scheme.png" data-sys-asset-uid="blt68d4e01adb7bb295" alt="" style="width: 571px; display: block; margin: auto;">
Now just preview everything within the app to make sure it’s just the way it should be before pushing it live on the site.
 <h2>5.&nbsp;Customizing Search Results On My Website</h2>Thankfully the customization doesn’t end there…&nbsp;My website search bar looks great, but I want to make sure my site visitors find exactly what they’re looking for when they type in it.
I started with <a href="https://swiftype.com/documentation/site-search/guides/result-rankings">Results Ranking</a>, a setting you can access on the left toolbar in your Elastic Site Search dashboard. This lets you preview what comes up for any given term, and you can drag and drop to reorder results so that the right items show up first. Yet again, no coding required!
<img src="https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt9edfa6f7c0f0600e/5da91227f4abc069074f2d30/site-search-preview-search-results.jpg" data-sys-asset-uid="blt9edfa6f7c0f0600e" width="600" alt="" style="display: block; margin: auto;"> 
If I want to make certain fields more important than others (page title &gt; body), I can do so under the <a href="https://swiftype.com/documentation/site-search/guides/weights">Weights</a> settings. It’s easy to adjust a certain field to carry more weight (ie. importance) in a search than other fields — making them a higher priority. You can also add other fields for the engine to look at, or take away fields.
Lastly, I created custom <a href="https://swiftype.com/documentation/site-search/guides/synonyms">Synonyms</a>. I have a popular blog post about remote work, but people might come to my site and search for “distributed work” or “work from home” while looking for that post. It’s easy to clarify Synonyms so that my search engine knows two words or phrases are the same.
<img src="https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt2fefda08a6b55a12/5da7658c7f54cc6990818321/site-search-add-synonymns.png" data-sys-asset-uid="blt2fefda08a6b55a12" alt="" style="width: 430px; display: block; margin: auto;">
<h2>Tada! Search Is Live</h2>And that’s it! Now I have a search bar all set up on my website.
<img src="https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/bltc9f6a95eeb27a5a6/5da7660dda02b165ecb5cee2/site-search-search-bar-on-my-website.jpg" data-sys-asset-uid="bltc9f6a95eeb27a5a6" alt="" style="width: 700px; display: block; margin: auto;">
Phew! I did it. And you can, too, without needing too much technical knowledge. which is a great relief if you’re like me and not very technical but need to create a great search experience on your website. Ready to give it a try yourself? <a href="http://info.elastic.co/site-search-trial-v9.html?baymax=web&elektra=simple-site-search-blog">Start a trial</a> and follow along with me as you set up your site just like I did mine.&nbsp;

site-search-intro-blog-banner.jpg

site-search-intro-blog-thumb.jpg

How I added a search bar to my website in 20 minutes with Elastic Site Search

Start free trial

Blog Footer CTA

Sign up for Elastic Cloud free trial

headshot-brittany-joiner-300x300.jpg

Software Engineer I

Brittany Joiner

Register to Attend

Register to Watch

Надсилаючи цю форму ви погоджуєтеся з <a href="/legal/terms-of-use">Умовами надання послуг Elastic</a>. Ваші особисті дані будуть опрацьовані відповідно з <a href="/legal/privacy-statement">Положеннями про конфіденційність Elastic</a>.

Newsletter GDPR Text - Ukrainian

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

Communication Preferences - ONLY for /communication-preferences

By submitting you agree to <a href="/agreements/global/cloud-services-monthly" rel="nofollow">Elastic Cloud Terms of Service</a>. Your personal data will be processed in accordance with <a href="/legal/privacy-statement">Elastic's Privacy Statement</a>.

Cloud Trial GDPR Text

Intentionally Blank

By submitting you acknowledge that you've read and agree to our <a href="/legal/serverless-preview-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.

Serverless GDPR Text

提交即表示您確認已詳閱並同意我們的<a href="/legal/elastic-cloud-account-terms" target="_blank">服務條款</a>，且同意 Elastic 使用您在上方提供的個人資料<a href="/legal/privacy-statement#how-we-use-the-information" target="_blank">與您聯絡</a>，為您提供相關產品和服務的資訊。如需詳細說明或隨時想停止收到產品和服務資訊，請參閱 <a href="/legal/privacy-statement/" target="_blank">Elastic 的隱私聲明</a>。

Newsletter GDPR Text - TW

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.By submitting this form, I agree to Elastic sharing my contact information with Google Cloud. I also agree to Elastic giving my information to the vendor for the purpose of shipping my food package.

GDPR Text + Google Cloud

Inviando la registrazione (1) esprimi il consenso ai <a href="/legal/terms-of-use">termini e condizioni di Elastic</a> e <a href="/legal/privacy-statement">all’informativa sulla privacy</a>, nonché (2) a ricevere saltuarie e-mail.

Newsletter GDPR Text - Italian

By submitting you acknowledge that you've read and agree to our <a href="/legal/terms-of-use" 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

Load more

Overview

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

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.

Author

Articles by Brittany Joiner

Software Engineer I, Elastic

How I added a search bar to my website in 20 minutes with Elastic Site Search