@evolo/chatbot

A modern, customizable React chatbot component that integrates seamlessly with Evolo's AI chatbot APIs. Built with TypeScript and designed for easy embedding in any React application.

✨ Features

• 🎨 Fully Customizable - Light/dark themes with extensive styling options
• 🌍 Multi-language Support - Built-in translations (English, German) with custom translation support
• 📱 Responsive Design - Mobile-friendly with flexible positioning
• 🍪 GDPR Compliant - Built-in cookie consent management
• ⚡ Real-time Chat - Powered by AI SDK with streaming responses
• 📝 Markdown Support - Rich message formatting with markdown-to-jsx
• 🔧 TypeScript Ready - Full type safety and IntelliSense support
• 📦 Multiple Formats - ES modules, CommonJS, and UMD builds

🚀 Quick Start

Installation

npm install @evolo/chatbot @ai-sdk/react ai react react-dom

Basic Usage

import { EvoloChatbot } from "@evolo/chatbot";

function App() {
  return (
    <EvoloChatbot
      language="en"
      apiEndpoint={{
        session: "https://your-api.com/api/session",
        consent: "https://your-api.com/api/session/consent",
        chat: "https://your-api.com/api/chat",
      }}
    />
  );
}

UMD/Script Tag Usage

<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@evolo/chatbot@latest/dist/evolo-chatbot.umd.js"></script>
<script>
  const rootElement = document.getElementById("root");
  const root = ReactDOM.createRoot(rootElement);
  const lib = window.EvoloChatbot;

  const chatbotProps = {
    language: "en",
    theme: { active: "dark" },
    apiEndpoint: {
      session: "/api/chat/session",
      consent: "/api/chat/session/consent",
      chat: "/api/chat",
    },
  };

  const appElement = React.createElement(lib.EvoloChatbot, chatbotProps);
  root.render(appElement);
</script>

🎨 Customization

Themes

The chatbot comes with beautiful built-in light and dark themes that you can customize:

<EvoloChatbot
  language="en"
  style={{
    active: "dark", // or "light"
    position: {
      side: "bottom-right", // or "bottom-left"
      right: 20,
      bottom: 20
    },
    light: {
      primaryColor: "#54acbc",
      backgroundColor: "#ffffff",
      textColor: "#1f2937",
      userMessageBg: "#54acbc",
      assistantMessageBg: "#f3f4f6",
      borderRadius: "15px"
    },
    dark: {
      primaryColor: "#54acbc",
      backgroundColor: "#121212",
      textColor: "#f9fafb",
      userMessageBg: "#54acbc",
      assistantMessageBg: "#2a2a2a",
      borderRadius: "15px"
    }
  }}
  apiEndpoint={{...}}
/>

Custom Translations

Add your own languages or customize existing translations:

<EvoloChatbot
  language="fr"
  translations={{
    fr: {
      header: {
        title: "Votre Assistant",
        subtitle: "Demandez-moi n'importe quoi, je suis là pour vous aider"
      },
      messages: {
        placeholder: "Tapez votre message ici...",
        initialMessage: "Bonjour! Comment puis-je vous aider aujourd'hui?",
        assistantName: "Assistant",
        userName: "Vous"
      },
      cookies: {
        title: "Consentement aux cookies",
        acceptText: "Accepter les cookies",
        declineText: "Seulement essentiels"
      }
    }
  }}
  apiEndpoint={{...}}
/>

🔧 API Integration

Required Endpoints

Evolo Chatbot is powered by the following API endpoints. Evolo offers ready to deploy server solutions. Get in touch.

1. Session Endpoint (POST /api/session)

Initialize a chat session and return consent status.

2. Consent Endpoint (PUT /api/session/consent)

Update user tracking consent.

3. Chat Endpoint (POST /api/chat)

AI chat endpoint compatible with AI SDK.

📋 Props Reference

| Prop | Type | Default | Description | | --------------- | --------- | --------------- | ----------------------------------------- | | language | string | "en" | Language code for translations | | translations | object | - | Custom translations object | | style | object | Built-in themes | Theme and positioning configuration | | apiEndpoint | object | - | Required. API endpoints configuration | | showPoweredBy | boolean | true | Show "Powered by Evolo" footer | | supportUrl | string | - | Optional support/help center URL |

Theme Properties

interface EvoloChatTheme {
  headerBgColor?: string;
  headerTextColor?: string;
  primaryColor?: string;
  secondaryColor?: string;
  accentColor?: string;
  backgroundColor?: string;
  textColor?: string;
  secondaryTextColor?: string;
  borderColor?: string;
  borderRadius?: string;
  userMessageBg?: string;
  userMessageColor?: string;
  assistantMessageBg?: string;
  assistantMessageColor?: string;
  errorBgColor?: string;
  errorTextColor?: string;
  errorBorderColor?: string;
}

🌍 Supported Languages

• English (en) - Default
• German (de) - Built-in
• Custom - Add your own translations

🔒 Privacy & Compliance

The chatbot includes built-in GDPR compliance features:

• Cookie consent management
• User tracking preferences
• Privacy policy integration
• Consent status persistence

🏗️ Development

Prerequisites

• Node.js 16+
• React 18+ or 19+
• TypeScript (recommended)

📦 Package Formats

The library is distributed in multiple formats:

• ES Modules (evolo-chatbot.es.js) - Modern bundlers
• UMD (evolo-chatbot.umd.js) - Browser script tags

🆘 Support

• 📧 Email: [email protected]
• 📚 Documentation: docs.evolo.com

🏢 About Evolo

Evolo provides cutting-edge AI solutions for businesses of all sizes. Our platform combines advanced natural language processing with intuitive user experiences to help you engage with your customers more effectively.

Made with ❤️ by Evolo