NLX | Developers

About

Touchpoint provides two typography elements, BaseText and SmallText, to provide consistent styling and theme integration for text within Custom Components.

BaseText - Primary text component in Touchpoint, used for main content, titles, and important information.
SmallText - Styling for secondary and supporting information in your interface. It uses reduced size and opacity to create visual hierarchy with BaseText.

Import and Basic Usage

You can import the typography elements from touchpoint once the package has been installed or made available in your project.

Example

Uses both the BaseText and SmallText typography components to construct a CustomCard with the "primary" (BaseText) information left aligned and "secondary" (SmallText) right aligned.


1<html lang="en">
2  <head>
3    <title>Touchpoint Sample HTML</title>
4    <meta name="viewport" content="width=device-width, initial-scale=1">
5  </head>
6  <body>
7    <script type="module">
8      import { create, React, html } from "https://unpkg.com/@nlxai/touchpoint-ui@1.1.3/lib/index.js?module";
9      
10      const ProductDetails = ({ data, conversationHandler }) => {
11        return html`
12          <CustomCard>
13            <CustomCardRow
14              left=${html`<BaseText>${data.PrimaryInformation}</BaseText>`}
15              right=${html`<SmallText>${data.SecondaryInformation}</SmallText>`}
16            />
17          </CustomCard>
18        `;
19      };
20      
21      // Register component when creating touchpoint
22      const touchpoint = await create({
23        config: {
24          applicationUrl: "YOUR_APPLICATION_URL",
25          headers: { "nlx-api-key": "YOUR_API_KEY" },
26          languageCode: "en-US",
27        },
28        customModalities: {
29          ProductDetailsModality: ProductDetails,
30        },
31      });
32      
33    </script>
34  </body>
35</html>

About

Import and Basic Usage

Example

Related Documents