NLX | Developers

The Touchpoint end-user experience can be enhanced and customized with custom components.

Modalities

Touchpoint relies on modalities defined within the NLX application to send structured data from the NLX conversation flow to touchpoint. For each Modality defined in your conversational application that you wish to use with Touchpoint, you must create a component and explicitly enable that modality when creating your touchpoint instance.

Defining your Component

Each component should accept an object with data and conversationHandler to access the conversation context sent from the NLX Application.

data: Can be any type. It will match the schema set in the modality within NLX.
conversationHandler: The ConversationHandler. Functions to access the conversational context and send data back to NLX.

Add the Component to the customModalities configuration option paired with the name of Modality in NLX. In the example below the modality is named "MyComponentModality".

Basic Component Structure

1import { create, BaseText } from "@nlxai/touchpoint-ui";
2
3/**
4 * @param {Object} props - The properties object.
5 * @param {Object} props.data - The data object - Defined in NLX as a modality and set within the Node
6 * @param {Function} props.conversationHandler - The ConversationHandler
7 *
8 * @returns {JSX.Element} The rendered component.
9 */
10const Component = ({ data, conversationHandler }) => {
11  const myComponent = <BaseText>Hello World</BaseText>;
12  return myComponent;
13};
14
15const touchpointOptions = {
16  config: {
17    applicationUrl: "YOUR_APPLICATION_URL",
18    headers: {
19      "nlx-api-key": "YOUR_API_KEY",
20    },
21    languageCode: "en-US",
22  },
23  theme: { fontFamily: '"Neue Haas Grotesk", sans-serif', accent: "#2663DA" },
24  customModalities: {
25    MyComponentModality: Component,
26  },
27};
28
29// Register components with specific modality keys
30const touchpoint = await create(touchpointOptions);

Example Button Modality

Create a modality named TextButtonExample within NLX and attach to a User Choice Node. Then custom slots or a static data request to set any value for buttonLabel and buttonId for this example.

1{
2  "buttonLabel": "Label to be displayed on the button",
3  "buttonId": "Id of the 'choice' to send back to NLX"
4}

Example Button Component

1import { create, TextButton, Icons } from "@nlxai/touchpoint-ui";
2/**
3 * MyFirstButtonComponent is a functional component that renders a TextButton with a label, icon, and click handler.
4 *
5 * @param {Object} props - The properties object.
6 * @param {Object} props.data - The data object - Defined in NLX as a modality and set within the Node
7 * @param {string} props.data.buttonLabel - Label to be displayed on the button
8 * @param {string} props.data.buttonId - Id of the 'choice' to send back to NLX.
9 * @param {Function} props.conversationHandler - The handler object that contains the function sendChoice to be called on button click
10 *
11 * @returns {JSX.Element} The rendered TextButton component.
12 */
13const MyFirstButtonComponent = ({ data, conversationHandler }) => {
14  const myTextButton = (
15    <TextButton
16      label={data.buttonLabel}
17      Icon={Icons.ArrowForward}
18      onClick={() => conversationHandler.sendChoice(data.buttonId)}
19    />
20  );
21  return myTextButton;
22};
23
24const touchpointOptions = {
25  config: {
26    applicationUrl: "YOUR_APPLICATION_URL",
27    headers: {
28      "nlx-api-key": "YOUR_API_KEY",
29    },
30    languageCode: "en-US",
31  },
32  theme: { fontFamily: '"Neue Haas Grotesk", sans-serif', accent: "#2663DA" },
33  customModalities: {
34    TextButtonExample: MyFirstButtonComponent,
35  },
36};
37
38// Register components with specific modality keys
39const touchpoint = await create(touchpointOptions);

Example CustomCard Modality

For example, a Modality named "ProductCard" with schema:

1{
2  "name": "Product Name",
3  "id": "Product UUID",
4  "price": "Product Price",
5  "productImageUrl": "Product Image URL"
6}

Example CustomCard Component

1import {
2  create,
3  CustomCard,
4  BaseText,
5  TextButton,
6  SmallText,
7  React,
8} from "@nlxai/touchpoint-ui";
9
10/**
11 * ProductCardComponent is a React functional component that renders a custom card for a product.
12 *
13 * @param {Object} props - The properties object.
14 * @param {Object} props.data - The data object containing product details.
15 * @param {string} props.data.id - The unique identifier for the product.
16 * @param {string} props.data.productImageUrl - The URL of the product image.
17 * @param {string} props.data.name - The name of the product.
18 * @param {string} props.data.price - The price of the product.
19 * @param {Function} props.conversationHandler - The handler object with a sendChoice method.
20 *
21 * @returns {JSX.Element} A custom card component displaying product details.
22 */
23const ProductCardComponent = ({ data, conversationHandler }) => {
24  const [selected, setSelected] = React.useState(null);
25  return (
26    <CustomCard
27      key="0"
28      selected={selected === 0}
29      onClick={() => {
30        setSelected(0);
31        conversationHandler.sendChoice(data.id);
32      }}
33    >
34      <CustomCardImageRow src={data.productImageUrl} alt={data.name} />
35      <CustomCardRow
36        left={<BaseText>{data.name}</BaseText>}
37        right={<BaseText>{data.price}</BaseText>}
38      />
39    </CustomCard>
40  );
41};
42
43const touchpointOptions = {
44  config: {
45    applicationUrl: "YOUR_APPLICATION_URL",
46    headers: {
47      "nlx-api-key": "YOUR_API_KEY",
48    },
49    languageCode: "en-US",
50  },
51  theme: { fontFamily: '"Neue Haas Grotesk", sans-serif', accent: "#2663DA" },
52  customModalities: {
53    ProductCard: ProductCardComponent,
54  },
55};
56
57// Register components with specific modality keys
58const touchpoint = await create(touchpointOptions);

Component Categories

Touchpoint provides different types of components that work together:

Typography - Text components to create consistent text presentation:
Carousel & CustomCards - Structure your content with Card collections
Buttons - Handle user actions with text or icon based buttons
Icons - Add graphical elements with consistent iconography