Skip to main content

Chat Popup

The Luhn AI Chat Popup allows you to integrate a persistent chat button that floats on top of your website or application. When clicked, it opens the chat interface.

This component is ideal when you want the chat to be accessible from anywhere on your site without dedicating a specific section for it. The script can be placed in any part of your HTML that is persistent across all pages, such as the <head> or a shared layout component.

Quick Start Guide​

Integrating the chat popup is even simpler than the embedded widget.

Step 1: Include the Script​

Add the Luhn AI Chat Widget script tag to a persistent section of your site. Placing it inside the <head> tag is a great option.

index.html
<head>
  <!-- ... other head elements like meta tags and title ... -->
  <script src="https://cdn.luhn.ai/luhn-chat-external-components.umd.js"></script>
</head>

Step 2: Initialize the Popup​

Immediately after the first script, add a second <script> tag to initialize the popup. You only need to provide your unique apiKey.

index.html
<head>
  <!-- ... other head elements ... -->
  <script src="https://cdn.luhn.ai/luhn-chat-external-components.umd.js"></script>
  <script>
    LuhnChatPopup.init({
      config: {
        apiKey: "YOUR_API_KEY_HERE",
      },
    });
  </script>
</head>

That's it! A floating chat button will now appear on your site.

Configuration​

The LuhnChatPopup.init() function accepts an object with a single required property:

config​

  • Type: object
  • Required: Yes

This object holds the specific configuration for your popup.

config.apiKey​

  • Type: string
  • Required: Yes

This is your unique API key, which authenticates and links the popup 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.

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 Popup</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- 1. This loads the widget code from the CDN -->
    <script src="https://cdn.luhn.ai/luhn-chat-external-components.umd.js"></script>

    <!-- 2. This initializes the popup with your configuration -->
    <script>
      LuhnChatPopup.init({
        config: {
          apiKey: "YOUR_API_KEY_HERE", // Replace with your actual API Key
        },
      });
    </script>
  </head>
  <body>
    <h1>Welcome to my Website</h1>
    <p>The chat popup will be floating on this page.</p>
  </body>
</html>

Troubleshooting​

If you encounter any issues, check this common point:

  • Chat button shows an error or doesn't load:
    • This is almost always 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.
    • Check your browser's developer console for any error messages.