Recommendation UI - quick start

Build your recommendation UI in simple steps:

  1. Obtain your API key from Miso dashboard
  2. Add Miso SDK to your webpage
  3. Place Miso elements in your webpage
  4. Start the recommendation workflow

1. Obtain your API key

  1. Log in Miso dashboard.
  2. Select your enrivonment (e.g. Production).
  3. You can find your publishable API key in the Overview section.

2. Add Miso SDK to your webpage

As a node module

In your project directory, run:

npm install --save @miso.ai/client-sdk

Then you can import MisoClient from the SDK:

import MisoClient from '@miso.ai/client-sdk';

// work with MisoClient

Using a script tag

Add the SDK script tag to your webpage:

<head>
  <script async src="https://cdn.jsdelivr.net/npm/@miso.ai/client-sdk@1.9.10/dist/umd/miso.min.js"></script>
</head>
  • You can put the script tag anywhere in the document.

MisoClient is available on window object. However, it won't be available until the SDK is loaded. The SDK provides a way to access it regardless of the loading status:

const misocmd = window.misocmd || (window.misocmd = []);
misocmd.push(() => {
  const MisoClient = window.MisoClient;
  // work with MisoClient
});

3. Place Miso elements in your webpage

In your webpage, add the following elements where you want to display the recommendation results:

<miso-recommendation>
  <miso-products></miso-products>
</miso-recommendation>

4a. Start the recommendation workflow (user to products)

// 1. create a Miso client instance and access the recommendation workflow
const client = new MisoClient(`${apiKey}`);
const workflow = client.ui.recommendation;

// 2. start the workflow
workflow.start();

4b. Start the recommendation workflow (product to products)

// 1. create a Miso client instance and access the recommendation workflow
const client = new MisoClient(`${apiKey}`);
const workflow = client.ui.recommendation;

// 2. Set API to product_to_products and specify the product ID to get recommendations for
workflow.useApi('product_to_products', { product_id: `${productId}` });

// 3. start the workflow
workflow.start();