Slang’s Web grocery assistant (aka SlangGroceryAssistant) is a fully trained voice assistant specialized for Web apps in the grocery domain. By integrating with this assistant, apps can help their users perform the following types of tasks through voice:

• Search for Products.
• Show order history.
• Show cart.
• checkout.

The following guide describes the steps that apps need to take in order to integrate with the assistant.

Step 1: Add the assistant to your project

Case 1: You're using npm.

Just install slang-grocery-assistant package from npm

npm install slang-grocery-assistant

or if you're using yarn:

yarn add slang-grocery-assistant

Then to bring slang into scope:

import SlangGroceryAssistant from "slang-grocery-assistant"

That's it.

Case 2: You're using script tags.

Include this in ALL the pages you want Slang Assistant to show up.

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slang-web-sdk@2/index-iife.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slang-grocery-assistant@1/index-iife.js"></script>

That's it.

Note: The ordering of the tags are important. The slang-web-sdk tag should come before slang-grocery-assistant tag. And likewise any code where you refer to SlangGroceryAssistant should come after both these tags.

Step 2: Add the assistant to your project

First define your actionListener

const groceryAssistantListener = {
  onGroceryItemSearch: (groceryItem) => {
    // groceryItem.name - the item the user searched for
    // search for grocery item here
  },
  onShowCart: () => {
    // show the cart
  },
  onOrderHistoryShow: () => {
    // show order history
  },
  onCheckout: () => {
    // take to checkout page
  }
};

All these functions can be async, in which case either return a promise or use async/await.

If you don't set any of these handlers, the assistant will consider the action to be unsupported and speak out the unsupported prompt if the user asks for those actions.

The action will also be considered unsupported if you set the handler and return the string UNSUPPORTED (in case of a promise, after the promise resolves).

Slang would consider the action to have failed and speak out the failure prompt in the following cases:

• the handler returned the boolean false.
• the handler threw an exception.
• the handler returned a promise that got rejected.

In all other cases slang would consider the action to have succeeded, and speak out the success prompt.

NOTE: Return values will only be honoured for SPAs. For multi page applications, unsupported prompt will be spoken only in case action handler is not set for a certain action.

Then initialize slang assistant

SlangGroceryAssistant.init({
  buddyId: "<buddy_id>", // you would have gotten it from the Slang team. Required.
  apiKey: "<api_key>", // you would have gotten it from the Slang team. Required.
  groceryAssistantListener: groceryAssistantListener, // this is the listener object you defined above. Required.
  environment: "prod", // use "stage" when in development mode. Defaults to stage if omitted.
  isSpa: false, // this is a boolean flag to indicate wether it's a single page application or not. Multipage applications
                // should set this as false. Defaults to false if omitted.
});