Skip to main content

​
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

1

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>
Place before closing </body> tag
2

Replace Agent ID

Get your agent ID from:
lua production
Or from lua.skill.yaml
3

Refresh Page

Widget appears immediately!
Widget button
Screenshot: Website with chat button in bottom-right
4

Test Chat

Click button and send message
Chat window
Screenshot: 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>
Customization
Screenshot: Multiple widget examples with different colors/positions

​
Complete Documentation

Full LuaPop Guide

Complete chat widget documentation with configuration, styling, events, frameworks, and more

​
Framework Integration

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;
}

Framework Guides

Complete integration guides for all frameworks

​
Next Steps

Widget Configuration

All configuration options

Styling Guide

Customize appearance
EOFEMAIL