website logo
Product FeedCommunity Forum
API Docs
Template JS
Headless SDK
Navigate through spaces
⌘K
Introduction
Getting Started
Quickstart : Smart Search
Quickstart : Smart Category Merchandising
Quickstart : Smart Recommendations
Quickstart : Moi
Apps/Plug-ins
Guide
Structure
Configuration
JS Library
Versioning
Template Reference
Build UI
Set Custom Template
Modify Search Request
Modify Search Response
Custom Overrides
Recommendations Webhooks
Styling CSS
Analytics/Tracking
How To
Add Filters To URL
Add Pagination To URL
Add-To-Cart Function
Customer Groups
Infinite Scroll Results
Magento B2B MSI
Ratings / Reviews
Recs Fallback Query
SortBy Options
Docs powered by archbee 

Quickstart : Moi

5min

Moi is currently in a beta testing phase. To participate in the beta program, please sign up here.

Klevu Moi uses a JS Library to enable the frontend experience. If you haven't installed the ready Klevu JS template, please integrate using one of the supported apps or extensions below:

  • Shopify - Integration Guide
  • Magento - Integration Guide
  • BigCommerce - Integration Guide
  • Other Platforms (Feed/APIs) - Integration Guide

Basic Integration

Below we have highlighted the generic skeleton which will work on any platform. Please ensure these elements are included within the <head/> of every page of your website where you wish to show Moi.

Moi currently works on Mobile devices only, remember to access or switch to mobile view when testing the integration.

Any customers already using Klevu JavaScript Library (aka JSv2) may already have the klevu.js library included, in this case, you can simply declare klevu_moi object as "enabled"=true and activate moi as a part of klevu.interactive.

HTML
|
<!DOCTYPE html>
<html>
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Responsive HTML Page with Search Box</title>
    
    <!-- Include JS core 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 kuAPI = "klevu-1234";
    		//enabling Klevu
    		var klevu_moi = {
    		  "enabled" : true
    		 };
    
            klevu.interactive(function () {
                var options = {
                    url : {
                        landing : '/search-results',
                        protocol: 'https:',
                        search: 'https://{{your-cloud-search-domain}}/cs/v2/search' // your Klevu APIv2 Search URL + endpoint path
                    },
                    search: {
                        minChars: 0,
                        searchBoxSelector: "#my-search",
                        apiKey: kuAPI
                    },
                    analytics: {
    					apiKey: kuAPI
    				},
                    moi : {
                        active: true,
                        apiKey: kuAPI
                    }
                };
                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>




Updated 09 May 2023
Did this page help you?
Yes
No
PREVIOUS
Quickstart : Smart Recommendations
NEXT
Shopify
Docs powered by archbee 
TABLE OF CONTENTS
Basic Integration