Embedded Touchpoint

Embedded mode allows you to integrate Touchpoint directly into your website as a custom HTML element inline with your content.

Embedded mode enables new capabilities not possible with overlay mode:

• Integrate seamlessly within existing layouts and containers

• Apply custom CSS styling with full control

• Build responsive designs that adapt to different screen sizes

• Create inline chat widgets within content areas

Quick Start

To use embedded mode, you need:

1. Load the Touchpoint script - The script automatically registers the <nlx-touchpoint> custom element

2. Add the HTML element to your page

3. Configure the touchpoint via HTML attribute or JavaScript property

HTML

<nlx-touchpoint
  configuration='{
    "config": {
      "applicationUrl": "YOUR_APPLICATION_URL",
      "headers": {
        "nlx-api-key": "YOUR_API_KEY"
      },
      "userId": "user-123",
      "languageCode": "en-US"
    },
    "input": "text"
  }'
></nlx-touchpoint>

JavaScript

<nlx-touchpoint id="my-touchpoint"></nlx-touchpoint>

<script>
  const touchpoint = document.getElementById('my-touchpoint');
  touchpoint.touchpointConfiguration = {
    config: {
      applicationUrl: "YOUR_APPLICATION_URL",
      headers: {
        "nlx-api-key": "YOUR_API_KEY"
      },
      userId: "user-123", 
      languageCode: "en-US"
    },
    input: "text"
  };
</script>

Configuration Methods

Embedded Ignored Properties

These configuration properties are ignored in embedded mode:

• windowSize - Embedded Touchpoint always use the full available space

• launchIcon - No launch button is shown in embedded mode, you will need to launch Touchpoint

HTML Attribute Configuration

Use the configuration HTML attribute with a JSON string.

<nlx-touchpoint configuration='{"config": {...}, "input": "voice"}'></nlx-touchpoint>

JavaScript Property Configuration

Use the touchpointConfiguration JavaScript property for full configuration support, including custom modalities and functions.

const touchpoint = document.createElement('nlx-touchpoint');
touchpoint.touchpointConfiguration = {
  config: {
    // Core configuration
  },
  customModalities: {
    MyCustomComponent: MyComponentFunction
  },
  initializeConversation: (handler, context) => {
    // Custom initialization logic
  }
};
document.body.appendChild(touchpoint);

Custom Styling

Embedded Touchpoint applies minimal default styles:

• nlx-text and nlx-voice: display: block; height: 350px;

• nlx-voiceMini: display: inline-block;

Defaults use zero specificity and are easy to override.

/* Make touchpoint take full container width and height */
nlx-touchpoint.nlx-text {
  width: 100%;
  height: 500px;
}

/* Create a compact voice mini touchpoint */
nlx-touchpoint.nlx-voiceMini {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}

Close Button Behavior

Control the close button visibility and behavior using the onClose property:

Hide Close Button (Default)

touchpoint.onClose = null; // No close button shown

Show Close Button with Default Behavior

touchpoint.onClose = () => {
  // Touchpoint will disappear
};

Custom Close Behavior

touchpoint.onClose = (event) => {
  event.preventDefault(); // Prevent default hiding
  // Custom logic here
  console.log('Close button clicked');
};