Library Reference
Configuration
10 min
specific configuration values used by klevu are kept as a snippet of code which looks something like the following var options = { url { search 'https //eucs3v2 ksearchnet com/cs/v2/search', landing '/search results', queryparam 'q' }, search { apikey 'klevu 123xxxxxxxxxxxxxx', searchboxselector 'input#klevu search', } analytics { apikey 'klevu 123xxxxxxxxxxxxxx' } }; klevu(options); settings settings available within options object object name field name description default value powerup quick quicksearch module true powerup landing landing page module true powerup catnav category page module true powerup recsmodule recommendations module true url search klevu apiv2 cloud search url endpoint required required url landing the url of the search results landing page (srlp) /search results url queryparam the query parameter appended to the srlp url q search apikey klevu js api key which will be used for search requests required required search infinitescrolloffset determines the pixel distance from bottom of the quicksearch (faceted layout display) to trigger the next result dataset 50 search infinitescrolloffsetlanding determines the pixel distance from bottom of the webpage to trigger the next result dataset determines the pixel distance of the page to trigger the next result dataset 50 search searchboxselector the id, class, or handle used to bind the search input field required required search searchboxtarget define a target for the results generation false search showquickonenter disable the enter/return key in the quick search false search sliderpricedelimiter set the delimiter between the currency symbol and the price for the price slider " " search fullpagelayoutenabled avoid focusout event false search minchars number of typed characters required 3 search placeholder placeholder text of the search box "" search personalisation control of personalisation false search redirects redirects for specific search term "term" "https //full url com" enter terms as lowercase {} recs apikey klevu js api key used for smart recommendations analytics apikey klevu js api key used for general analytics reporting required required global apikey klevu js api key used for all components optional theme quicksearch loaddefaultstyles stop klevu quicksearch template styles from loading true theme landing loaddefaultstyles stop klevu srlp template styles from loading true theme catnav loaddefaultstyles stop klevu category template styles from loading true theme settemplates specify one or more klevu templates to override read set template docid 6yvx9naw6ax68wygucob7 for more information theme modules resultinfinitescroll quicksearch enable set "true" to enable infinite scroll theme modules resultinfinitescroll searchresultspage enable set "true" to enable infinite scroll theme modules resultinfinitescroll categorypage enable set "true" to enable infinite scroll fetchsettings fallback set "true" to activate the fetch fallback to use fetch interface with url + headers this is useful native fetch function has been replaced dataprotection useconsent set "true" to activate data protection system this defines if consent should be checked site wide this is an opt in system false dataprotection consentstate the value of the consent state for the current user this value should be set based on whether the user has given consent to send data to klevu false useful configuration setting examples the above configuration settings can be passed directly into the main klevu function as an object as shown below code example klevu({ search { minchars 2, placeholder "ready to search?", redirects { "my cool blue" "https //mywebsite com/my cool blue product", "hot" "https //mywebsite com/sale" } } }); useful local storage settings key name key value default description klv limits productlist 12 by default the template js library makes 12, 24, and 36 options available, but this can be set to any number klv limits contentlist 12 by default the template js library makes 12, 24, and 36 options available, but this can be set to any number code example // this code waits for klevu js to load first window klvready= window klvready|| \[]; window klvready push(function(){ // we will set the items per page one time using a variable var itemsperpage = 24; // now we can use the variable to set both the product and content tab // items per page localstorage setitem('klv limits productlist', itemsperpage); localstorage setitem('klv limits contentlist', itemsperpage); }); useful data protection settings klevu's template js library uses an opt in consent system that controls whether the library can or cannot send user activity data to klevu this does not stop klevu services like search and recommendations from working, but rather it can block any user activity data from being sent to kelvu this data is what can power personalized user experiences and the main algorythm that powers all of klevu in other words, when you opt in to using the consent system, each user can consent or not consent to sending this activity data you can use any mechanism you would like to ask and track this consent, but you can use the following settings to tell the library that a user has given or not given consent code example klevu({ dataprotection { useconsent true, // enable the consent system for all users consentstate false, // user specific setting to opt in or out } }); because the consent system is opt in, it is not required to use these settings if you do want to use the consent system, then make sure useconsent is always set to "true" and for each user, set their consentstate to "true" or "false" most customer that use the consent system will set useconsent to "true" and consentstate to "false" until the user has specifically given consent then you can set consentstate to "true" for that user useful session storage settings for key names that include \[apikey] you would replace this with your account's apikey value here's an example sessionstorage setitem(`klv view klevu 14728819608184175 productlist`, 'grid'); key name key value default description klv view \[apikey] productlist grid available values are "grid" and "list" klv view \[apikey] contentlist list available values are "grid" and "list" code example // this code waits for klevu js to load first window klvready= window klvready|| \[]; window klvready push(function(){ // run this function when search and/or category pages load klevu beforeactivation('landing,catnav', function(data ,scope){ // set session storage value using a useful function to dynamically // retrieve your apikey sessionstorage setitem(`klv view ${klevu pagemeta getapikey()} productlist`, 'list'); }, 'build'); });