NLX | Developers

Touchpoint UI provides a powerful and flexible theming system that allows you to seamlessly integrate with your application's visual identity.

Quick Customization Essentials

For many applications, adjusting just two key properties will create a cohesive branded experience:


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 touchpoint = await create({
11        config: {
12          applicationUrl: "YOUR_APPLICATION_URL",
13          headers: { "nlx-api-key": "YOUR_API_KEY" },
14          languageCode: "en-US",
15          userId: crypto.randomUUID(),
16        },
17        theme: {
18          // The primary color for buttons and highlights
19          accent: "rgb(28, 99, 218)", // Use your brand's primary color
20      
21          // The font for all text in the interface
22          fontFamily: '"Helvetica Neue", sans-serif', // Use your brand's font
23        },
24      });
25      
26    </script>
27  </body>
28</html>

The

accent color is used throughout the interface for:

Interactive buttons
Selected state highlights
Important UI elements
Focus indicators

The

fontFamily property affects all text in the interface, ensuring typographic consistency.

Launch and Brand Icons

Icons are critical for maintaining brand consistency and ensuring a polished user experience. Touchpoint provides two key icon customization points: the launch icon (chat button) and the brand icon (header logo).

Launch Icon Guidance

The

launchIcon is displayed on the floating action button when the Touchpoint UI is collapsed. This is often the first interaction point for the user.

Design Guidance:

Guidance	Details	Reference
Button and Icon Size	Icon is 32x32 within the launch button	Your `launchIcon` image will be displayed at 32x32 pixels within this 64x64 button
File Format	SVG or PNG	A single-color SVG is ideal
Color and Contrast	Single Color	Should contrast well with background color. (Check both light and dark mode)
Background and Borders	Icon must have a transparent background	The icon should not have any embedded borders; the button handles its own border and rounding ( `rounded-outer` which uses `theme.outerBorderRadius`)
Shape and Proportions	32x32 pixels	Ensure the icon is clear and recognizable at this size

Configuration:

Provide the URL to your custom icon via the

launchIcon property.


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 touchpoint = await create({
11        config: {
12          applicationUrl: "YOUR_APPLICATION_URL",
13          headers: { "nlx-api-key": "YOUR_API_KEY" },
14          languageCode: "en-US",
15          userId: crypto.randomUUID(),
16        },
17        launchIcon: "https://yourdomain.com/path/to/your-launch-icon.svg",
18        theme: {
19          background: "rgb(0, 100, 255)", // Example: Ensure your icon contrasts with this
20        },
21      });
22      
23    </script>
24  </body>
25</html>

Brand Icon Guidance

The

brandIcon appears in the header of the expanded Touchpoint UI, reinforcing your brand's presence.

Design Guidelines:

Guidance	Details	Reference
Size	40x40 pixels	Ensure design is clear at this size
File Format	SVG or PNG	A SVG is ideal, High Quality PNG will work
Background and Borders	Icon must have a transparent background	The icon should not have any embedded borders

Configuration:

Pass the URL of your icon to the

brandIcon property in the Touchpoint configuration.


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 touchpoint = await create({
11        config: {
12          applicationUrl: "YOUR_APPLICATION_URL",
13          headers: { "nlx-api-key": "YOUR_API_KEY" },
14          languageCode: "en-US",
15          userId: crypto.randomUUID(),
16        },
17        brandIcon: "https://yourdomain.com/path/to/your-brand-icon.svg",
18      });
19      
20    </script>
21  </body>
22</html>

Custom Launch Implementation

You can implement a fully custom launch experience if the default launch button constraints don't meet your needs.


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 touchpoint = await create({
11        config: {
12          applicationUrl: "YOUR_APPLICATION_URL",
13          headers: { "nlx-api-key": "YOUR_API_KEY" },
14          languageCode: "en-US",
15          userId: crypto.randomUUID(),
16        },
17        brandIcon: "https://yourdomain.com/path/to/your-brand-icon.svg",
18        launchIcon: false,
19      });
20      
21      // Create your own launch button
22      document.getElementById("my-custom-button").addEventListener("click", () => {
23        touchpoint.expanded = true;
24      });
25      
26    </script>
27  </body>
28</html>

HTML


1<!-- Your custom button -->
2<button id="my-custom-button" class="my-brand-button">Chat with us</button>

This approach gives you complete control over the launch button's appearance, position, and behavior. See the Showing and Hiding Touchpoint guide for more details.

Dark Mode Support

Touchpoint automatically adapts your theme for both light and dark modes. Use the

light-dark() method to provide different accent colors for each mode:


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 touchpoint = await create({
11        config: {
12          applicationUrl: "YOUR_APPLICATION_URL",
13          headers: { "nlx-api-key": "YOUR_API_KEY" },
14          languageCode: "en-US",
15          userId: crypto.randomUUID(),
16        },
17        colorMode: "dark", // or "light"
18        theme: {
19          accent: "light-dark(rgb(28, 99, 218), rgb(38, 99, 118))", // Light mode, Dark mode
20          fontFamily: '"Helvetica Neue", sans-serif',
21        },
22      });
23      
24    </script>
25  </body>
26</html>

Defining Distinct Light and Dark Themes

