Menni Chatbot

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

Features

• 🎨 Customizable UI
• 🔄 Real-time chat functionality
• 📱 Responsive design
• 🔒 Secure authentication with secret key
• 🎯 Position customization (left/right)
• 🌐 Custom welcome messages in any language
• 💬 Customizable tooltip messages for better user engagement
• 🚀 Auto-open functionality for specific pages
• ⚡ 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
      secretKey="your-secret-key"
      position="bottom-right"
      defaultOpen={false}
      welcomeMessage="Hello! How can I help you today?"
      tooltipMessages={[
        "Hi 👋, how may i help you?",
        "Hi 👋, Now you can ask me anything related to bookings. Would you like me to book something for you? 🤔✨",
      ]}
    />
  );
}

Vue

<template>
  <MenniChatBot
    secretKey="your-secret-key"
    position="bottom-right"
    :defaultOpen="false"
    welcomeMessage="Hello! How can I help you today?"
    :tooltipMessages="[
      'Hi 👋, how may i help you?',
      'Hi 👋, Now you can ask me anything related to bookings. Would you like me to book something for you? 🤔✨',
    ]"
  />
</template>

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

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

Localization Support

The Menni Chatbot widget supports full localization through customizable message props. You can provide your own welcome message and tooltip messages in any language to match your website's localization:

• welcomeMessage: Customize the initial greeting message that users see when they open the chatbot
• tooltipMessages: Provide an array of tooltip messages that appear to encourage user interaction

This ensures a seamless user experience that matches your website's language and tone, improving user engagement and accessibility across different markets.

Props

| Prop | Type | Required | Default | Description | | ------------------- | ------------------------------- | -------- | -------------- | --------------------------------------------- | | secretKey | string | Yes | - | Menni Secret key | | menniBokunSecretKey | string | No | - | Menni Bokun integration secret key | | welcomeMessage | string | No | - | Welcome message in language of your choice | | tooltipMessages | string[] | No | - | Array of tooltip messages to display | | defaultOpen | boolean | No | false | Whether the chatbot should be open by default | | position | 'bottom-left' | 'bottom-right' | No | 'bottom-right' | Position of the chatbot on the screen |

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

License

ISC

Author

Menni