chatbot-web-sdk

Lightweight web SDK to load the Avya chatbot widget in React, Next.js, Nuxt, and plain JavaScript applications.

Features

• Single config object setup
• Supports React, Next.js, Nuxt, and plain JS
• Automatically injects the widget script only once
• Runtime config updates with updateChatWidgetConfig
• Optional widget cleanup with destroyChatWidget
• Works with both JavaScript and TypeScript projects

Install

npm install chatbot-web-sdk

API Key Configuration

This package requires a valid API key to enable AI-powered chatbot functionality.

To obtain the customized API key, please visit https://chat.avya.lk/ and register there. For further information, please contact through https://avya.lk/contact-us/.

Configuration Options

You can also select and manage these configurations from the Playground section in https://chat.avya.lk/.

| Property | Type | Default | Description | | --- | --- | --- | --- | | title | string | required | Title displayed in the chat header | | themeColor | string | #007BFF | Primary color for the chat widget | | initialMessage | string | Hi! How can I help you today? | Bot's greeting message | | apiKey | string | "" | API key for backend authentication | | profilePicUrl | string | null | URL for bot profile image |

Nuxt (TypeScript Plugin)

Create plugins/chat-widget.client.ts:

import { createNuxtChatWidgetPlugin } from "chatbot-web-sdk/nuxt";

export default defineNuxtPlugin(
  createNuxtChatWidgetPlugin({
    title: "My ChatBot test",
    themeColor: "#D91D1D",
    initialMessage: "Hi! How can I help you today?",
    profilePicUrl: "https://chat.avya.lk/images/logo.webp",
    apiKey: "<YOUR_API_KEY>",
  })
);

Nuxt (JavaScript Plugin)

Create plugins/chat-widget.client.js:

import { createNuxtChatWidgetPlugin } from "chatbot-web-sdk/nuxt";

export default defineNuxtPlugin(
  createNuxtChatWidgetPlugin({
    title: "My ChatBot test",
    themeColor: "#D91D1D",
    initialMessage: "Hi! How can I help you today?",
    profilePicUrl: "https://chat.avya.lk/images/logo.webp",
    apiKey: "<YOUR_API_KEY>",
  })
);

Nuxt (Vue app.vue)

<script setup>
import { onMounted } from "vue";
import { initChatWidget } from "chatbot-web-sdk";

const config = {
  title: "My ChatBot test",
  themeColor: "#D91D1D",
  initialMessage: "Hi! How can I help you today?",
  profilePicUrl: "https://chat.avya.lk/images/logo.webp",
  apiKey: "<YOUR_API_KEY>",
};

onMounted(() => {
  initChatWidget(config);
});
</script>

<template>
  <div>Nuxt App</div>
</template>

React (TSX)

import { useChatWidget } from "chatbot-web-sdk/react";
import type { ChatConfig } from "chatbot-web-sdk";

const config: ChatConfig = {
  title: "My ChatBot test",
  themeColor: "#D91D1D",
  initialMessage: "Hi! How can I help you today?",
  profilePicUrl: "https://chat.avya.lk/images/logo.webp",
  apiKey: "<YOUR_API_KEY>",
};

export default function App() {
  useChatWidget(config);
  return <div>React App</div>;
}

React (JSX)

import { useChatWidget } from "chatbot-web-sdk/react";

const config = {
  title: "My ChatBot test",
  themeColor: "#D91D1D",
  initialMessage: "Hi! How can I help you today?",
  profilePicUrl: "https://chat.avya.lk/images/logo.webp",
  apiKey: "<YOUR_API_KEY>",
};

export default function App() {
  useChatWidget(config);
  return <div>React App</div>;
}

React (Next.js App Router)

"use client";

import { useChatWidget } from "chatbot-web-sdk/react";

const config = {
  title: "My ChatBot test",
  themeColor: "#D91D1D",
  initialMessage: "Hi! How can I help you today?",
  profilePicUrl: "https://chat.avya.lk/images/logo.webp",
  apiKey: "<YOUR_API_KEY>",
};

export default function Page() {
  useChatWidget(config);
  return <div>Next App</div>;
}

For more references and code guidance for other languages, please visit https://chat.avya.lk/.