Touchpoint Sample HTML

# Modalities Modalities allow richer interactions to be embedded inside chat or voice applications with task specific UI being presented at the appropriate moment in a conversation. The exact workflow depends on your setup: {% tabs %} {% tab title="Typescript + NPM (Recommended)" %} Create a new file in your project (conventionally we call it `modalities-types.d.ts`). Then find the modality you are trying to implement and copy the typescript definition:

This will ensure that the custom modality you are working with will match the schema builders are working with. {% hint style="info" %} We are working on tooling that will automate this step in the future. {% endhint %} Then make a file for the modality you are trying to implement: {% code overflow="wrap" %} ```typescript import { html, type CustomModalityComponent } from "@nlxai/touchpoint-ui"; import type * as Modalities from "../modalities-types.d.ts"; export const Flights = (CustomModalityComponent = ({ data, }) => { return html` ${data.flights.map( (flight) => html`

Flight: ${flight.flightNumber}

From: ${flight.departure.city} (${flight.departure.code}) at ${new Date(flight.departure.time).toLocaleString()}

To: ${flight.arrival.city} (${flight.arrival.code}) at ${new Date(flight.arrival.time).toLocaleString()}

Airline: ${flight.airline}

Duration: ${flight.duration}

Price: ${flight.price}

`, )} `; }); ``` {% endcode %} These are standard React components, so can be unit tested, type-checked and so on. Also if you prefer JSX syntax, then `react` can be imported instead of `html`. Finally in your Touchpoint configuration you can register these components: ```typescript import { create } from "@nlxai/touchpoint-ui"; import { Flights } from "./custom-modalities/flights.tsx"; const touchpoint = await create({ config: { applicationUrl: "REPLACE_WITH_APPLICATION_URL", headers: { "nlx-api-key": "REPLACE_WITH_API_KEY" }, languageCode: "en-US", }, modalityComponents: { Flights } }); ``` {% endtab %} {% tab title="HTML" %} ```html Touchpoint Sample HTML ``` {% endtab %} {% endtabs %}