JSPM – ai-chat-widget-agionic@1.0.16

Package Exports

ai-chat-widget-agionic

Readme

AI Chat Widget For Your Website. Add an AI chat agent to your website that answers questions and drives sales 24/7.

Installation

npm install ai-chat-widget-agionic
# or
yarn add ai-chat-widget-agionic
# or
pnpm add ai-chat-widget-agionic

Getting Your User ID

Log in to your Agionic dashboard at https://www.agionic.com/login
Navigate to installation
Copy your User ID

All other configuration (business name, avatar, greeting message, theme, etc.) is managed through your Agionic dashboard and will be automatically applied when the widget loads.

Usage

Choose your framework/environment:

Plain JavaScript (Browser)
TypeScript / React
Next.js (App Router)
Astro
Svelte
Vue.js

Plain JavaScript (Browser)

<script type="module">
  import { createChat } from 'ai-chat-widget-agionic';
  createChat('your-user-id');
</script>

TypeScript / React

import { createChat } from 'ai-chat-widget-agionic';
createChat('your-user-id');

Next.js (App Router)

// app/components/ChatWidget.tsx
'use client';

import { useEffect } from 'react';
import { createChat } from 'ai-chat-widget-agionic';

export default function ChatWidget() {
  useEffect(() => {
    createChat('your-user-id');
  }, []);

  return null;
}

// app/layout.tsx
import ChatWidget from './components/ChatWidget';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        {children}
        <ChatWidget />
      </body>
    </html>
  );
}

Astro

---
// components/AgionicChat.astro
---

<script>
  import { createChat } from 'ai-chat-widget-agionic';
  createChat('your-user-id');
</script>

---
// layouts/Layout.astro
import AgionicChat from '../components/AgionicChat.astro';
---

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Your Site</title>
  </head>
  <body>
    <slot />
    <AgionicChat />
  </body>
</html>

Svelte

<!-- components/ChatWidget.svelte -->
<script lang="ts">
  import { onMount } from 'svelte';
  import { createChat } from 'ai-chat-widget-agionic';

  onMount(() => {
    createChat('your-user-id');
  });
</script>

<!-- App.svelte -->
<script>
  import ChatWidget from './components/ChatWidget.svelte';
</script>

<main>
  <h1>Your App</h1>
</main>

<ChatWidget />

Vue.js

<!-- components/ChatWidget.vue -->
<template>
  <div></div>
</template>

<script setup>
import { onMounted } from 'vue';
import { createChat } from 'ai-chat-widget-agionic';

onMounted(() => {
  createChat('your-user-id');
});
</script>

<!-- App.vue -->
<template>
  <div>
    <router-view />
    <ChatWidget />
  </div>
</template>

<script setup>
import ChatWidget from './components/ChatWidget.vue';
</script>

License

MIT

ai-chat-widget-agionic