Customizing Chat

What Touchpoint Chat can do

Use Touchpoint Chat to embed a branded chat that connects to your NLX flows.

Highlights:

How it works with NLX

Keep in mind:

  • Config: applicationUrl + nlx-api-key (Configuration)

  • Flows/choices: Define in NLX; trigger with sendFlow / sendChoice

  • Slots: Names must match NLX slot configuration

  • Context: Declare context variables in NLX to use them in flows

  • Modalities: data shape follows NLX modality schema

  • Init: Default welcome; customize via initializeConversation or sendWelcomeFlow (Custom Launch)

Quick setup

See the full Configuration Reference for details.

Core API at a glance

create(options) returns a Touchpoint instance with conversationHandler and UI controls. Options include required connection info (applicationUrl, nlx-api-key, languageCode), UI settings (chat mode, bubbles, size, icons), theming, and advanced hooks (custom modalities, initializeConversation, initialContext). See: Configuration Reference

Component building blocks

Use provided primitives to compose rich experiences (and inside custom modalities):

Minimal setup example

import { create } from "@nlxai/touchpoint-ui";

const APP_URL = "https://your-bot.studio.nlx.ai/...";
const API_KEY = "YOUR_API_KEY";
const LANGUAGE_CODE = "en-US";

const options = {
  config: {
    applicationUrl: APP_URL,
    headers: { "nlx-api-key": API_KEY },
    languageCode: LANGUAGE_CODE,
  },
  chatMode: true,
  userMessageBubble: true,
  agentMessageBubble: true,
};

const touchpoint = await create(options);
// Access the ConversationHandler
const { conversationHandler } = touchpoint;

Custom component (modality) example

Works with JSX or no‑build HTML template (nlxai.touchpointUi.html). Components receive { data, conversationHandler }.

import { create, html } from "@nlxai/touchpoint-ui";

const TITLE_SLOT = "Title";

const SimpleCard = ({ data, conversationHandler }) => {
  const onSelect = () => {
    conversationHandler.sendSlots({ [TITLE_SLOT]: data.title });
  };

  return html`
    <CustomCard onClick=${onSelect}>
      <CustomCardRow
        left=${html`<BaseText faded>Title</BaseText>`}
        right=${html`<BaseText>${data.title}</BaseText>`}
      />
    </CustomCard>
  `;
};

const touchpoint = await create({
  config: { applicationUrl: APP_URL, headers: { "nlx-api-key": API_KEY }, languageCode: LANGUAGE_CODE },
  customModalities: { SimpleModality: SimpleCard },
});

For details on component contracts, state, and event patterns, see the Custom Components Guide.

Next steps

Last updated