9min
Quickstart : Smart Search

﻿
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.interactive configurations should be set globally.
See : ﻿﻿Structure section for more detail on these components.
Quick SearchThe 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 -  klevu.interactive 
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">
        klevu.interactive(function () {
            var options = {
                url : {
                    landing : '/search-results',
                    protocol: 'https:',
                    search: 'https://eucs3v2.ksearchnet.com/cs/v2/search' // your search URL
                },
                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">
        klevu.interactive(function () {
            var options = {
                url : {
                    landing : '/search-results',
                    protocol: 'https:',
                    search: 'https://eucs3v2.ksearchnet.com/cs/v2/search' // your search URL
                },
                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 PageThe snippet above will direct the search to the relative URL /search-results as indicated using value assigned to klevu.interactive 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">
        klevu.interactive(function () {
            var options = {
                url : {
                    landing : '/search-results',
                    protocol: 'https:',
                    search: 'https://eucs3v2.ksearchnet.com/cs/v2/search' // your search URL
                },
                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">
        klevu.interactive(function () {
            var options = {
                url : {
                    landing : '/search-results',
                    protocol: 'https:',
                    search: 'https://eucs3v2.ksearchnet.com/cs/v2/search' // your search URL
                },
                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 DataThere are some small modifications you will need to make to klevu.interactive in order for use with your Klevu Index and/or your specific integration. 
Element
klevu.interactive 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﻿
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 03 Mar 2023
Did this page help you?
Yes
UP NEXT
Quickstart : Smart Category Merchandising
Docs powered by archbee
TABLE OF CONTENTS
Quick Search
Search Results Landing Page
Using Your Own Data
Element	klevu.interactive 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
Search API Key	search.apiKey	Your Public Klevu JS API Key
Analytics API Key	analytics.apiKey	Your Klevu Analytics API Key