1.0.6 • Published 4 months ago
agionic-chat-widget v1.0.6
Agionic Chat Widget
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 agionic-chat-widget
# or
yarn add agionic-chat-widget
# or
pnpm add agionic-chat-widgetUsage
Plain JavaScript (Browser)
<script type="module">
import { createChat } from 'agionic-chat-widget';
createChat('your-user-id');
</script>TypeScript / React
import { createChat } from 'agionic-chat-widget';
createChat('your-user-id');Next.js (App Router)
// app/components/ChatWidget.tsx
'use client';
import { useEffect } from 'react';
import { createChat } from 'agionic-chat-widget';
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 'agionic-chat-widget';
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 'agionic-chat-widget';
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 'agionic-chat-widget';
onMounted(() => {
createChat('your-user-id');
});
</script>
<!-- App.vue -->
<template>
<div>
<router-view />
<ChatWidget />
</div>
</template>
<script setup>
import ChatWidget from './components/ChatWidget.vue';
</script>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.
License
MIT