Bravin AI

Einführung

Das Bravin AI Widget ist ein leichtgewichtiges JavaScript-Snippet, das eine Chat-Oberfläche zu Ihrer Website hinzufügt. Dieser Leitfaden behandelt die Installation, Anpassung und Fehlerbehebung.

Voraussetzungen:

Zugriff auf den HTML-Code Ihrer Website
Bravin AI API-Schlüssel
Grundkenntnisse in HTML/CSS (optional)

Grundlegende Installation

Schritt 1: API-Schlüssel abrufen Melden Sie sich bei Bravin AI an und gehen Sie zu Einstellungen → API-Schlüssel.

Schritt 2: Das Snippet hinzufügen Fügen Sie diesen Code vor dem schließenden </body>-Tag ein:

Ersetzen Sie YOUR_API_KEY_HERE durch Ihren tatsächlichen API-Schlüssel!

Installationscode

<script>
  (function(w,d,s,o,f,js,fjs){
    w['BravinWidget']=o;
    w[o]=w[o]||function(){(w[o].q=w[o].q||[]).push(arguments)};
    js=d.createElement(s),fjs=d.getElementsByTagName(s)[0];
    js.id=o;js.src=f;js.async=1;
    fjs.parentNode.insertBefore(js,fjs);
  }(window,document,'script','bw','https://widget.bravin.ai/v1/widget.js'));
  
  bw('init', {
    apiKey: 'YOUR_API_KEY_HERE',
    position: 'bottom-right',
    theme: 'light'
  });
</script>

Launcher-Positionierung

Verfügbare Positionen:

bottom-right (Standard)
bottom-left
top-right
top-left

Benutzerdefinierte Position: Verwenden Sie CSS, um die Platzierung fein abzustimmen:

Benutzerdefiniertes CSS

#bravin-widget {
  bottom: 20px !important;
  right: 20px !important;
  /* Mobile adjustments */
  @media (max-width: 768px) {
    bottom: 10px !important;
    right: 10px !important;
  }
}

Benutzerdefinierte Gestaltung

Markenfarben: Passen Sie das Widget an Ihre Marke an:

Verwenden Sie die Hex-Farben Ihrer Marke für primaryColor. Das Widget generiert automatisch Komplementärfarben.

Theme-Konfiguration

bw('init', {
  apiKey: 'YOUR_API_KEY',
  theme: {
    primaryColor: '#FF6B00',
    textColor: '#333333',
    backgroundColor: '#FFFFFF',
    launcherIcon: 'chat',
    fontFamily: 'Inter, sans-serif'
  }
});

Erweiterte Konfiguration

Benutzeridentifikation: Übergeben Sie Benutzerdaten für eine personalisierte Erfahrung:

Benutzer identifizieren

bw('identify', {
  userId: '12345',
  name: 'John Doe',
  email: 'john@example.com',
  customAttributes: {
    plan: 'enterprise',
    signupDate: '2024-01-15'
  }
});

Erweiterte Konfiguration (Fortsetzung)

Benutzerdefinierte Ereignisse: Lösen Sie das Widget programmatisch aus:

Widget-Steuerung

// Open widget
bw('open');

// Close widget
bw('close');

// Send custom event
bw('track', 'page_viewed', { page: 'pricing' });

// Pre-fill message
bw('open', { message: 'I need help with pricing' });

Laden überprüfen

1. Visuelle Überprüfung:

Widget-Launcher erscheint in der Ecke
Klicken öffnet die Chat-Oberfläche
Nachrichten senden und empfangen Antworten

2. Konsolenprüfung: Öffnen Sie die Browser-DevTools (F12) → Konsole. Sie sollten sehen:

Keine Fehler? Super! Ihr Widget funktioniert einwandfrei.

Erwartete Konsolenausgabe

[Bravin AI] Widget loaded successfully
[Bravin AI] Connected to server
[Bravin AI] Agent ready

Fehlerbehebung

Widget wird nicht angezeigt:

Überprüfen Sie, ob der API-Schlüssel korrekt ist
Stellen Sie sicher, dass das Skript vor </body> steht
Suchen Sie nach JavaScript-Fehlern in der Konsole
Stellen Sie sicher, dass keine Ad Blocker stören

Widget lädt, antwortet aber nicht:

Überprüfen Sie, ob das Konto ein aktives Abonnement hat
Stellen Sie sicher, dass der Agent veröffentlicht ist (nicht im Entwurf)
Überprüfen Sie den Netzwerk-Tab auf API-Fehler
Stellen Sie sicher, dass die Firewall widget.bravin.ai nicht blockiert

Styling-Probleme:

Überprüfen Sie auf CSS-Konflikte mit Ihrer Website
Verwenden Sie !important, um widersprüchliche Stile zu überschreiben
Überprüfen Sie, ob die Theme-Farben gültige Hex-Codes sind

Haben Sie immer noch Probleme? Kontaktieren Sie support@bravin.ai mit Ihrer Website-URL und den Konsolenfehlern.

Website-Integration: Skript & CSS

Einführung

Grundlegende Installation

Launcher-Positionierung

Benutzerdefinierte Gestaltung

Erweiterte Konfiguration

Erweiterte Konfiguration (Fortsetzung)

Laden überprüfen

Fehlerbehebung

War diese Anleitung hilfreich?

Nächste Schritte

Agentenstimme anpassen

Leistung verfolgen