> ## Documentation Index
> Fetch the complete documentation index at: https://docs.animam.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Installation

> Integrate the Animam widget on your website

Add the Animam widget to your website with one line of code.

## Basic integration

Copy this code just before the `</body>` tag on your website:

```html theme={null}
<script
  src="https://animam.ai/widget.js"
  data-tenant="YOUR_SLUG"
></script>
```

<Note>
  Replace `YOUR_SLUG` with your tenant slug (visible in the dashboard URL).
</Note>

## Verification

After integration, the widget appears in the bottom right of your page. Click it to open the chat.

## Frameworks

### Next.js / React

```tsx theme={null}
// app/layout.tsx or pages/_app.tsx
import Script from 'next/script'

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Script
          src="https://animam.ai/widget.js"
          data-tenant="your-slug"
          strategy="lazyOnload"
        />
      </body>
    </html>
  )
}
```

### Vue.js / Nuxt

```vue theme={null}
<!-- nuxt.config.ts -->
export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          src: 'https://animam.ai/widget.js',
          'data-tenant': 'your-slug',
          defer: true
        }
      ]
    }
  }
})
```

### WordPress

Use the official **Animam plugin** ([github.com/animam-ai/animam.ai/tree/master/wordpress/animam](https://github.com/animam-ai/animam.ai/tree/master/wordpress/animam)). It ships the widget, syncs your content (posts, pages, custom post types) to the agent's knowledge base, and routes visitor actions through the plugins you already use (WPForms, WooCommerce, MailPoet) — no separate Animam capture surface, leads/orders/subscriptions land natively.

Or, if you only want the widget without auto-sync, drop this snippet in your theme `footer.php` before `</body>`:

```php theme={null}
<script src="https://animam.ai/widget.js" data-tenant="your-slug"></script>
```

### Shopify

1. Go to **Online Store > Themes > Edit code**
2. Open `theme.liquid`
3. Add the script before `</body>`

## Next steps

<CardGroup cols={2}>
  <Card title="Configuration" icon="gear" href="/widget/configuration">
    Customize the widget appearance
  </Card>

  <Card title="Segments" icon="layers" href="/widget/segments">
    Contextualize based on pages
  </Card>
</CardGroup>
