Usage

The Voice+ client is initiated with dynamic params and hard-coded parameters.

Hard-Coded params

Hard-coded params should be simply copied and pasted from the NLX console. They are:

• workspaceId: the ID of the Dialog Studio workspace.
• scriptId: the ID of the Voice+ script inside the workspace.
• apiKey: the API key generated on the script.

Dynamic Params

Dynamic params should be set based on the user's context. They are

• conversationId: should be passed to your Voice+ client upon initialization (via, for instance, a URL param)
• languageCode: should be set based on the user's language. If you don't support internationalization you can hard-code this to the language you support.

Examples

Here are some examples for different usages:

A simple HTML example

The conversationID and the languageCode must be set dynamically.

In this example,

• the conversationId comes from a URL search param (CID, e.g. http://example.com?cid=123).
• the languageCode comes from the browser's language settings. (navigator.language)

Note: When using this approach, pass conversationId in the URL as a search param when navigating to new pages. For an alternative, see the next example.

1<script defer src="https://unpkg.com/@nlxai/voice-plus-core/lib/index.umd.js"></script>
2<script>
3  const contentLoaded = () => {
4    if (document.readyState === "loading") {
5      return new Promise((resolve) => {
6        window.addEventListener("DOMContentLoaded", () => {
7          resolve();
8        });
9      });
10    } else {
11      return Promise.resolve();
12    }
13  };
14
15  contentLoaded().then(() => {
16    const client = nlxai.voicePlusCore.create({
17      // hard-coded params
18      apiKey: "REPLACE_WITH_API_KEY",
19      workspaceId: "REPLACE_WITH_WORKSPACE_ID",
20      scriptId: "REPLACE_WITH_SCRIPT_ID",
21      // dynamic params
22      conversationId: new URLSearchParams(window.location.search).get("cid"),
23      languageCode: navigator.language,
24    });
25    
26    client.sendStep("REPLACE_WITH_STEP_ID");
27  });
28</script>