> ## Documentation Index > Fetch the complete documentation index at: https://docs.usevela.ai/llms.txt > Use this file to discover all available pages before exploring further. # Widget Installation > Add the Ansa chat widget to your website ## Quick Installation Add the chat widget to any website with a simple script tag. Go to **Settings > Widget** in your dashboard and copy the embed code. Paste the code before the closing `` tag on your website. ## Embed Code ```html theme={null} ``` ## Platform Guides Add to your theme's `footer.php` or use a plugin like "Insert Headers and Footers": 1. Go to **Settings > Insert Headers and Footers** 2. Paste the embed code in the "Scripts in Footer" section 3. Save changes 1. Go to **Online Store > Themes** 2. Click **Actions > Edit code** 3. Find `theme.liquid` 4. Paste embed code before `` 5. Save 1. Go to **Project Settings > Custom Code** 2. Paste in "Footer Code" section 3. Publish your site Create a component: ```jsx theme={null} 'use client'; import { useEffect } from 'react'; export default function AnsaWidget() { useEffect(() => { window.__ansa_config = { agentId: process.env.NEXT_PUBLIC_ANSA_AGENT_ID, apiUrl: process.env.NEXT_PUBLIC_ANSA_API_URL, url: process.env.NEXT_PUBLIC_ANSA_WIDGET_URL, }; const script = document.createElement('script'); script.src = `${process.env.NEXT_PUBLIC_ANSA_WIDGET_URL}/embed.min.js`; script.async = true; document.body.appendChild(script); return () => { document.body.removeChild(script); }; }, []); return null; } ``` Add to your layout: ```jsx theme={null} import AnsaWidget from '@/components/AnsaWidget'; export default function RootLayout({ children }) { return ( {children} ); } ``` ```vue theme={null} ``` ## Verifying Installation 1. Visit your website 2. Look for the chat button in the bottom-right corner 3. Click to open the widget 4. Send a test message If the widget doesn't appear: * Check browser console for errors * Verify your agent ID is correct * Ensure the embed code is before `` * Check that your domain is not blocked