Menni Chatbot

A modern chatbot component for React and Vue applications with customizable UI and seamless integration.

Features

• 🎨 Customizable UI with light/dark themes
• 🔄 Real-time chat functionality
• 📱 Responsive design
• 🔒 Secure authentication with public key
• 🎯 Position customization (left/right)
• 💬 Customizable tooltip text
• ⚡ Easy integration with React and Vue applications

Installation

npm install @menni/chatbot
# or
yarn add @menni/chatbot

Usage

React

import { MenniChatBot } from "@menni/chatbot/react";

function App() {
  return (
    <MenniChatBot
      uniqueId="your-unique-id"
      publicKey="your-public-key"
      tooltipText="Need help?"
      theme="light"
      position="right"
    />
  );
}

Vue

<template>
  <MenniChatBot
    uniqueId="your-unique-id"
    publicKey="your-public-key"
    tooltipText="Need help?"
    theme="light"
    position="right"
  />
</template>

<script>
import { MenniChatBot } from "@menni/chatbot/vue";

export default {
  components: {
    MenniChatBot,
  },
};
</script>

Props

Framework Compatibility

• React 17, 18, and 19
• Next.js 13 and 14 ('use client' directive required)
• Create React App
• Vite

Development

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

Release Process

When you need to publish a new version of the package, follow these steps:

1. Make your changes and commit them to git
2. Update the version in package.json (e.g., from 1.0.0 to 1.0.1)
3. Create and push a git tag:

git tag v1.0.1  # Replace with your new version
git push origin v1.0.1

Version Guidelines

• For bug fixes: increment the last number (1.0.0 → 1.0.1)
• For new features: increment the middle number (1.0.0 → 1.1.0)
• For breaking changes: increment the first number (1.0.0 → 2.0.0)

License

ISC

Author

Menni