Overview

Quick Start

Enable immersive voice mode.

Custom Components

Server-driven UI components in voice.

Quick Start

Immersive Voice Mode

Full-screen voice interface for immersive conversations.

const touchpoint = await create({
  config: {
    applicationUrl: "YOUR_APPLICATION_URL",
    headers: { "nlx-api-key": "YOUR_API_KEY" },
    languageCode: "en-US",
  },
  input: "voice", // Enable full voice mode
});

Voice Input Option

Mode	Description	Best For
voice	Full-screen voice interface with immersive experience	Primary voice interactions, voice-first applications

Application and Touchpoint Prerequisites

All voice modes require:

Item	Description
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

How it works

• The UI requests microphone permission using navigator.mediaDevices.getUserMedia({ audio: true }).

• Touchpoint streams request data over the room’s data channel, enabling low-latency interactions.

• Speaking state is tracked for both user and agent to drive mic/voice ripples.

Controls and behavior

• Mic can be toggled directly in the voice UI.

• Speaker volume is controlled in the header when using full-screen voice.

• Closing the voice UI ends the call and resets the conversation; reopening creates a fresh session.

Server-driven UI (Custom Modalities)

Your NLX application can send modality payloads that render rich UI components during a voice session. Map payload keys to components via customModalities. Components receive { data, conversationHandler } so they can read values and send actions.

See: Custom Components

When to Use Immersive Voice mode

Voice Mode Animation

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