Skip to main content

​
30-Second Setup

Add AI chat to your website in 3 simple steps:
1

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",
    position: "bottom-right",
    buttonText: "Chat with AI"
  });
</script>
2

Replace Agent ID

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

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

position: "bottom-right"

​
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

Check these:
  1. Open browser console for JavaScript errors
  2. Verify your agent ID is correct
  3. Ensure script is loaded after DOM is ready
  4. Check if another chat widget is conflicting
Solutions:
  1. Check your internet connection
  2. Verify agent ID exists in Lua AI dashboard
  3. Try environment: "staging" for testing
  4. Check browser console for API errors
Solutions:
  1. Check for CSS conflicts using browser dev tools
  2. Try a different position
  3. 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