Web Quick Start

Before you start

You need to have the following software installed on your system:

• npm or yarn

Step 0: Setup

First off, open your Web app in your favorite IDE and prepare for Slang integration. For the remainder of this guide, we'll assume that the app is called MyAwesomeApplication.

Step 1: Add Slang library dependency

Depending on your package management system, you can follow the steps under the appropriate tab below to add a dependency to Slang's web SDK.

npm

$ npm install slang-web-sdk

import Slang from "slang-web-sdk";

yarn

$ yarn add slang-web-sdk

import Slang from "slang-web-sdk";

html

<script type="text/javascript" src="https://slang-public.s3.ap-south-1.amazonaws.com/index-iife.js" />

This should bring slang into the scope of your application, and you can refer to it.

Step 2: Gather credentials from Slang Console

If you haven't already configured your app's use cases in the Slang Console, please head to console.slanglabs.in and follow the steps in the Building Your First Buddy guide.

Once you've built a buddy corresponding to your app's use-cases, gather the API key and Buddy ID and have them handy for integration. For details on how to obtain these credentials from the Console, see here.

Step 3: Initialize Slang

Once you have Slang in scope of your application, by following either of the above two methods, you have to initialize Slang, which will add a mic button as an overlay to every page.

Slang.initialize({
    buddyId: '<BUDDY_ID>', // get it from the Slang console
    apiKey: '<API_KEY>',   // get if from the Slang console
    env: "stage", // one of ['stage','prod']
    locale: "en-IN", // one of ['en-IN','hi-IN']
    onSuccess: () => {
        console.log("Slang initialized successfully"); // anything you want to do once slang gets init successfully
    },
    onFailure: () => {
        console.log("Slang Failed to initialize");  // anything you want to do once slang fails to init
    }
});

With these code changes, when the app is run, Slang will be initialized Trigger will be automatically inserted on each page as it's created. Users of the app will now be able to click on this trigger to initiate the voice experience and start talking. But, by default, no action will occur after the user finishes speaking. In order for actions to occur, we need to write action handlers.

Step 4: Write action handlers

As users talk, Slang attempts to understand what they're saying and take appropriate action. Every utterance of each user that is understood by Slang will result in an "Intent" being recognized and the appropriate action for the Intent being called.

To understand the details behind Intents, please see the section on Intents in Buddy Building Tips.

In your app, you can write action handlers that specify what actions need to be performed when Intents are recognized by Slang.

const intentHandler = (intent) => {
    switch (intent.name) {
        case "show_balance":
            showBalance()
            return true
        default:
            return false
    }
};

You can than connect this action handler with Slang using

Slang.setIntentActionHandler(intentHandler);

Step 4a: The "action" method

The "action" method of your intent handler will be called every time an "Intent" is detected by Slang. This is where you can trigger functionality that exists in your app that corresponds to the detected intent/use-case. The logic can be as simple as updating a UI component in the page

const intentHandler = intent => {
    switch (intent.name) {
        case "add_task":
            const taskToAdd = intent.getEntity("task").value.trim().toLowerCase();
            this.addTask(taskToAdd);
            return true;
        case "delete_task":
            // ...
            return true;
    }
}

addTask = singletask => {
    if (!singletask) {
        this.setState(() => ({ selectedTask: "Please enter a task!" }));
        return "task_field_is_empty";
    } else if (this.state.tasks.indexOf(singletask) > -1) {
        this.setState(() => ({ selectedTask: "This task already exists!" }));
        return "task_already_exists";
    } else {
        this.setState(prevState => ({ tasks: [...prevState.tasks, singletask] }));
        return "success";
    }
};

Step 5: Run the app

Congratulations! That's all there is to integrating Slang with your app. Now, when you run your app, the trigger should appear automatically. Clicking on it and speaking an utterance configured for an app's use-case should perform the appropriate action.

Digging Deeper

While we've looked at a quick and easy way to get started with integrating Slang into your app, Slang provides many more features and options to control the overall voice experience for your app. To learn more about these features, options and APIs, please head to the Web Deep Dive section.