chat-widget-embed v1.0.4

Chat Widget Embed

A lightweight, embeddable chat widget for any chatbot API.

Installation

Basic HTML

<script 
  async
  src="https://cdn.jsdelivr.net/npm/chat-widget-embed@1.0.4/chat-widget.js" 
  data-api-endpoint="http://localhost:3000"
  data-bot-id="testbot">
</script>

NPM Installation

npm install chat-widget-embed

Usage

React

import { useEffect } from 'react';
import { ChatWidgetEmbed } from 'chat-widget-embed';

function App() {
  useEffect(() => {
    ChatWidgetEmbed.init({
      apiEndpoint: 'http://localhost:3000',
      botId: 'testbot'
    });
  }, []);

  return <div>Your App Content</div>;
}

Vue

<template>
  <div>Your App Content</div>
</template>

<script>
import { onMounted } from 'vue';
import { ChatWidgetEmbed } from 'chat-widget-embed';

export default {
  setup() {
    onMounted(() => {
      ChatWidgetEmbed.init({
        apiEndpoint: 'http://localhost:3000',
        botId: 'testbot'
      });
    });
  }
}
</script>

Angular

import { Component, OnInit } from '@angular/core';
import { ChatWidgetEmbed } from 'chat-widget-embed';

@Component({
  selector: 'app-root',
  template: '<div>Your App Content</div>'
})
export class AppComponent implements OnInit {
  ngOnInit() {
    ChatWidgetEmbed.init({
      apiEndpoint: 'http://localhost:3000',
      botId: 'testbot'
    });
  }
}

Next.js

// pages/_app.js or any component
import { useEffect } from 'react';
import dynamic from 'next/dynamic';

// Dynamically import the chat widget
const ChatWidgetEmbed = dynamic(
  () => import('chat-widget-embed').then((mod) => mod.ChatWidgetEmbed),
  { ssr: false }
);

function MyApp({ Component, pageProps }) {
  useEffect(() => {
    ChatWidgetEmbed.init({
      apiEndpoint: 'http://localhost:3000',
      botId: 'testbot'
    });
  }, []);

  return <Component {...pageProps} />;
}

export default MyApp;

Configuration Options

The widget can be configured using either data attributes or the init function:

• apiEndpoint: Your API base URL (e.g., 'http://localhost:3000')
• botId: Your bot ID (e.g., 'testbot')

The widget will make requests to: {apiEndpoint}/api/cortex/ask?model={botId}&q=message&stream=false

Development

1. Clone the repository
2. Make changes to chat-widget.js
3. Update version in package.json
4. Publish to npm:

npm publish

The widget will be automatically available through jsDelivr at https://cdn.jsdelivr.net/npm/chat-widget-embed@VERSION/chat-widget.js