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 IntegrationBelow 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>
<!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
Quickstart : Smart Recommendations
Shopify
Docs powered by archbee
TABLE OF CONTENTS
Basic Integration