Eigenschaften & Konfiguration

<EvoloChatbot
  language="en"
  style={{
    active: "light",
    light: {
      headerBgColor: "#2563eb",
      headerTextColor: "#ffffff",
      primaryColor: "#2563eb",
      backgroundColor: "#ffffff",
      textColor: "#1f2937",
      borderRadius: "12px",
      userMessageBg: "#2563eb",
      userMessageColor: "#ffffff",
      assistantMessageBg: "#f8fafc",
      assistantMessageColor: "#334155"
    },
    position: {
      side: "bottom-right",
      right: 20,
      bottom: 20
    }
  }}
  apiEndpoint={apiEndpoint}
/>

<EvoloChatbot
  language="en"
  style={{
    active: "dark",
    dark: {
      headerBgColor: "#1e1e1e",
      headerTextColor: "#ffffff",
      primaryColor: "#60a5fa",
      backgroundColor: "#1e1e1e",
      textColor: "#f1f5f9",
      secondaryTextColor: "#94a3b8",
      borderColor: "#334155",
      borderRadius: "16px",
      userMessageBg: "#60a5fa",
      userMessageColor: "#ffffff",
      assistantMessageBg: "#2d2d2d",
      assistantMessageColor: "#f1f5f9"
    },
    position: {
      side: "bottom-right",
      right: 24,
      bottom: 24
    }
  }}
  apiEndpoint={apiEndpoint}
/>

<EvoloChatbot
  language="en"
  style={{
    active: "light",
    light: {
      headerBgColor: "#059669",
      headerTextColor: "#ffffff",
      primaryColor: "#059669",
      accentColor: "#d1d5db",
      backgroundColor: "#ffffff",
      textColor: "#111827",
      borderColor: "#e5e7eb",
      borderRadius: "20px",
      userMessageBg: "#059669",
      userMessageColor: "#ffffff",
      assistantMessageBg: "#f0fdf4",
      assistantMessageColor: "#14532d"
    },
    position: {
      side: "bottom-right",
      right: 16,
      bottom: 16
    }
  }}
  apiEndpoint={apiEndpoint}
/>

// Unten-links Positionierung
<EvoloChatbot
  language="en"
  style={{
    active: "light",
    position: {
      side: "bottom-left",
      left: 24,
      bottom: 24
    }
  }}
  apiEndpoint={apiEndpoint}
/>

// Benutzerdefinierte unten-rechts Positionierung
<EvoloChatbot
  language="en"
  style={{
    active: "light",
    position: {
      side: "bottom-right",
      right: 32,
      bottom: 32
    }
  }}
  apiEndpoint={apiEndpoint}
/>

{
  "cookies": {
    "title": "Cookie Consent",
    "description": "We use session tracking to improve your experience. Do you consent to this?",
    "acceptText": "Accept Cookies",
    "declineText": "Only Essential"
  },
  "header": {
    "title": "Your Assistant",
    "subtitle": "Ask me anything, I'm here to help you"
  },
  "messages": {
    "userName": "You",
    "assistantName": "Assistant",
    "placeholder": "Type your message here...",
    "initialMessage": "Hello! How can I help you today?",
    "warning": "AI can make mistakes",
    "error": "An error occurred while processing your request."
  },
  "footer": {
    "support": "Visit our help center"
  }
}

{
  "cookies": {
    "title": "Cookie-Zustimmung",
    "description": "Cookies helfen uns mit Ihren Daten Ihre Erfahrung zu verbessern. Stimmen Sie dem zu?",
    "acceptText": "Cookies akzeptieren",
    "declineText": "Nur wesentlich"
  },
  "header": {
    "title": "Ihr Assistent",
    "subtitle": "Frag mich alles, ich bin hier um zu helfen"
  },
  "messages": {
    "userName": "Sie",
    "assistantName": "Assistent",
    "placeholder": "Geben Sie Ihre Nachricht hier ein...",
    "initialMessage": "Hallo! Wie kann ich Ihnen heute helfen?",
    "warning": "KI kann Fehler machen",
    "error": "Ein Fehler ist aufgetreten, während Ihre Anfrage verarbeitet wurde."
  },
  "footer": {
    "support": "Support"
  }
}

<EvoloChatbot
  language="es"
  translations={{
    es: {
      cookies: {
        title: "Consentimiento de Cookies",
        description: "Usamos seguimiento de sesión para mejorar su experiencia. ¿Consiente a esto?",
        acceptText: "Aceptar Cookies",
        declineText: "Solo Esenciales"
      },
      header: {
        title: "Su Asistente",
        subtitle: "Pregúnteme cualquier cosa, estoy aquí para ayudarle"
      },
      messages: {
        userName: "Usted",
        assistantName: "Asistente",
        placeholder: "Escriba su mensaje aquí...",
        initialMessage: "¡Hola! ¿Cómo puedo ayudarle hoy?",
        warning: "La IA puede cometer errores",
        error: "Ocurrió un error al procesar su solicitud."
      },
      footer: {
        support: "Visite nuestro centro de ayuda"
      }
    }
  }}
  apiEndpoint={apiEndpoint}
/>