Quick Start

Before You Start: Whitelist Your Website

You must whitelist your domain before the widget will load. In the Lua AI admin dashboard, go to Chat Widget → Customization and add your website URL to the allowed sites list. The widget silently refuses to initialise on any domain not listed here.

Testing on localhost? localhost cannot be whitelisted — the dashboard approach will not work. You must pass your configuration inline and set environment: "production" explicitly:

<script src="https://lua-ai-global.github.io/lua-pop/lua-pop.umd.js"></script>
<script>
  window.LuaPop.init({
    agentId: "your-agent-id",
    environment: "production"
  });
</script>

This bypasses the domain whitelist check so you can develop and test locally against your real agent.

Setup Options

There are two ways to get the widget running. The dashboard approach is recommended — it requires no code changes when you update settings.

Dashboard (Recommended)
Inline Config

Configure everything from the Lua AI admin dashboard and embed a single script with no payload.

Whitelist your site

In the admin dashboard, go to Chat Widget → Customization and add your website URL(s) to the allowed sites list. The widget will only load on whitelisted domains.

Configure in the dashboard

Set your agent behavior, appearance, and features directly in the dashboard UI — no code required.

Add the script

Copy and paste this code right before the closing </body> tag:

<script src="https://lua-ai-global.github.io/lua-pop/lua-pop.umd.js"></script>
<script>
  window.LuaPop.init();
</script>

Test

Refresh your page — the chat button will appear using your dashboard settings.

That’s it! Update appearance or behavior any time from the dashboard — no code deploys needed. ✨

Configuration priority: If you pass options to window.LuaPop.init({...}), those values override the dashboard settings. To use dashboard settings exclusively, call window.LuaPop.init() with no arguments.

Pass configuration directly in the script for full programmatic control, or to override specific dashboard values. This is also required when testing on localhost.

Add the Script

Copy and paste this code right before the closing </body> tag:

<script src="https://lua-ai-global.github.io/lua-pop/lua-pop.umd.js"></script>
<script>
  window.LuaPop.init({
    agentId: "your-agent-id",
    environment: "production",
    position: "bottom-right",
    buttonText: "Chat with AI"
  });
</script>

Replace Agent ID

Get your agent ID from the Lua AI admin dashboard and replace "your-agent-id"

Test

Refresh your page — you should see a chat button in the bottom-right corner!

That’s it! Your AI chat widget is now live. ✨

Common Setups

Customer Support

<script src="https://lua-ai-global.github.io/lua-pop/lua-pop.umd.js"></script>
<script>
  window.LuaPop.init({
    agentId: "support-agent-id",
    chatTitle: "Customer Support",
    buttonText: "💬 Need Help?",
    position: "bottom-right",
    welcomeMessage: "Hi there! 👋 How can we help you today?",
    chatInputPlaceholder: "Describe your issue..."
  });
</script>

Sales Assistant

<script src="https://lua-ai-global.github.io/lua-pop/lua-pop.umd.js"></script>
<script>
  window.LuaPop.init({
    agentId: "sales-agent-id",
    chatTitle: "Sales Assistant",
    buttonText: "💰 Get Quote",
    buttonColor: "#28a745",
    position: "bottom-right"
  });
</script>

Embedded Chat (No Floating Button)

<!-- Create a container -->
<div id="chat-container" style="width: 400px; height: 600px;"></div>

<!-- Initialize embedded mode -->
<script src="https://lua-ai-global.github.io/lua-pop/lua-pop.umd.js"></script>
<script>
  window.LuaPop.init({
    agentId: "your-agent-id",
    displayMode: "embedded",
    embeddedDisplayConfig: {
      targetContainerId: "chat-container"
    }
  });
</script>

Quick Customizations

Change Position

Bottom Right
Bottom Left
Top Right
Top Left

position: "bottom-right"

position: "bottom-left"

position: "top-right"

position: "top-left"

Custom Colors & Button

window.LuaPop.init({
  agentId: "your-agent-id",
  buttonColor: "#ff6b6b",      // Custom button color
  buttonText: "💬 Chat Now",   // Custom text
  buttonIcon: "🤖",            // Custom icon/emoji
  chatTitle: "AI Assistant"    // Custom title
});

Testing Environments

Staging (For Testing)

window.LuaPop.init({
  agentId: "your-agent-id",
  environment: "staging", // Uses api.lua.dev
  position: "bottom-right"
});

Production (Live)

window.LuaPop.init({
  agentId: "your-agent-id",
  environment: "production", // Uses api.heylua.ai
  position: "bottom-right"
});

Always test with environment: "staging" before switching to production!

Framework Integration Quick Start

React

import { useEffect } from 'react';

export default function ChatWidget() {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://lua-ai-global.github.io/lua-pop/lua-pop.umd.js';
    script.onload = () => {
      window.LuaPop?.init({
        agentId: "your-agent-id",
        position: "bottom-right"
      });
    };
    document.body.appendChild(script);
  }, []);

  return null;
}

Vue

<script>
export default {
  mounted() {
    const script = document.createElement('script');
    script.src = 'https://lua-ai-global.github.io/lua-pop/lua-pop.umd.js';
    script.onload = () => {
      window.LuaPop?.init({
        agentId: "your-agent-id",
        position: "bottom-right"
      });
    };
    document.body.appendChild(script);
  }
};
</script>

More Framework Examples

See integration guides for Angular, Next.js, and more

Troubleshooting

Widget not appearing?

Button shows but chat won't open?

Solutions:

Check your internet connection
Verify agent ID exists in Lua AI dashboard
Try environment: "staging" for testing
Check browser console for API errors

Styling issues?

Solutions:

Check for CSS conflicts using browser dev tools
Try a different position

Add higher z-index:

popupButtonStyles: {
  zIndex: "9999"
}

Next Steps

Full Configuration

Explore all configuration options

Custom Styling

Match your brand perfectly

Real Examples

See production implementations

Track Events

Monitor chat interactions

Getting Started

Configuration

Integration

Features

Help

Before You Start: Whitelist Your Website

Setup Options

Common Setups

Customer Support

Sales Assistant

Embedded Chat (No Floating Button)

Quick Customizations

Change Position

Custom Colors & Button

Testing Environments

Staging (For Testing)

Production (Live)

Framework Integration Quick Start

React

Vue

More Framework Examples

Troubleshooting

Next Steps

Full Configuration

Custom Styling

Real Examples

Track Events

​Before You Start: Whitelist Your Website

​Setup Options

​Common Setups

​Customer Support

​Sales Assistant

​Embedded Chat (No Floating Button)

​Quick Customizations

​Change Position

​Custom Colors & Button

​Testing Environments

​Staging (For Testing)

​Production (Live)

​Framework Integration Quick Start

​React

​Vue

More Framework Examples

​Troubleshooting

​Next Steps

Full Configuration

Custom Styling

Real Examples

Track Events

Before You Start: Whitelist Your Website

Setup Options

Common Setups

Customer Support

Sales Assistant

Embedded Chat (No Floating Button)

Quick Customizations

Change Position

Custom Colors & Button

Testing Environments

Staging (For Testing)

Production (Live)

Framework Integration Quick Start

React

Vue

Troubleshooting

Next Steps