Skip to main content

​
Overview

Lua Pop 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

​
Two ways to set it up

  • No code — configure the widget visually in the admin dashboard, then drop in a one-line window.LuaPop.init() snippet.
  • Inline — pass your options directly to window.LuaPop.init({ ... }) in code.
Configuration priority: dashboard settings apply only when you call window.LuaPop.init() with no arguments. If your embed script passes options to window.LuaPop.init({ ... }), those values take priority over the settings configured in the dashboard.

​
Configure in the dashboard (no code)

1

Open the widget settings

In the admin dashboard, click Agents in the side navigation, select your agent’s card, click the settings cog in the top right, then choose Chat widget.
Open Chat widget settings from the agent settings menu
2

Customize the widget

Adjust the settings in the Chat widget customization panel on the right.
Chat widget customization panel
The panel includes:
  • Allowed websites (required) — the domains the widget is allowed to load on.
  • Excluded paths — pages where the widget should stay hidden (e.g. /checkout).
  • General — display mode (floating or embedded), custom instructions, chat input placeholder, and welcome message.
  • Floating button settings (floating mode) — position, draggable button, button text, color and icon, button spacing, and chat window size.
  • Embedded settings (embedded mode) — target container ID and conversation starters.
  • Features — voice mode, microphone, attachments, and link previews.
  • Chat header — chat title and header colors.
Click Create channel (or Update configuration) to save.
3

Add the embed snippet

Under Installation, copy the snippet and place it before the closing </body> tag on your site:
<script src="https://lua-ai-global.github.io/lua-pop/lua-pop.umd.js"></script>
<script>
  window.LuaPop.init();
</script>
Because init() is called with no arguments, the widget uses the settings you configured in the dashboard.

​
Configure inline (code)

Prefer to keep configuration in code? Pass your options directly to init(). These override any dashboard settings. 
<script src="https://lua-ai-global.github.io/lua-pop/lua-pop.umd.js"></script>
<script>
  window.LuaPop.init({
    agentId: "your-agent-id",

    // Position
    position: "bottom-right",  // or bottom-left, top-right, top-left
    draggable: true,           // let visitors drag the button to reposition it

    // Appearance
    buttonColor: "#ff173a",
    buttonText: "💬 Chat with us",
    chatTitle: "Customer Support",

    // Features
    voiceModeEnabled: true,

    // Branding
    chatHeaderSubtitle: {
      visible: true,
      brandName: "Your Company",
      iconUrl: "/logo.png"
    }
  });
</script>
Get your agent ID from your lua.skill.yaml file. Place the script before the closing </body> tag.

​
Complete Documentation

Full Lua Pop 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