VoicePilot™ Integration Guide - Developer Experience

🚀 Quick Start

Starten Sie in weniger als 60 Sekunden mit VoicePilot. Kopieren Sie einfach diesen Code in Ihre Website:

HTML - Einfachste Integration

<!-- VoicePilot™ - Fügen Sie dies vor </body> ein -->
<script src="https://cdn.cloudfusion-it.de/v1/voicepilot.min.js"></script>
<script>
  const pilot = new VoicePilot({
    apiKey: 'Ihr-OpenAI-API-Key',
    language: 'de',
    autoStart: true
  });
</script>

🎉 Fertig! Ihre Website ist jetzt Voice-enabled. Drücken Sie die Leertaste und sprechen Sie mit Ihrer Website.

📦 Installation

Verschiedene Wege, VoicePilot in Ihr Projekt zu integrieren:

CDN Integration (Empfohlen)

Einfachste Methode für alle Websites:

CDN

<script src="https://cdn.cloudfusion-it.de/v1/voicepilot.min.js"></script>

NPM Installation

Für moderne JavaScript-Projekte:

Terminal

npm install @voicepilot/core
# oder
yarn add @voicepilot/core

ES6 Modules

Moderne Module-Syntax:

JavaScript

import VoicePilot from '@voicepilot/core';

const pilot = new VoicePilot({
  apiKey: process.env.OPENAI_API_KEY,
  language: 'de'
});

⚙️ Konfiguration

Passen Sie VoicePilot an Ihre Bedürfnisse an:

Vollständige Konfiguration

const pilot = new VoicePilot({
  // OpenAI Konfiguration
  apiKey: 'Ihr-OpenAI-API-Key',
  model: 'gpt-4', // oder 'gpt-3.5-turbo'
  
  // Sprache & Region
  language: 'de', // 'en', 'fr', 'es', 'it'
  voice: 'alloy', // TTS-Stimme
  
  // UI Konfiguration
  theme: 'dark', // 'light', 'auto'
  position: 'bottom-right', // Widget-Position
  hotkey: 'Space', // Aktivierungs-Taste
  
  // Features
  autoStart: true,
  voiceRecognition: true,
  textToSpeech: true,
  zeroClickCommerce: true,
  smartAnalysis: true,
  
  // E-Commerce
  currency: 'EUR',
  checkoutMode: 'zero-click', // 'traditional'
  
  // Callbacks
  onInit: () => console.log('VoicePilot bereit!'),
  onVoiceCommand: (command) => console.log('Command:', command),
  onPurchase: (item) => console.log('Gekauft:', item),
  onError: (error) => console.error('Fehler:', error)
});

💡 Tipp: Alle Konfigurationsoptionen sind optional. VoicePilot funktioniert out-of-the-box mit sinnvollen Defaults.

✨ Feature Overview

Entdecken Sie die mächtigen Features von VoicePilot:

🎤

Voice Recognition

Modernste Spracherkennung mit OpenAI Whisper API. Unterstützt 50+ Sprachen.

🧠

KI-Website-Analyse

Automatische Erkennung aller Website-Elemente und intelligente Handlungsempfehlungen.

🗣️

Text-to-Speech

Natürliche Sprachausgabe mit verschiedenen Stimmen und Sprachen.

⚡

Zero-Click Commerce

Revolutionäres Einkaufserlebnis ohne Klicks. Kunde spricht, KI handelt.

🎯

Smart Targeting

KI erkennt Benutzerintentionen und macht personalisierte Vorschläge.

📱

Responsive Design

Perfekte Funktion auf Desktop, Tablet und Mobile. PWA-ready.

🎨 Anpassung

Passen Sie VoicePilot an Ihr Corporate Design an:

CSS Customization

CSS - Custom Styling

/* VoicePilot Custom Styling */
.voicepilot-widget {
  --vp-primary: #your-brand-color;
  --vp-secondary: #your-secondary-color;
  --vp-border-radius: 20px;
  --vp-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

.voicepilot-button {
  background: linear-gradient(135deg, #your-gradient);
  border-radius: var(--vp-border-radius);
}

.voicepilot-modal {
  backdrop-filter: blur(20px);
  background: rgba(255, 255, 255, 0.1);
}

JavaScript Customization

JavaScript - Custom Commands

// Custom Voice Commands definieren
pilot.addCommand('zeige produkte', () => {
  // Navigiere zur Produktseite
  window.location.href = '/products';
});

pilot.addCommand('kontakt aufnehmen', () => {
  // Öffne Kontaktformular
  document.getElementById('contact-modal').show();
});

// Custom E-Commerce Integration
pilot.onPurchaseIntent((product, quantity) => {
  // Ihre E-Commerce Logic
  addToCart(product, quantity);
  showCheckout();
});

🔌 API Reference

Vollständige API-Dokumentation für erweiterte Integration:

Core Methods

JavaScript API

// VoicePilot Instanz erstellen
const pilot = new VoicePilot(config);

// Voice Recognition starten/stoppen
pilot.startListening();
pilot.stopListening();

// Text-to-Speech
pilot.speak('Hallo! Wie kann ich Ihnen helfen?');

// Website analysieren
const analysis = await pilot.analyzeWebsite();

// Commands hinzufügen
pilot.addCommand('custom command', callback);

// Events abonnieren
pilot.on('voiceCommand', (command) => {});
pilot.on('purchase', (item) => {});
pilot.on('error', (error) => {});

// Widgets anzeigen/verstecken
pilot.showWidget();
pilot.hideWidget();

// Konfiguration zur Laufzeit ändern
pilot.updateConfig({ theme: 'light' });

⚠️ Sicherheit: Speichern Sie Ihren OpenAI API-Key niemals im Frontend. Verwenden Sie einen Proxy-Server oder Environment Variables.

💡 Beispiele

Praktische Implementierungsbeispiele für verschiedene Use Cases:

E-Commerce Shop

E-Commerce Integration

<script>
const pilot = new VoicePilot({
  apiKey: 'your-api-key',
  language: 'de',
  zeroClickCommerce: true,
  currency: 'EUR',
  
  // Custom Product Commands
  onInit: () => {
    pilot.addCommand('zeige smartphones', () => {
      window.location.href = '/smartphones';
    });
    
    pilot.addCommand('kaufe iphone', async () => {
      const product = await findProduct('iPhone');
      pilot.speak(`iPhone gefunden für ${product.price}€. Soll ich es für Sie bestellen?`);
    });
  }
});
</script>

Business Website

Business Integration

<script>
const pilot = new VoicePilot({
  apiKey: 'your-api-key',
  language: 'de',
  theme: 'corporate',
  
  onInit: () => {
    pilot.addCommand('termin buchen', () => {
      pilot.speak('Ich öffne das Buchungssystem für Sie.');
      showBookingModal();
    });
    
    pilot.addCommand('preise anzeigen', () => {
      document.getElementById('pricing').scrollIntoView();
      pilot.speak('Hier sind unsere aktuellen Preise.');
    });
  }
});
</script>

5-Sekunden Integration