# Chat

The simplest way to setup an application for chat is with the following snippet:

{% tabs %}
{% tab title="HTML" %}
{% code overflow="wrap" fullWidth="true" %}

```javascript
<html lang="en">
  <head>
    <title>Touchpoint Sample HTML</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <script type="module">
      import { create } from "https://unpkg.com/@nlxai/touchpoint-ui/lib/index.js?module";
      
      const touchpoint = await create({
        config: {
          applicationUrl: "REPLACE_WITH_APPLICATION_URL",
          headers: {
            "nlx-api-key": "REPLACE_WITH_API_KEY"
          },
          languageCode: "en-US",
        },
      });
    </script>
  </body>
</html>
```

{% endcode %}
{% endtab %}

{% tab title="Typescript + NPM" %}
{% code overflow="wrap" %}

```typescript
import { create } from "@nlxai/touchpoint-ui";
      
const touchpoint = await create({
  config: {
    applicationUrl: 
      "REPLACE_WITH_APPLICATION_URL",
    headers: {
      "nlx-api-key": "REPLACE_WITH_API_KEY"
    },
    languageCode: "en-US",
  },
});
```

{% endcode %}
{% endtab %}
{% endtabs %}

Your Application URL and API Key can be obtained from the [API Delivery Channel Setup](https://docs.nlx.ai/platform/developers/setup/web#authentication)

This will result in a fully functional basic touchpoint experience:

<div align="left"><figure><img src="https://3978076094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2VnkvXtkrR2qhkVBmB1l%2Fuploads%2FFAkDbzM7oe3tTmJzrixo%2FScreenshot%202025-11-25%20at%2014.22.16.png?alt=media&#x26;token=1f7f0421-b217-4d08-9f57-0adac8b1d872" alt=""><figcaption></figcaption></figure></div>
