> ## 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. # Installation > Install LuaPop on your website or application ## Configuration Approaches You can configure the widget in two ways — choose what works best for your workflow: Configure appearance and behavior in the Lua AI admin dashboard. Call `window.LuaPop.init()` with no arguments — the widget pulls settings automatically. Pass configuration directly to `window.LuaPop.init({...})`. Useful for dynamic values or overriding specific dashboard settings. **Configuration priority:** Inline config passed to `window.LuaPop.init({...})` always takes priority over dashboard settings. To rely entirely on dashboard settings, call `window.LuaPop.init()` with no arguments. ## Site Whitelisting **You must whitelist your domain before the widget will load.** The widget silently refuses to initialise on any domain not in the allowed list. Go to the **Chat Widget** section in your [Lua AI admin dashboard](https://admin.heylua.ai/). Under **Customization**, add each domain where you want the widget to appear (e.g. `https://yoursite.com`). Save your settings. The widget will only initialise on whitelisted domains — requests from unlisted origins are blocked. **Testing on localhost?** `localhost` cannot be whitelisted. You must pass your config inline and set `environment: "production"` explicitly — this bypasses the domain whitelist check so the widget loads during local development: ```html theme={null} ``` ## Installation Methods Quickest setup — no build process For modern frameworks and build tools ## CDN Installation (Recommended) Perfect for static websites, WordPress, Shopify, or any HTML page. ### Step 1: Add Script Tag Add this code right before the closing `` tag: ```html theme={null} ``` ### Step 2: Initialize **Using dashboard settings (recommended):** ```html theme={null} ``` **Using inline config (advanced / overrides):** ```html theme={null} ``` ### Complete Example ```html theme={null} My Website

Welcome to My Website

Your content here...

``` ## NPM Installation For React, Vue, Angular, or other modern frameworks. ### Step 1: Install Package ```bash npm theme={null} npm install @lua/pop ``` ```bash yarn theme={null} yarn add @lua/pop ``` ```bash pnpm theme={null} pnpm add @lua/pop ``` ### Step 2: Import and Use ```tsx theme={null} import { LuaPopWidget } from '@lua/pop'; import '@lua/pop/dist/style.css'; function App() { return (
{/* Your app content */}
); } ``` ```vue theme={null} ``` ```typescript theme={null} import { LuaPopWidget, LuaPopConfig } from '@lua/pop'; import '@lua/pop/dist/style.css'; const config: LuaPopConfig = { agentId: "your-agent-id", position: "bottom-right", buttonText: "Chat with AI" }; // Use in your framework ``` ## Platform-Specific Installation ### WordPress Go to **Appearance** → **Theme File Editor** Find your theme's `footer.php` file Add before ``: ```html theme={null} ``` **Alternative:** Use plugin like "Insert Headers and Footers" to add the script without editing theme files. ### Shopify Go to **Online Store** → **Themes** → **Edit code** Find `theme.liquid` in **Layout** folder Add before ``: ```html theme={null} ``` Click **Save** and view your store ### Wix Go to **Settings** → **Custom Code** Click **+ Add Custom Code** → **Body - end** ```html theme={null} ``` Select "All pages" and click **Apply** ### Squarespace Go to **Settings** → **Advanced** → **Code Injection** In the **Footer** section, add: ```html theme={null} ``` Click **Save** and your chat widget will appear on all pages ### Webflow Go to **Project Settings** → **Custom Code** Paste in **Footer Code** section: ```html theme={null} ``` Publish your site to see the widget ## Single Page Applications ### React ```tsx theme={null} // components/ChatWidget.tsx import { useEffect } from 'react'; export default function ChatWidget() { useEffect(() => { // Load LuaPop script 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.NEXT_PUBLIC_AGENT_ID, position: "bottom-right", sessionId: `user-${Date.now()}` }); }; document.body.appendChild(script); // Cleanup return () => { document.body.removeChild(script); }; }, []); return null; } // In your main App component import ChatWidget from './components/ChatWidget'; function App() { return (
{/* Your app */}
); } ``` ### Next.js ```tsx theme={null} // app/layout.tsx or pages/_app.tsx import Script from 'next/script'; export default function RootLayout({ children }) { return ( {children} {/* LuaPop Widget */}