Erste Schritte

Diese Anleitung hilft Ihnen dabei, Evolo Chatbot in Ihrem Projekt zu installieren und zu konfigurieren. Die Bibliothek unterstützt sowohl React-Anwendungen als auch direkte Browser-Verwendung.

Installation

Installieren Sie zuerst das Evolo Chatbot Paket und seine Peer-Dependencies:

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

pnpm add @evolo/chatbot @ai-sdk/react ai react react-dom

yarn add @evolo/chatbot @ai-sdk/react ai react react-dom

Peer-Dependencies

Die Bibliothek benötigt die folgenden Peer-Dependencies:

react (^18.0.0 || ^19.0.0)
react-dom (^18.0.0 || ^19.0.0)
ai (^5.0.0)
@ai-sdk/react (^2.0.0)

Stellen Sie sicher, dass alle Peer-Dependencies installiert sind, da sie für die ordnungsgemäße Funktion des Chatbots erforderlich sind.

Grundlegende Verwendung

React-Komponenten-Verwendung

So verwenden Sie Evolo Chatbot in Ihrer React-Anwendung:

import React from 'react';
import { EvoloChatbot } from 'evolo-chatbot';

function App() {
  return (
    <div className="App">
      {/* Ihr App-Inhalt */}
      <h1>Meine Anwendung</h1>
      <EvoloChatbot
        language="en"
        apiEndpoint={{
          session: "https://evolo-api.com/session",
          consent: "https://evolo-api.com/consent",
          chat: "https://evolo-api.com/chat"
        }}
      />
    </div>
  );
}

export default App;

UMD (Browser-Script) Verwendung

Für die direkte Browser-Verwendung ohne Build-System können Sie die UMD-Version verwenden:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Meine Website mit Evolo Chatbot</title>
</head>
<body>
  <h1>Willkommen auf meiner Website</h1>
  
  <!-- React and ReactDOM -->
  <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
  
  <!-- Evolo Chatbot -->
  <script src="https://unpkg.com/evolo-chatbot/dist/evolo-chatbot.umd.js"></script>
  
  <div id="chatbot-container"></div>
  
  <script>
    const { EvoloChatbot } = window.EvoloChatbot;
    
    // Create chatbot element
    const chatbotElement = React.createElement(EvoloChatbot, {
        language: 'en',
        apiEndpoint: {
            session: 'https://evolo-api.com/session',
            consent: 'https://evolo-api.com/consent',
            chat: 'https://evolo-api.com/chat'
        }
    });
    
    // Render chatbot
    ReactDOM.render(chatbotElement, document.getElementById('chatbot-container'));
  </script>
</body>
</html>

Konfigurationsschritte

API-Endpunkte einrichten

Konfigurieren Sie Ihre Backend-API-Endpunkte für Session-Management, Zustimmungsbehandlung und Chat-Verarbeitung. Siehe den Abschnitt API-Nutzung für detaillierte Anforderungen.

const apiEndpoint = {
  session: "https://evolo-api.com/api/session",
  consent: "https://evolo-api.com/api/consent", 
  chat: "https://evolo-api.com/api/chat"
};

Sprache und Übersetzungen konfigurieren

Stellen Sie die Sprache ein und passen Sie optional die Übersetzungen an:

<EvoloChatbot
  language="en" // oder "de" für Deutsch
  translations={{
    en: {
      header: {
        title: "Benutzerdefinierter Assistent",
        subtitle: "Wie kann ich Ihnen heute helfen?"
      },
      // ... weitere Übersetzungen
    }
  }}
  apiEndpoint={apiEndpoint}
/>

Styling anpassen

Konfigurieren Sie das Erscheinungsbild mit benutzerdefinierten Themes und Positionierung:

<EvoloChatbot
  language="en"
  style={{
    active: "light", // or "dark"
    position: {
      side: "bottom-right", // or "bottom-left"
      right: 20,
      bottom: 20
    },
    light: {
      primaryColor: "#54acbc",
      backgroundColor: "#ffffff",
      // ... other theme properties
    }
  }}
  apiEndpoint={apiEndpoint}
/>

Support-URL hinzufügen

Geben Sie einen Support-Link im Footer an, um zu Ihrer Support-Seite zu verlinken:

<EvoloChatbot
  language="en"
  apiEndpoint={apiEndpoint}
  supportUrl="https://your-website.com/support"
  showPoweredBy={true} // "Powered by" Text anzeigen/verstecken
/>

Minimales Beispiel

Hier ist ein vollständiges minimales Beispiel für den Einstieg:

import React from 'react';
import { EvoloChatbot } from 'evolo-chatbot';

export default function MyApp() {
return (
  <>
    <main>
      <h1>Meine Anwendung</h1>
      {/* Ihr App-Inhalt */}
    </main>
    
    <EvoloChatbot
      language="en"
      apiEndpoint={{
        session: "https://evolo-api.com/session",
        consent: "https://evolo-api.com/consent",
        chat: "https://evolo-api.com/chat"
      }}
    />
  </>
);
}

<!DOCTYPE html>
<html>
<head>
  <title>Meine Website</title>
</head>
<body>
  <h1>Meine Website</h1>
  
  <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/dist/evolo-chatbot.umd.js"></script>
  
  <div id="chatbot"></div>
  
  <script>
      ReactDOM.render(
          React.createElement(window.EvoloChatbot.EvoloChatbot, {
              language: 'en',
              apiEndpoint: {
                  session: 'https://evolo-api.com/session',
                  consent: 'https://evolo-api.com/consent',
                  chat: 'https://evolo-api.com/chat'
              }
          }),
          document.getElementById('chatbot')
      );
  </script>
</body>
</html>

Das Chatbot-Widget erscheint standardmäßig als schwebende Schaltfläche in der rechten unteren Ecke. Benutzer können darauf klicken, um die Chat-Oberfläche zu öffnen.

Nächste Schritte

Eigenschaften konfigurieren - Lernen Sie alle verfügbaren Konfigurationsoptionen kennen
API-Nutzung - Richten Sie Ihre Backend-API-Endpunkte ein
Erkunden Sie erweiterte Styling- und Theme-Optionen

Erste Schritte

On this page