Skip to main content

Chat Widget

The Luhn AI Chat Widget allows you to embed any of your agents or integrations directly into your own website or application. This provides a way for users to interact with your AI chat without needing to be registered in the Luhn AI platform.

The component is responsive and will adapt to the container where it's placed, but we recommend dedicating a full-width section or a complete page for the best user experience.

Quick Start Guide​

Integrating the chat widget involves three simple steps.

Step 1: Add the Anchor Element​

First, add an empty <div> element to your HTML file where you want the chat widget to appear. Give it a unique id. This element will be completely replaced by the chat widget.

index.html
<body>
  <div id="luhn-chat-anchor"></div>
</body>

Step 2: Include the Script​

Next, add the Luhn AI Chat Widget script tag just before the closing </body> tag of your HTML file. This will load the necessary code to run the chat.

index.html
  <div id="luhn-chat-anchor"></div>

  <script src="https://cdn.luhn.ai/luhn-chat-external-components.umd.js"></script>
</body>

Step 3: Initialize the Widget​

Finally, add a second <script> tag to initialize the widget. Here you will specify the selector for your anchor element and your unique apiKey.

index.html
  <div id="luhn-chat-anchor"></div>

  <script src="https://cdn.luhn.ai/luhn-chat-external-components.umd.js"></script>
  <script>
    LuhnChatWidget.init({
      selector: "#luhn-chat-anchor",
      config: {
        apiKey: "YOUR_API_KEY_HERE"
      }
    });
  </script>
</body>

Configuration​

The LuhnChatWidget.init() function accepts an object with the following properties:

selector​

  • Type: string
  • Required: Yes

This is the CSS selector for the anchor element where the widget will be rendered. It must exactly match the id you created in Step 1.

config​

  • Type: object
  • Required: Yes

This object holds the specific configuration for your widget.

config.apiKey​

  • Type: string
  • Required: Yes

This is your unique API key, which authenticates and links the widget to your specific Luhn AI agent or integration.

You can get your API Key from the Luhn AI application dashboard at app.luhn.ai, within the settings of your agent. (More detailed documentation on key generation is coming soon).

Complete Example​

Here is a complete, minimal index.html file that you can use as a template.

index.html
<!DOCTYPE html>
<html>
  <head>
    <title>Luhn AI Chat</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
  <body>
    <div id="luhn-chat-anchor"></div>

    <script src="https://cdn.luhn.ai/luhn-chat-external-components.umd.js"></script>

    <script>
      LuhnChatWidget.init({
        selector: "#luhn-chat-anchor", // Must match the div id above
        config: {
          apiKey: "YOUR_API_KEY_HERE", // Replace with your actual API Key
        },
      });
    </script>
  </body>
</html>

Troubleshooting​

If you encounter any issues, check these common points:

  • Widget is not visible:

    • Ensure the selector in your init script (e.g., "#luhn-chat-anchor") perfectly matches the id of the <div> element in your HTML. Typos are a common issue.
    • Check your browser's developer console for any error messages.

  • Chat shows an error or doesn't load:

    • This is often caused by an incorrect or outdated apiKey.
    • Verify that your API Key is correct. It's possible the key was accidentally rotated or changed. You can confirm or generate a new key in your agent's settings on app.luhn.ai.