Guide
Smart Recommendations
Configurations
2 min
if you haven't gone through the prerequisites and the v2 structure, please have a look at overview docid\ czeodl0skcuv 18ipuplr merchants can create and manage multiple klevu recommendation banners via our kmc (klevu merchant centre) the configuration via kmc includes the page type, the banner type and even the template to render the banner our recommended approach to display these banners created via the kmc is to use our html div integration https //support klevu com/knowledgebase/integration steps for recommendations/ approach, which includes handling of api calls and banner rendering out of the box you can also retrieve the kmc banner configuration via an api call and process it however you like this api call uses a simple get request with no payload, and since it is intended for use on the frontend there is no authentication required tab examples url https config cdn ksearchnet com recommendations klevu 158755634955912036 settings 3a5580bf c5b2 407e acac 4a58ae730b64 name get recommendation configuration method get request pathparameters kind optional name base path type string description a static base url to retrieve klevu recommendation configuration from https config cdn ksearchnet com kind optional name js api key type string description your public klevu js api key kind optional name recs id type string description the unique id of your recommendation banner which you can find within the kmc n queryparameters name pid kind optional type string description the unique identifier of the record within klevu children name gpid kind optional type string description the identifier used to group compound products together eg the id of the parent in the case of a configurable product children name cp kind optional type string description this is the complete hierarchy of the category being visited for example jewellery;rings;stackable rings please note the use of a semicolon as the separator between a parent and a child category children name sids kind optional type string description the segmentids segmentinfo segments if using recommendation segmentation children headerparameters bodydataparameters formdataparameters results languages id hlez8xh v9giiezwdwmha code n metadata n title recently viewed by you n recskey 3a5580bf c5b2 407e acac 4a58ae730b64 n pagetype home n logic recently viewed n maxproducts 5 n productthreshold 1 n enabled true n n search n basepath eucs19v2 ksearchnet com cs v2 search n payload recordqueries id klevurecsitemlist typeofrequest search settings typeofrecords klevu product limit 5 n n templates n base var metadata data metadata; var logic metadata logic ? metadata logic ; var pagetype metadata pagetype ? metadata pagetype ; var recskey metadata recskey ? metadata recskey ; var title metadata title ? metadata title ; div class kurecscontainer data logic logic data recskey recskey data page type pagetype var recommendationitemlist klevu getobjectpath data query klevurecsitemlist result ; if recommendationitemlist recommendationitemlist length div class kurecsheader h3 class kurecstitle title klevu dom helpers escapehtml title title h3 div div class kurecswrap div class kurecsresults div class kurecsresultsinner helper each recommendationitemlist function key item div class kurecs itemwrap kurecsitem data id item id div class kurecs item div class kurecs itemimg a title klevu dom helpers escapehtml item name href item url data id item id class kurecsitemclick kurecsimg img src item image origin item image alt klevu dom helpers escapehtml item name onerror klevu dom helpers cleanupproductimage this class prodimg width 100 a div div class kurecs itemdesc a title klevu dom helpers escapehtml item name href item url data id item id class kurecsitemclick kurecstitle item name hghfghfghfghgfhfghfg a div class kurecs itemprice if item ondiscount item ondiscount true if item saleprice div class kusaleprice kuspecialprice helper processcurrency item currency parsefloat item saleprice div if item price div class kuorigprice helper translate original price s helper processcurrency item currency parsefloat item price div else if item saleprice div class kusaleprice helper processcurrency item currency parsefloat item saleprice div div div div class kurecsitembottom button data id item id data qty 1 data url item url class kurecsaddtocartbtn add to cart button div div div div div div div n n styles n base kurecscontainer position relative; margin 15px 0px; kurecscontainer kurecsheader kurecstitle display block; font size 18px; font weight bold; margin 20px 0px; overflow hidden; white space nowrap; text overflow ellipsis; kurecscontainer kurecswrap max width 100 ; position relative; padding 0px; box sizing border box; font family inherit; overflow hidden; kurecscontainer kurecswrap outline none; kurecscontainer kurecsresults width 100 ; max width 100 ; overflow auto; kurecscontainer kurecsresultsinner transition ms transform 0 5s ease 0s webkit transform 0 5s ease 0s transform 0 5s ease 0s; position relative; white space nowrap; transition all 0 5s ease; kurecscontainer kurecsresultsinner kurecs itemwrap display inline block; margin 12px; margin left 0px; vertical align top; width 180px; border 1px solid efefef; border radius 2px; kurecscontainer kurecsresultsinner kurecs item margin 0 auto; padding 12px; background fff; kurecscontainer kurecsresultsinner kurecs itemimg display flex; justify content center; align items center; flex direction column; width 100 ; height 210px; kurecscontainer kurecsresultsinner a kurecsimg img max width 100 ; height auto; width auto; display inline block; margin 0 auto; kurecscontainer kurecsresultsinner a kurecstitle font size 16px; font weight bold; text decoration none; overflow hidden; white space nowrap; text overflow ellipsis; display block; color 000; kurecscontainer kurecsresultsinner kurecs itemdesc margin top 12px; box sizing border box; overflow hidden; white space nowrap; text overflow ellipse; kurecscontainer kurecsresultsinner kurecs itemtag color rgba 0 0 0 0 5 ; line height 110 ; margin bottom 5px; min height 20px; kurecscontainer kurecsresultsinner kurecs itemsku color rgba 0 0 0 0 5 ; font size 80 ; line height 110 ; margin bottom 5px; kurecscontainer kurecsresultsinner kurecs itemprice font size 12px; color 545454; margin bottom 4px; margin top 4px; kurecscontainer kurecsresultsinner kurecs itemprice kusaleprice overflow hidden; white space nowrap; text overflow ellipsis; kurecscontainer kurecsresultsinner kurecsaddtocartbtn border 0px; width 100 ; padding 6px; cursor pointer; margin top 8px; background ececec; color 000; border radius 2px; kurecscontainer kurecsresultsinner kurecsaddtocartbtn hover background 333333; color ececec; n n scripts n recsobject null n n language 200 customlabel selectedlanguageid hlez8xh v9giiezwdwmha examples languages id adc91fzyimm5goj6umadw code ?php n n curl curl init ; n ncurl setopt array curl array n curlopt url https config cdn ksearchnet com recommendations klevu 158755634955912036 settings 3a5580bf c5b2 407e acac 4a58ae730b64 n curlopt returntransfer true n curlopt encoding n curlopt maxredirs 10 n curlopt timeout 0 n curlopt followlocation true n curlopt http version curl http version 1 1 n curlopt customrequest get n ; n n response curl exec curl ; n ncurl close curl ; necho response; n language php customlabel id ekpwzsrwql1wilbus ulj code var data ; n nvar xhr new xmlhttprequest ; nxhr withcredentials false; n nxhr addeventlistener readystatechange function n if this readystate 4 n console log this responsetext ; n n ; n nxhr open get https config cdn ksearchnet com recommendations klevu 158755634955912036 settings 3a5580bf c5b2 407e acac 4a58ae730b64 ; n nxhr send data ; language javascript customlabel id wvs1y glp99 dnvmhvhn code okhttpclient client new okhttpclient newbuilder n build ; nrequest request new request builder n url https config cdn ksearchnet com recommendations klevu 158755634955912036 settings 3a5580bf c5b2 407e acac 4a58ae730b64 n method get null n build ; nresponse response client newcall request execute ; language java customlabel id vantufjc8fb1i6avfp ev code var request require request ; nvar options n method get n url https config cdn ksearchnet com recommendations klevu 158755634955912036 settings 3a5580bf c5b2 407e acac 4a58ae730b64 n headers n n ; nrequest options function error response n if error throw new error error ; n console log response body ; n ; n language nodejs customlabel id xv6ofmpd0klxxrb8laqpi language none code customlabel selectedlanguageid ekpwzsrwql1wilbus ulj description the end point is used for retrieving the recommendation template configuration set in klevu dashboard currentnewparameter label query parameter value queryparameters understanding the response parameters description metadata title the title of the recommendation banner, eg "our newest arrivals!" metadata recskey the unique identifier of the banner this will match the value of recs id in the request, eg 3a5580bf c5b2 407e acac 4a58ae730b64 metadata pagetype the page type this banner should be displayed on this will be one of home homepage category collection or category listing page product product detail page checkout the cart or checkout metadata logic the type of recommendation banner which was configured in the kmc this will be one of trending trending personalized newest arrivals recently viewed hand picked other also viewed similar bought together metadata maxproducts the maximum number of products to show within this banner metadata productthreshold the minimum number of results before this banner will be displayed metadata enabled whether or not this particular banner is enabled search basepath the search url to be used to send the recommendation request to, eg eucs19v2 ksearchnet com/cs/v2/search search payload this correlates to the recordqueries section of the api call to be fired for this recommendation templates base the html to be used for rendering the recommendation banner, in klevu javascript library markup styles base the css that is used for rendering the recommendation banner, in klevu's template js library markup scripts recsobject the javascript that is executed after the rendering of the html recommendation banner, in klevu's template js library markup note regarding the response templates base , styles base , and scripts recsobject returned in the configuration api response should not be used w hen using the api directly since they require the klevu's template js library