Documentation Index
Fetch the complete documentation index at: https://docs.heylua.ai/llms.txt
Use this file to discover all available pages before exploring further.
Overview
LuaPop is an embeddable chat widget that brings your AI agent directly to your website - no channel connection needed, just add a script tag!
2-Minute Setup
Single script tag
Fully Customizable
Match your brand
Voice Chat
Optional voice support
Any Framework
Works everywhere
Quick Setup
Add Script to Website
<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",
theme: "dark"
});
</script>
</body> tagReplace Agent ID
Get your agent ID from:Or from lua.skill.yaml Refresh Page
Widget appears immediately!Screenshot: Website with chat button in bottom-right Test Chat
Click button and send messageScreenshot: Open chat window with conversation Customization
<script>
window.LuaPop.init({
agentId: "your-agent-id",
// Position
position: "bottom-right", // or bottom-left, top-right, top-left
// Appearance
theme: "dark",
buttonColor: "#ff173a",
buttonText: "💬 Chat with us",
chatTitle: "Customer Support",
// Features
voiceModeEnabled: true,
// Branding
chatHeaderSubtitle: {
visible: true,
brandName: "Your Company",
iconUrl: "/logo.png"
}
});
</script>
Complete Documentation
Full LuaPop Guide
Complete chat widget documentation with configuration, styling, events, frameworks, and more
Framework Integration
React
Next.js
WordPress
Shopify
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: process.env.REACT_APP_AGENT_ID,
position: "bottom-right"
});
};
document.body.appendChild(script);
}, []);
return null;
}
import Script from 'next/script';
export default function Layout({ children }) {
return (
<>
{children}
<Script
src="https://lua-ai-global.github.io/lua-pop/lua-pop.umd.js"
onLoad={() => {
window.LuaPop?.init({
agentId: process.env.NEXT_PUBLIC_AGENT_ID
});
}}
/>
</>
);
}
Add to theme’s footer.php or use “Insert Headers and Footers” plugin
Add to theme.liquid before </body>
Framework Guides
Complete integration guides for all frameworks
Next Steps
Widget Configuration
All configuration options
Styling Guide
Customize appearance
