---
title: Introduction
slug: template-js
docTags:
createdAt: 2022-06-02T12:48:27.000Z
---
## Overview
Klevu's Template JS (often referred to as JSv2/JS Library) offers a quick and efficient solution for implementing a Search Query and Result display interface.
The UI is based on a proprietary JavaScript engine that injects all necessary markup and functionality onto a given webpage.
Through a few lines of reference code, Klevu Search can be incorporated by an effort no greater than Cut, Paste, and Configure.
Once this foundation is in place, all elements can be modified as needed to meet specific business or display requirements. Including all HTML for structure, JavaScript for custom functionality, and of course, any CSS for styling.
The UI is based on a proprietary JavaScript engine that injects all necessary markup and functionality onto a given webpage. Its design will not conflict with other JavaScript frameworks (JQuery, etc), but rather the elements are exposed to work together with these frameworks if needed.
The Klevu Template JS facilitates the Search, Result, and Analytics communication to Klevu. Catalog Indexing can be handled via the API, XML, Feed or one of our platform specific applications.
::Image[]{src="https://api.archbee.com/api/optimize/816_4eGYZQxALlijMlcBN/fv8vQgXFjnN7BblH6Bkbs_image.png" size="80" width="1219" height="541" position="center" darkWidth="800" darkHeight="355" showCaption="false"}
## Search Query API
Search Query communication with the corresponding Klevu Index is handled via [Klevu API](https://docs.klevu.com/apis).
The Template JS is responsible for "finding and binding" to the targeted Search \ field(s) on the webpage. The Search \ fields, corresponding Index id, and API Endpoint are defined within the core configuration options of the Template JS. See: [Configuration](docId\:eL9qchgzNERsiaeg_E-Lu) for more details.
The search phrase is picked up from the corresponding \ by this listener and sent to Klevu using Klevus Search API JSON structure.
The corresponding response of relevant matching data is returned in JSON format and used to render display on the page.
## JS Library
Template JS is based on a core JavaScript Library and accompanying "Theme" resources.
**klevu.js** - The Template JS core functions
**quick-search.js** - The default 'Theme' quick search modal display markup, stylings, and supporting functions
**search-results-page.js** - The default 'Theme' search results landing page display markup, stylings, and supporting functions
**category-page.js** - The default 'Theme' category landing page display markup, stylings, and supporting functions
**klevu-recs.js** - Core JS supporting configured Recommendations banners
See: [Structure](docId\:pUmT_E7JdsEaf0Pa2FM8F) for more details
## HTML Templates
The JSON object of a search response is captured within the Template JS core functions and used to render display on the page.
The display layout and styling (or 'Theme') consists of individual scripted HTML micro-templates. Each micro-template is assigned a space in the result display skeleton. Templates can be included into other templates, reused in loops, etc.
All the markup within the templates are assigned class attribute values to facilitate listening events as well as styling via corresponding CSS
See: [Structure](docId\:pUmT_E7JdsEaf0Pa2FM8F) for more details
## Analytics API
**Analytics is extremely important in Klevu Search**. It is **required** for all integrations and should not be considered an optional element.
It is one of the key drivers behind Klevu Machine Learning; tracking customer searches and clicks to feed into our AI for relevant search results based on real customer interactions.
- Searched terms
- Products clicked
- Orders placed
Note: If you are using the Klevu plugin for Magento, Shopify or BigCommerce, the **orders placed tracking** aspect of analytics likely already taken care of for you via a server-side implementation.
See: [Structure](docId\:pUmT_E7JdsEaf0Pa2FM8F) for more details