CustomCards

About

Custom Cards render structured, selectable content. The system includes three components:

  • CustomCard: container (can be clickable or a link)

  • CustomCardRow: left/right content with optional centered icon

  • CustomCardImageRow: full-bleed image row

Recommended pattern

  1. Optional CustomCardImageRow at top

  2. One or more CustomCardRow rows

    • Left: <BaseText faded> label

    • Right: <BaseText> value

  3. Maintain selection state locally

  4. onClick sends choice to NLX

Properties

CustomCard

Property
Type
Required
Description

children

ReactNode

Yes

Content within the card

selected

boolean

No

Highlights card

onClick

function

No

Click handler

href

string

No

When set, renders as anchor

newTab

boolean

No

Opens href in a new tab (only when href is set)

className

string

No

Additional classes

Define onClick

The CustomCard component expects a function passed via onClick to define the actions to take when a user clicks the button.

Access the ConversationHandler method sendChoice via conversationHandler.sendChoice to send the user's choice back to NLX to continue the conversation.

CustomCardImageRow

Property
Type
Required
Description

src

string

Yes

Image URL

alt

string

No

Image alt text

CustomCardRow

Property
Type
Required
Description

left

ReactNode

Yes

Left side content

right

ReactNode

Yes

Right side content

icon

Icon

No

Optional centered icon component

Example

In order to use the Carousel and CustomCard components you will need to have a modality defined in your NLX application that is a list of objects.

Example Modality Schema

{
  "id": "uuid",
  "thumbnail": "imageUrl",
  "label": "Label text",
  "value": "Value text"
}

Example Card Component

This defines a component ItemCard that takes data (representing cardItemData) and an optional initialSelectedId and onSelect handler.

const ItemCard = ({ data, conversationHandler }) => {
  const [isSelected, setIsSelected] = React.useState(false);

  const handleClick = () => {
    setIsSelected(true);
    conversationHandler.sendChoice(data.id);
  };

  return html`
    <CustomCard selected=${isSelected} onClick=${handleClick}>
      <CustomCardImageRow src=${data.thumbnail} alt=${data.thumbnailAlt} />
      <CustomCardRow
        left=${html`<BaseText faded>${data.label}</BaseText>`}
        right=${html`<BaseText>${data.value}</BaseText>`}
      />
    </CustomCard>
  `;
};

// Register component when creating touchpoint
const touchpoint = await create({
  config: {
    applicationUrl: "YOUR_APPLICATION_URL",
    headers: { "nlx-api-key": "YOUR_API_KEY" },
    languageCode: "en-US",
  },
  customModalities: {
    ItemCardModality: ItemCard,
  },
});

Related

Last updated