Menni Chatbot

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

Upgrading from v1.x? v3.0.0 is a faster, lazy-loading widget with a new auth model and improved infrastructure — see Migrating from v1 below.

Features

• ⚡ Lazy-loaded — renders only a lightweight launcher button; the full chat loads on first click, so it barely touches your page's load time and Core Web Vitals
• 🎨 Customizable UI
• 🔄 Real-time chat functionality
• 📱 Responsive design
• 🔒 Per-org universal id with origin allowlist
• 🎯 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
      id="your-widget-id"
      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
    id="your-widget-id"
    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

The id prop is required and must be issued by your Menni dashboard.

| Prop | Type | Required | Default | Description | | --------------- | -------- | -------- | ------------ | ----------------------------------------------------------------------- | | id | string | Yes | - | Universal widget id issued by your Menni dashboard (required) | | secretKey | string | No | - | ⚠️ DEPRECATED — Use id instead. Will be removed in future version | | position | string | No | bottom-right | Widget position: bottom-left, bottom-right | | defaultOpen | boolean | No | false | Auto-open chat on page load | | welcomeMessage | string | No | - | Custom greeting message (supports any language) | | tooltipMessages | string[] | No | - | Array of rotating tooltip messages |

About the id

The widget id is a public, per-org identifier you generate in the Menni dashboard. It is visible in your page source — security is enforced server-side by the origin allowlist configured on the id, not by keeping the value secret. Integrations (e.g. Bokun) attached to your org are resolved automatically once the id authenticates.

Migrating from v1

As of v3.0.0, the package has significant changes from v1.x:

Authentication Changes

The secretKey prop is deprecated as of v3.0.0 and will be removed in a future version. You must migrate to the id prop:

Before (v1.x):

<MenniChatBot
  secretKey="sk_xxx"
  menniBokunSecretKey="bk_xxx"
  position="bottom-right"
/>

After (v3.0.0+):

<MenniChatBot id="your-widget-id" position="bottom-right" />

Migration Steps

1. Remove menniBokunSecretKey — Bokun credentials are now resolved server-side from your organization's stored integration
2. Replace secretKey with id — Get your universal widget id from your Menni dashboard
3. Update all implementations across your application
4. Test thoroughly before deploying to production

Key Differences in v3.0.0

• Lazy-loaded widget — Improved performance and Core Web Vitals
• Zero runtime dependencies — Smaller bundle size
• Server-side integration resolution — Bokun and other integrations configured in dashboard
• Universal id authentication — Replaces legacy secretKey

⚠️ Note: While v3.0.0 still accepts secretKey for backward compatibility, it will throw deprecation warnings in your IDE. Please migrate to id as soon as possible.

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