For maximum control, you can create entirely separate theme objects for light and dark modes:


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 lightTheme = {
11        fontFamily: '"Inter", sans-serif',
12        accent: "#007AFF",
13        primary80: "#1C1C1E", // Dark text on light backgrounds
14        secondary80: "#F2F2F7", // Light gray message bubbles
15        background: "#FFFFFF", // White background
16        // ... other light theme properties
17      };
18      
19      const darkTheme = {
20        fontFamily: '"Inter", sans-serif',
21        accent: "#0A84FF",
22        primary80: "#FFFFFF", // White text on dark backgrounds
23        secondary80: "#1C1C1E", // Dark gray message bubbles
24        background: "#000000", // Black background
25        // ... other dark theme properties
26      };
27      
28      const userColorModePreference = window.matchMedia(
29        "(prefers-color-scheme: dark)",
30      ).matches
31        ? "dark"
32        : "light";
33      
34      const touchpoint = await create({
35        config: {
36          applicationUrl: "YOUR_APPLICATION_URL",
37          headers: { "nlx-api-key": "YOUR_API_KEY" },
38          languageCode: "en-US",
39          userId: crypto.randomUUID(),
40        },
41        colorMode: userColorModePreference,
42        theme: userColorModePreference === "dark" ? darkTheme : lightTheme,
43      });
44      
45    </script>
46  </body>
47</html>

Comprehensive Color System

Touchpoint uses a sophisticated color system with opacity variants to create visual hierarchy and ensure readability. Understanding this system lets you fine-tune every aspect of the interface.

Primary Colors

Primary colors are used for text, icons, and important UI elements. The opacity variants help create visual hierarchy:

Property	Opacity	Common Uses
`primary80`	80%	Main body text, prominent labels
`primary60`	60%	Secondary text, less emphasized information
`primary40`	40%	Supporting text, subtitles
`primary20`	20%	Placeholder text, disabled states
`primary10`	10%	Subtle highlights, hover states
`primary5`	5%	Very subtle backgrounds, separators
`primary1`	1%	Barely visible dividers

Secondary Colors

Secondary colors are typically used for backgrounds, containers, and supporting elements:

Property	Opacity	Common Uses
`secondary80`	80%	Message bubble backgrounds, card backgrounds
`secondary60`	60%	Container backgrounds
`secondary40`	40%	Input field backgrounds
`secondary20`	20%	Hover states on elements
`secondary10`	10%	Subtle container backgrounds
`secondary5`	5%	Very subtle fills, pressed states
`secondary1`	1%	Barely visible backgrounds

Accent and Additional Colors

Property	Description	Usage
`accent`	Main branding color	Buttons, active states, focus indicators
`accent20`	Accent color at 20% opacity	Hover states, subtle highlights
`background`	Main background color	Chat window background
`overlay`	Color for the overlay behind the chat window	Modal overlay when using half-screen mode

Status Colors

Property	Description	Usage
`warningPrimary`	Primary warning color	Warning text and icons
`warningSecondary`	Secondary warning color	Warning message backgrounds
`errorPrimary`	Primary error color	Error text and icons
`errorSecondary`	Secondary error color	Error message backgrounds

Layout Customization

Two key properties control the roundness of UI elements:

Border Radius Properties

Property	Controls
`innerBorderRadius`	Buttons, inputs, message bubbles
`outerBorderRadius`	Main window frame, cards, dialogs

For example:


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 theme = {
11        // Other theme properties...
12        innerBorderRadius: "4px", // Slightly rounded buttons and inputs
13        outerBorderRadius: "12px", // More rounded cards and main window
14      };
15      
16    </script>
17  </body>
18</html>

Complete Theme Example

Here's a complete theme configuration showing all available properties:


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 completeTheme = {
11        // Typography
12        fontFamily: '"Roboto", sans-serif',
13      
14        // Primary colors (text)
15        primary80: "rgba(0, 0, 0, 0.8)",
16        primary60: "rgba(0, 0, 0, 0.6)",
17        primary40: "rgba(0, 0, 0, 0.4)",
18        primary20: "rgba(0, 0, 0, 0.2)",
19        primary10: "rgba(0, 0, 0, 0.1)",
20        primary5: "rgba(0, 0, 0, 0.05)",
21        primary1: "rgba(0, 0, 0, 0.01)",
22      
23        // Secondary colors (backgrounds)
24        secondary80: "rgba(255, 255, 255, 0.8)",
25        secondary60: "rgba(255, 255, 255, 0.6)",
26        secondary40: "rgba(255, 255, 255, 0.4)",
27        secondary20: "rgba(255, 255, 255, 0.2)",
28        secondary10: "rgba(255, 255, 255, 0.1)",
29        secondary5: "rgba(255, 255, 255, 0.05)",
30        secondary1: "rgba(255, 255, 255, 0.01)",
31      
32        // Accent and additional colors
33        accent: "#FF5733",
34        accent20: "rgba(255, 87, 51, 0.2)",
35        background: "rgba(245, 245, 245, 0.95)",
36        overlay: "rgba(0, 0, 0, 0.4)",
37      
38        // Status colors
39        warningPrimary: "#FFA500",
40        warningSecondary: "rgba(255, 165, 0, 0.1)",
41        errorPrimary: "#FF0000",
42        errorSecondary: "rgba(255, 0, 0, 0.1)",
43      
44        // Layout
45        innerBorderRadius: "4px",
46        outerBorderRadius: "12px",
47      };
48      
49      const touchpoint = await create({
50        config: {
51          applicationUrl: "YOUR_APPLICATION_URL",
52          headers: { "nlx-api-key": "YOUR_API_KEY" },
53          languageCode: "en-US",
54          userId: crypto.randomUUID(),
55        },
56        theme: completeTheme,
57        launchIcon: "https://yoursite.com/chat-icon.svg",
58        brandIcon: "https://yoursite.com/logo.png",
59      });
60      
61    </script>
62  </body>
63</html>