> ## 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.
# Framework Integration
> Integrate LuaPop with React, Vue, Angular, and more
## React
### Basic Integration
```tsx theme={null}
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 () => {
document.body.removeChild(script);
};
}, []);
return null;
}
```
### With Environment Variables
```tsx theme={null}
// components/ChatWidget.tsx
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,
environment: process.env.NODE_ENV === 'production' ? 'production' : 'staging',
position: "bottom-right",
sessionId: `user-${Date.now()}`
});
};
document.body.appendChild(script);
}, []);
return null;
}
```
## Next.js
### App Router
```tsx theme={null}
// app/layout.tsx
import Script from 'next/script';
export default function RootLayout({ children }) {
return (
{children}
```
### Nuxt.js
```vue theme={null}
export default defineNuxtPlugin(() => {
if (process.client) {
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: useRuntimeConfig().public.agentId,
position: "bottom-right"
});
};
document.body.appendChild(script);
}
});
```
## Angular
```typescript theme={null}
// app.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-root',
template: `
`
})
export class AppComponent implements OnInit {
ngOnInit() {
const script = document.createElement('script');
script.src = 'https://lua-ai-global.github.io/lua-pop/lua-pop.umd.js';
script.onload = () => {
(window as any).LuaPop?.init({
agentId: environment.agentId,
position: "bottom-right"
});
};
document.body.appendChild(script);
}
}
```
## Svelte
```svelte theme={null}
```
## WordPress
### Using Theme Editor
```php theme={null}
```
### Using Plugin (Recommended)
Install plugin like "Insert Headers and Footers" or "Code Snippets" and add the LuaPop initialization code to the footer.
## Shopify
```liquid theme={null}
```
## TypeScript Support
```typescript theme={null}
declare global {
interface Window {
LuaPop: {
init: (config: LuaPopConfig) => { destroy: () => void };
config?: LuaPopConfig;
};
}
}
interface LuaPopConfig {
agentId: string;
position?: "bottom-right" | "bottom-left" | "top-right" | "top-left";
buttonText?: string;
buttonColor?: string;
environment?: "staging" | "production" | "custom";
sessionId?: string;
authToken?: string;
displayMode?: "floating" | "embedded";
draggable?: boolean;
voiceModeEnabled?: boolean;
welcomeMessage?: string;
chatInputPlaceholder?: string;
chatTitle?: string;
onNavigate?: (pathname: string, options: { query: Record }) => void;
// ... other options
}
// Usage with type safety
window.LuaPop.init({
agentId: "your-agent-id",
position: "bottom-right" // TypeScript autocomplete works!
});
```
## Best Practices
```tsx theme={null}
// ✅ Good
agentId: process.env.REACT_APP_AGENT_ID
// ❌ Bad
agentId: "hardcoded-id"
```
```tsx theme={null}
useEffect(() => {
// Load script
const script = document.createElement('script');
document.body.appendChild(script);
// Cleanup
return () => {
document.body.removeChild(script);
};
}, []);
```
```tsx theme={null}
// Next.js - only run on client
useEffect(() => {
if (typeof window !== 'undefined') {
// Load LuaPop
}
}, []);
```
## Next Steps
Complete configuration options
See framework-specific examples