Examples

Minimal full-screen voice

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 touchpoint = await create({
  config: {
    applicationUrl: APP_URL,
    headers: { "nlx-api-key": API_KEY },
    languageCode: LANGUAGE_CODE,
  },
  input: "voice",
});

With brand icon and theme

const touchpoint = await create({
  config: {
    applicationUrl: APP_URL,
    headers: { "nlx-api-key": API_KEY },
    languageCode: LANGUAGE_CODE,
  },
  input: "voice",
  brandIcon: "https://example.com/logo.png",
  theme: {
    fontFamily: '"Helvetica Neue", sans-serif',
    accent: "#1c63da",
  },
});

With initial context

const touchpoint = await create({
  config: {
    applicationUrl: APP_URL,
    headers: { "nlx-api-key": API_KEY },
    languageCode: LANGUAGE_CODE,
  },
  input: "voice",
  initialContext: {
    accountId: "123",
    entryPoint: "support",
  },
});

Rendering a custom modality during voice

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

const ProductCard = ({ data, conversationHandler }) => {
  const onSelect = () => {
    conversationHandler.sendText(`Select ${data.title}`);
  };
  return html`
    <CustomCard onClick=${onSelect}>
      <CustomCardRow
        left=${html`<BaseText faded>Title</BaseText>`}
        right=${html`<BaseText>${data.title}</BaseText>`}
      />
    </CustomCard>
  `;
};

await create({
  config: {
    applicationUrl: APP_URL,
    headers: { "nlx-api-key": API_KEY },
    languageCode: LANGUAGE_CODE,
  },
  input: "voice",
  customModalities: { ProductCard },
});