Getting Started
Quickstart : Smart Search

9min
﻿
There are three primary aspects required for any implementation
Core reference files
settings/configuration
page elements / markup
The required reference files and corresponding markup may vary depending on the page context. 
Note:  the Klevu configurations should be set globally.
See : Structure﻿ section for more detail on these components.
Quick Search
The following code is the minimum required to get a quick search, or auto-suggestions overlay, to appear. 
This code sample contains:
JS Library core reference -  klevu.js
Quick Search Theme Layout reference - quick-search.js 
Configuration JavaScript -  options variable
Searchbox HTML target - <input> 
These elements are generally placed on a global template for use throughout the entire website.
Copy (or adapt) this to a webpage and as soon as you click on the search box you should see some results appearing.
HTML
|
<!DOCTYPE html>
<html>
<head>
    <!-- Include JS Library -->
    <script src="https://js.klevu.com/core/v2/klevu.js"></script>

    <!-- Include Quick Search Theme -->
    <script src="https://js.klevu.com/theme/default/v2/quick-search.js"></script>

    <!-- Configure Klevu for your store -->
    <script type="text/javascript">
       var options = {
         url : {
            landing : '/search-results',
                protocol: 'https:',
                search: 'https://eucs3v2.ksearchnet.com/cs/v2/search' // your Klevu APIv2 Search URL + endpoint path
            },
            search: {
                minChars: 0,
                searchBoxSelector: "#my-search", // your search input selector
                apiKey: "klevu-14728819608184175" // your Klevu JS API Key
            },
            analytics: {
                apiKey: 'klevu-14728819608184175' // your Klevu JS API Key
            }
        };
        klevu(options);
    </script>
</head>
<body>
<!-- The ID of the input matches 'searchBoxSelector' above -->
<form action="#">
    <input id="my-search" name="q" type="text">
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <!-- Include JS Library -->
    <script src="https://js.klevu.com/core/v2/klevu.js"></script>

    <!-- Include Quick Search Theme -->
    <script src="https://js.klevu.com/theme/default/v2/quick-search.js"></script>

    <!-- Configure Klevu for your store -->
    <script type="text/javascript">
       var options = {
         url : {
            landing : '/search-results',
                protocol: 'https:',
                search: 'https://eucs3v2.ksearchnet.com/cs/v2/search' // your Klevu APIv2 Search URL + endpoint path
            },
            search: {
                minChars: 0,
                searchBoxSelector: "#my-search", // your search input selector
                apiKey: "klevu-14728819608184175" // your Klevu JS API Key
            },
            analytics: {
                apiKey: 'klevu-14728819608184175' // your Klevu JS API Key
            }
        };
        klevu(options);
    </script>
</head>
<body>
<!-- The ID of the input matches 'searchBoxSelector' above -->
<form action="#">
    <input id="my-search" name="q" type="text">
</form>
</body>
</html>
﻿
﻿
Search Results Landing Page
The snippet above will direct the search to the relative URL /search-results as indicated using value assigned to options.url.landing 
The following Search Results Landing Page code sample will build on the previous by including 2 additional elements:
SRLP Theme Layout reference - search-results-page.js 
Search Result HTML target/placeholder - <div>
The following code is for the  /search-results webpage that now contains all the required elements.
HTML
|
<!DOCTYPE html>
<html>
<head>
    <!-- Include JS Library -->
    <script src="https://js.klevu.com/core/v2/klevu.js"></script>

    <!-- Include Quick Search Theme -->
    <script src="https://js.klevu.com/theme/default/v2/quick-search.js"></script>

    <!-- Include Search Results Theme -->
    <script src="https://js.klevu.com/theme/default/v2/search-results-page.js"></script>

    <!-- Configure Klevu for your store -->
    <script type="text/javascript">
      var options = {
          url : {
              landing : '/search-results',
              protocol: 'https:',
              search: 'https://eucs3v2.ksearchnet.com/cs/v2/search' // your Klevu APIv2 Search URL + endpoint path
          },
          search: {
              minChars: 0,
              searchBoxSelector: "#my-search", // your search input selector
              apiKey: "klevu-14728819608184175" // your Klevu JS API Key
          },
          analytics: {
              apiKey: 'klevu-14728819608184175' // your Klevu JS API Key
          }
      };
      klevu(options);
  </script>
</head>
<body>
<!-- The ID of the input matches 'searchBoxSelector' above -->
<form action="#">
    <input id="my-search" name="q" type="text">
</form>
    <!-- Add a placeholder where the search results will be injected -->
    <div class="klevuLanding"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <!-- Include JS Library -->
    <script src="https://js.klevu.com/core/v2/klevu.js"></script>

    <!-- Include Quick Search Theme -->
    <script src="https://js.klevu.com/theme/default/v2/quick-search.js"></script>

    <!-- Include Search Results Theme -->
    <script src="https://js.klevu.com/theme/default/v2/search-results-page.js"></script>

    <!-- Configure Klevu for your store -->
    <script type="text/javascript">
      var options = {
          url : {
              landing : '/search-results',
              protocol: 'https:',
              search: 'https://eucs3v2.ksearchnet.com/cs/v2/search' // your Klevu APIv2 Search URL + endpoint path
          },
          search: {
              minChars: 0,
              searchBoxSelector: "#my-search", // your search input selector
              apiKey: "klevu-14728819608184175" // your Klevu JS API Key
          },
          analytics: {
              apiKey: 'klevu-14728819608184175' // your Klevu JS API Key
          }
      };
      klevu(options);
  </script>
</head>
<body>
<!-- The ID of the input matches 'searchBoxSelector' above -->
<form action="#">
    <input id="my-search" name="q" type="text">
</form>
    <!-- Add a placeholder where the search results will be injected -->
    <div class="klevuLanding"></div>
</body>
</html>
﻿
﻿
Note: The index credentials used in this guide are specific for the Klevu Demo Store catalog. 

You are welcome to use the demo catalog for experiments and learning. Please adapt to your specific catalog as soon as possible to benefit from any specific modifications you will need for the success of your implementation.
﻿
Using Your Own Data
There are some small modifications you will need to make to the Klevu configuration within the options JavaScript variable in our examples in order for use with your Klevu Index and/or your specific integration. 
Element
Configuration Options
Description
Landing Page Path
url.landing
The url path to send customers to access the full search results
Search Box Selector
search.searchBoxSelector
The class or ID or handle used to locate the input search box(es)
Search Query Paramter
url.queryParam
The name of the search <input> to be used as the query parameter in the SRLP URL 
Search URL
url.search
Your Klevu Cloud Search URL + endpoint path
Search API Key
search.apiKey
Your Public Klevu JS API Key﻿
Analytics API Key
analytics.apiKey
Your Klevu Analytics API Key﻿
You can find your specific API Key and Endpoint information from ﻿Shop Info within your Klevu Merchant Center
See: Configuration﻿  for more details.
Updated 08 Aug 2023
Did this page help you?
Introduction
Quickstart : Smart Category Merchandising
Docs powered by
Archbee
TABLE OF CONTENTS
Quick Search
Search Results Landing Page
Using Your Own Data
Element	Configuration Options	Description
Landing Page Path	url.landing	The url path to send customers to access the full search results
Search Box Selector	search.searchBoxSelector	The class or ID or handle used to locate the input search box(es)
Search Query Paramter	url.queryParam	The name of the search <input> to be used as the query parameter in the SRLP URL
Search URL	url.search	Your Klevu Cloud Search URL + endpoint path
Search API Key	search.apiKey	Your Public Klevu JS API Key
Analytics API Key	analytics.apiKey	Your Klevu Analytics API Key