NLX | Developers

Quick Start

Immersive Voice Mode

Full-screen voice interface for immersive conversations.


1<html lang="en">
2  <head>
3    <title>Touchpoint Sample HTML</title>
4    <meta name="viewport" content="width=device-width, initial-scale=1">
5  </head>
6  <body>
7    <script type="module">
8      import { create, React, html } from "https://unpkg.com/@nlxai/touchpoint-ui@1.1.3/lib/index.js?module";
9      
10      const touchpoint = await create({
11        config: {
12          applicationUrl: "YOUR_APPLICATION_URL",
13          headers: { "nlx-api-key": "YOUR_API_KEY" },
14          languageCode: "en-US",
15          userId: crypto.randomUUID(), // Required for voice
16        },
17        input: "voice", // Enable full voice mode
18      });
19      
20    </script>
21  </body>
22</html>

Compact Voice Mode (Voice Mini)

Floating module for voice without taking over the screen.


1<html lang="en">
2  <head>
3    <title>Touchpoint Sample HTML</title>
4    <meta name="viewport" content="width=device-width, initial-scale=1">
5  </head>
6  <body>
7    <script type="module">
8      import { create, React, html } from "https://unpkg.com/@nlxai/touchpoint-ui@1.1.3/lib/index.js?module";
9      
10      const touchpoint = await create({
11        config: {
12          applicationUrl: "YOUR_APPLICATION_URL",
13          headers: { "nlx-api-key": "YOUR_API_KEY" },
14          languageCode: "en-US",
15          userId: crypto.randomUUID(), // Required for voice
16        },
17        input: "voiceMini", // Enable compact voice mode
18      });
19      
20    </script>
21  </body>
22</html>

Voice Input Options

Mode	Description	Best For
`voice`	Full-screen voice interface with immersive experience	Primary voice interactions, voice-first applications
`voiceMini`	Compact floating module with minimal controls	Voice as a secondary input option, space-constrained layouts

Application and Touchpoint Prerequisites

All voice modes require:

Item	Description
`config.userId`	A unique identifier in your config (required for voice session management)
Voice-enabled Application	Your NLX application must be configured for voice on API channels
Browser support	WebRTC APIs must be available
User permissions	Microphone access must be granted when prompted

When to Use Immersive Voice mode

Use voice when:

Voice is the primary interaction method
You want an immersive, focused experience
Screen real estate isn't a concern
The conversation is the main user activity

When to use Voice Mini

Use voiceMini when:

You're using Voice+ in Bidirectional mode
Voice is an optional input method alongside other UI
You need to preserve screen space
Users need access to other page content during voice interaction
You want a less intrusive voice option