AE Web Paket

Ihr digitaler Mitarbeiter arbeitet für Sie 24/7/365 auf Ihrer Website. Er telefoniert, chattet, schreibt E‑Mails, begleitet, empfängt, spricht, verkauft, informiert, vermarktet, inspiriert und vieles mehr.
📞 💬 ✉️ 🤝 🏢 🗣 🛒 💡 📈 🌟

Ihr Angetstellter auf Ihrer Website --> auf dieser Seite ausprobieren!

Warum braucht man's?

Warum hat man Angestellte in einem Verkaufsgeschäft oder am Empfang?! Gleiches gilt für Ihre Website. Jemand, der 24/7/365 Ihre Interessen vertritt, berät, wirklich weiterhilft.

Das AE Web Paket macht aus Ihrer Website ein aktives Kommuikationszentrum: Interessenten, Kunden, Partner, Lieferanten, Besucher werden gehört und gelesen, können sprechen, schreiben und außergewöhnlich komfortabel Interagieren. Dabei werden die Ziele des Website-Betreibers die gesamte Zeit berücksichtig und aktiv unterstützt. Die Anliegen der Besucher werden qualifiziert, Kontaktdaten eingesammelt, ggf. erste Lösungswege aufgezeigt, passenden Ansprechpartner oder Termine vermittelt.

Mehr Leads
Mehr Verkaufschancen
Weniger teure Supportanfragen
Mehr Insights
Mehr ...?

Wer braucht sowas?

Für Website-Betreiber, die verstehen, dass in jedem Interessenten- und Kundenkontakt, Geschäfts-Potenzial steckt.

Ob Ein‑Personen‑Betrieb, KMU oder Konzern: Verwenden kann das jeder, der aus Interessenten und Kundenkontakten mehr machen möchte als nur Website-Besucher.

Website‑Betreiber
Unternehmer
Selbstständige
Für Sie geeignet?

Was kann es?

Das AE Web Paket stellt umfangreiche, sehr unterschiedliche Funktionen bereit, die eine sehr komfortable Interaktion mit Ihren Website-Besuchern ermöglichen.

Jede Komponente kann individuell konfiguriert und an Ihre Marke angepasst werden. Die Integration erfolgt über einfache HTML-Attribute in Ihrem bestehenden Content. Kann mit jedem Contet Management System oder Web-Baukästen zusammenarbeiten, welches erlaubt HTML Attribute zu bearbeiten. U.a. Wordpress, Typo3, Wix. Wir können es gemeinsam kurz Testen, wenn Sie unsicher sind. Kein Risiko.

Leistungsumfang

Context-Chat Panel

Wie ein Verkäufer in einem Ladengeschäft unterstützt dieses Panel den Besucher genau an der Stelle, wo er sich gerade bewegt oder hinschaut (Mauszeiger), mit dem was an dieser Stelle wünschenswert ist. Beispiel hier.

Es erscheint als kleines Overlay, stellt den digitalen Mitarbeiter vor, bietet Unterstützung an, informiert zum Produkt, etc. Das Panel kennt die Mausposition des Users und damit auch den Kontext. Er kann also auf etwas zeigen und dazu Fragen stellen, per Text oder Sprache. Klicken Sie hier um zu testen.

Sprechen und Zuhören - Hier als natürliches Gespräch
Zeigen und dazu Fragen
Dreifach-Klick als Frage oder Hilfe-Ruf
Tastatur-Shortcuts
Drag & Drop des Panels
Sprechen, Stoppen, erneut Sprechen lassen
Antwortsvorschläge und Nachfolge-Fragen
Website-Bereiche vorlesen
Link auf Frage oder Antwort
Alle Funktionen des Digitalen Mitarbeiters
Spotlight – Statischer Testeintrag (klicken zum Testen)
Website Führung
Website‑Funktionen ausführen

Classic-Chat

Das Classic-Chat ist ein vollständiges Chat-Overlay, das Besuchern eine umfassende Gesprächsmöglichkeit bietet. Es kann als schwebendes Fenster oder im Vollbild-Modus angezeigt werden. Öffnen Sie es über den KI Chat Button (FAB) in der rechten unteren Ecke oder per URL-Parameter. Beispiel hier.

Das Classic-Chat bietet Besuchern eine vollständige Chat-Erfahrung mit allen Funktionen des digitalen Mitarbeiters. Es eignet sich besonders für längere Gespräche, detaillierte Beratung oder wenn Besucher eine umfassende Interaktion wünschen.

Zwei Modi:

Floating (Schwebend): Kleines Fenster in der Ecke, bleibt während des Surfens sichtbar
Fullscreen (Vollbild): Nimmt den gesamten Bildschirm ein, maximale Aufmerksamkeit

KI Chat Button (FAB): Der KI Chat Button erscheint automatisch in der rechten unteren Ecke und öffnet das Classic-Chat. Er ist immer verfügbar und bietet schnellen Zugang zum Chat.

Benachrichtigungen: Wenn der Chat geschlossen ist und eine neue Nachricht eintrifft, erscheint eine Benachrichtigung (Badge + Sound). So verpassen Besucher keine Antworten.

Hintergrund-Lauf: Der Chat läuft im Hintergrund weiter, auch wenn Sie ihn schließen. Neue Nachrichten werden sofort angezeigt, wenn Sie den Chat wieder öffnen.

Funktionen: Alle Features des digitalen Mitarbeiters sind verfügbar – Text-Chat, Sprachinteraktion, Suggestion Chips, Verlaufsanzeige, Thread-History, Streaming-Responses und mehr.

🎯 Live-Vorschau: Probieren Sie die verschiedenen Modi aus:

KI Chat Button – Schneller Zugang
Floating-Modus – Schwebendes Fenster
Fullscreen-Modus – Vollbild
Benachrichtigungen – Badge + Sound
Hintergrund-Lauf – Chat läuft weiter
Thread-History – Gesprächsverlauf
Suggestion Chips – Antwortvorschläge
Streaming-Responses – Echtzeit-Antworten
URL-Parameter – Chat per Link öffnen
Alle Features verfügbar

Simple-Overlay

Das Simple-Overlay ist eine konservative Einstiegsoption für Menschen, die noch nicht mit KI vertraut sind. Es bietet identische Funktionalität wie Context Chat und Classic-Chat, aber mit einem einfachen, edlen Design ohne KI-Anmutung – perfekt für den ersten Kontakt mit digitalen Mitarbeitern. Beispiel hier.

Das Simple-Overlay erleichtert den Einstieg in digitale Mitarbeiter auf Websites. Es erscheint als einfaches, edles Overlay ohne KI-Anmutung (keine Avatar-Glows, keine Typing-Animationen, keine Bubble-Styles) und stellt Besuchern eine einfache Ja/Nein-Frage.

Ideal für:

Ersten Besuch: Auto-Open beim ersten Besuch der Website
Einstieg erleichtern: Konservative Option für Menschen, die noch nicht mit KI vertraut sind
Einfache Entscheidung: Klare Ja/Nein-Frage (z.B. "Diese Website kann mit Dir sprechen. Möchtest Du sprechen?")

Funktionsweise:

Text wird sofort fertig gerendert – keine Typing-Animation
Buttons aus Suggestions – i.d.R. 2 Buttons nebeneinander (z.B. "Ja" / "Nein")
JA-Button: Aktiviert TTS + STT, öffnet Context Chat
NEIN-Button: Klassisches Browsen, Overlay schließt sich

Design: Corporate-Farben aus Config, einfaches, edles Design ohne KI-Anmutung, responsive Positionierung wie Context Chat.

🎯 Live-Vorschau: Probieren Sie das Simple-Overlay aus:

Klicken Sie auf diesen Text um das Simple-Overlay zu sehen!

Completion-Anfrage im Simple-Overlay
Statischer Text mit mehreren Buttons
Follow-up als Simple-Overlay

Was ist es?

Es ist ein Web-Paket, gestaltet aus mehreren HTML, CSS, und Javascript Bausteinen. Es verleiht Ihrem digitalen Mitarbeiter Interaktionsmöglichkeiten auf Ihren Websites. Digitaler Mitarbeiter ist Voraussetzung.

Ihre Website wird um ca. 3 Zeilen HTML/CSS/JS erweitert. Minimal-Invasiv. Parametrisier- und Individualisierbar.

HTML Bausteine
CSS Styling
JavaScript Funktionalität
Parametrisierbar
Individualisierbar

Wie verwendet man's?

Schritt-für-Schritt Anleitung zur Integration:

📦 Aktuelle AE Web Pack Version: 1.0.0

Das AE Web Paket macht Ihre Website interaktiv: Besucher können mit Ihrem digitalen Mitarbeiter chatten, sprechen oder kontextuelle Hilfe zu bestimmten Texten erhalten. Die Integration erfolgt in nur 3 einfachen Schritten.

Voraussetzung: Digitaler Mitarbeiter

Bevor Sie das AE Web Paket verwenden können, benötigen Sie einen fertig eingerichteten Digitalen Mitarbeiter. Dieser ist die Basis für alle Interaktionen auf Ihrer Website. Erfahren Sie hier mehr über den Digitalen Mitarbeiter.

Schritt 1: Code einbinden

Sie erhalten von Tech4Humans wenige Zeilen HTML-Code und einen persönlichen Zugangscode. Diese fügen Sie einfach in Ihrer Website ein – fertig! Damit steht Ihnen sofort die volle Funktionalität zur Verfügung:

Classic-Chat (schwebendes Fenster oder Vollbild)
Context Chat (intelligentes Panel zu bestimmten Texten)
Simple-Overlay (konservative Einstiegsoption ohne KI-Anmutung)
Sprachinteraktion (Sprechen und Zuhören)
Interaktive Trigger (klickbare Wörter und Elemente)
Alle weiteren Funktionen, die Sie hier sehen

Beispiel-Code: Fügen Sie diese Zeilen in den <head> oder vor dem schließenden </body> Tag Ihrer Website ein:

<script src="https://tech4humans.de/services/ae_web_chat/pack_loader.js"
        data-api-key="IHR_ZUGANGSCODE"
        defer></script>

🎯 Live-Vorschau: Probieren Sie die Funktionen aus!

Schritt 2: Individuelle Anpassung (Optional)

Sie können eine individuelle Konfiguration einrichten, um das Erscheinungsbild und Verhalten an Ihre Corporate Identity anzupassen:

Layout und Design (Farben, Schriftarten, Größen)
Ansprache und Begrüßung
Spezial-Funktionen und individuelle Features

Sie können die Konfiguration selbst vornehmen oder optional übernehmen wir das für Sie – ganz nach Ihren Wünschen.

Schritt 3: Synchronisation einrichten (Optional)

Damit Ihr Digitaler Mitarbeiter auch detailliert auf Ihrer Website begleiten kann, richten wir eine regelmäßige Synchronisation ein:

Der Speicher Ihres Digitalen Mitarbeiters wird automatisch mit den Daten Ihrer Website synchronisiert. So kennt er/sie immer die aktuellen Inhalte, Produkte, Preise und alle wichtigen Informationen – und kann Besuchern präzise und hilfreich zur Seite stehen.

Hinweis: Die Schritte 2 und 3 sind optional. Sie können das AE Web Paket auch ohne individuelle Anpassung und Synchronisation nutzen – die Grundfunktionen stehen sofort zur Verfügung.

Für Web-Autoren: Integrationsbeispiele

Nachdem Sie den Code eingebunden haben, können Sie Trigger in Ihren Inhalten setzen. Hier finden Sie praktische Beispiele für die Integration:

Trigger im Inhalt setzen

Mit Triggern machen Sie bestimmte Texte oder Elemente auf Ihrer Website interaktiv. Besucher können darauf klicken oder mit der Maus darüberfahren, um Hilfe zu erhalten.

Einfachstes Beispiel: Machen Sie ein Wort klickbar, das beim Klick eine Erklärung zeigt:

<span data-aechat-id="hilfe-beispiel"
      data-aechat-type="static"
      data-aechat-prompt="Hier ist Ihre Erklärung..."
      data-aechat-open="click"
      data-aechat-target="context">
  Dieses Wort ist jetzt klickbar
</span>

🎯 Live-Vorschau: Klicken Sie auf das markierte Wort oder fahren Sie mit der Maus darüber:

Dies ist ein Beispiel-Text. Dieses Wort ist jetzt interaktiv und zeigt beim Klick oder Hover eine Erklärung im Context Chat Panel.

Website-Integration (CMS)

Das AE Web Paket funktioniert mit jedem Content Management System oder Web-Baukasten, der HTML-Attribute unterstützt. Der Code ist immer identisch – Sie fügen einfach die data-aechat-* Attribute zu Text-Elementen hinzu.

Unterstützte Systeme (Auswahl): WordPress, Wix, Joomla, Shopify, Typo3, Drupal, Squarespace, Webflow und alle anderen Systeme, die HTML-Attribute erlauben. Auch auf normalen HTML-Seiten funktioniert es problemlos.

Beispiel: Fügen Sie Trigger direkt in Ihren Beiträgen, Seiten oder Templates ein:

<span data-aechat-id="hilfe-beispiel"
      data-aechat-type="static"
      data-aechat-prompt="Hier ist Ihre Erklärung oder Hilfe..."
      data-aechat-visual="marker"
      data-aechat-open="click"
      data-aechat-target="context">
  Dieses Wort ist jetzt interaktiv
</span>

WordPress/Elementor: In WordPress gibt es verschiedene Möglichkeiten, HTML-Attribute zu pflegen. Mit Elementor gibt es die Möglichkeit, die Attribute in dieser Form zu notieren (Pipe-Format statt Gleichheitszeichen):

data-aechat-id|hp-text-entry-point
data-aechat-type|static
data-aechat-prompt|Hallo! Ich bin Tobi. Wie kann ich Dir helfen?
data-aechat-suggestions-static|Lackierkabine: Erzähl mir mehr über Lackierkabinen.++Unternehmen: Erzähl mir mehr über das Unternehmen.++Bedarf: Ich möchte eine Bedarfsklärung machen.
data-aechat-visual|chip-choice
data-aechat-open|click
data-aechat-delay|500
data-aechat-target|context
data-aechat-statement|ae-text-entry
data-aechat-statement-when|!ae-text-entry+ae-introduce-help

🎯 Live-Vorschau: Klicken Sie auf dieses Wort um zu sehen, wie es funktioniert!

Classic-Chat programmatisch öffnen

Um den Classic-Chat programmatisch zu öffnen, verwenden Sie JavaScript:

<button onclick="window.T4HChat?.open({ mode: 'floating' })">
  Chat öffnen
</button>

🎯 Live-Vorschau: Probieren Sie die verschiedenen Modi aus:

Optionen: mode: 'floating' (schwebend) oder mode: 'fullscreen' (Vollbild).

Vollständige Referenz: Alle Attribute (Master-Version)

Dieses Beispiel zeigt alle 15 Attribute mit allen verfügbaren Optionen und detaillierten Erklärungen für Web-Autoren:

<span 
  <!-- 1. ID (Identifikation) - ERFORDERLICH -->
  data-aechat-id="vollständiges-referenz-beispiel"
  
  <!-- 2. TYPE (Content-Typ) - ERFORDERLICH -->
  <!-- Optionen: static | completion | request -->
  data-aechat-type="static"
  
  <!-- 3. PROMPT (Content-Quelle) - ERFORDERLICH -->
  <!-- Statischer Text (type="static"), AI-Prompt (type="completion"), AE-Anfrage (type="request") -->
  data-aechat-prompt="Dies ist ein vollständiges Referenz-Beispiel für alle AE Chat Trigger Attribute und Optionen."
  
  <!-- 4. MODEL (AI-Model-Auswahl) - OPTIONAL -->
  <!-- Optionen: pro | premium | default (Standard: gpt-4o-mini) -->
  <!-- Model-Konfiguration: Siehe ae_web_chat_default_config.json → models -->
  data-aechat-model="pro"
  
  <!-- 5. VISUAL (Visuelle Effekte) - OPTIONAL -->
  <!-- Optionen: marker | spotlight | chip-choice | chip-pulse | marker+spotlight | marker+chip-choice | none -->
  <!-- Kombinationen: + für gleichzeitig (z.B. marker+spotlight) -->
  data-aechat-visual="marker+spotlight+chip-choice"
  
  <!-- 6. OPEN (Trigger-Auslöser) - OPTIONAL (Default: click) -->
  <!-- Optionen: click | hover | auto | click+hover | click,hover -->
  <!-- Kombinationen: + für gleichzeitig, , für nacheinander -->
  data-aechat-open="click+hover"
  
  <!-- 7. ACOUSTIC (Audio-Features) - OPTIONAL -->
  <!-- Optionen: tts | stt | tts+stt | none -->
  <!-- Kombinationen: + für gleichzeitig -->
  data-aechat-acoustic="tts+stt"
  
  <!-- 8. DELAY (Verzögerung) - OPTIONAL -->
  <!-- Wert: Verzögerung in Millisekunden (z.B. 2000 = 2 Sekunden) -->
  data-aechat-delay="2000"
  
  <!-- 9. TARGET (Ziel-Interface) - OPTIONAL (Default: context) -->
  <!-- Optionen: context | classic | context+classic -->
  <!-- Kombinationen: + für gleichzeitig -->
  data-aechat-target="context+classic"
  
  <!-- 10. ACTION (Zusätzliche Aktionen) - OPTIONAL -->
  <!-- Format: action-type:action-value -->
  <!-- Action-Typen: tour | anchor | url | function | none -->
  <!-- Kombinationen: + für gleichzeitig, , für nacheinander -->
  <!-- Beispiele: tour:main-tour | anchor:section1 | url:https://example.com | function:myFunction -->
  data-aechat-action="tour:main-tour+anchor:section1"
  
  <!-- 11. STATEMENT (Statement-Erstellung) - OPTIONAL -->
  <!-- Format: template-id1+template-id2 -->
  <!-- Kombinationen: + für gleichzeitig -->
  data-aechat-statement="demo-intro+usage-tracking+help-request"
  
  <!-- 12. STATEMENT VISIBILITY (Sichtbarkeit nach Statement-Status) - OPTIONAL -->
  <!-- Format: Ausdruck mit Operatoren + (UND), | (ODER), ! (NICHT) -->
  <!-- Matching-Mode: /exact (Standard), /prefix (Prefix-Match) -->
  <!-- Beispiele: !ae-introduce | consent-accept+!ae-introduce | !first-mic-usage|!first-speaker-usage -->
  data-aechat-statement-when="!ae-introduce+consent-accept"
  
  <!-- 13. SUGGESTIONS STATIC (Statische Suggestion Chips) - OPTIONAL -->
  <!-- Format: Label1:Text1++Label2:Text2 (++ = Separator) -->
  <!-- Erweiterte Syntax: Label:Text:::StatementId:ResponseText++Label2:Text2 -->
  <!-- Beispiele: "Ja:Ja, gerne++Nein:Nein, danke" oder "Sprechen:Lass uns sprechen:::hp-speech-entry-point:Großartig!++Schreiben:Lieber nur Schreiben" -->
  data-aechat-suggestions-static="Ja:Ja, gerne:::hp-speech-entry-point:Großartig!++Nein:Nein, danke"
  
  <!-- 14. SUGGESTIONS DYNAMIC (Dynamische Suggestion Chips) - OPTIONAL -->
  <!-- Format: leer/true/on (Standard-Prompt) oder zusätzlicher Prompt-Text -->
  <!-- Dynamische Chips werden von der AI generiert basierend auf dem Kontext -->
  data-aechat-suggestions-dynamic="true"
  
  <!-- 15. SUGGESTIONS ACTIONS (Action Suggestion Chips) - OPTIONAL -->
  <!-- Format: Label:action:value + Label2:action2:value2 (+ = Separator) -->
  <!-- Action-Typen: tour | anchor | url | function -->
  <!-- Beispiele: "Führung:tour:main-tour + Hilfe:anchor:help-section" -->
  data-aechat-suggestions-actions="Führung:tour:main-tour+Hilfe:anchor:help-section"
>
  Vollständiges Referenz-Beispiel
</span>

Stimmen-Auswahl: Hochwertige Azure Neural-Stimmen

Das AE Web Paket unterstützt hochwertige Azure Neural-Stimmen für natürliche Sprachausgabe. Wählen Sie aus professionellen Stimmen, filtern Sie nach Geschlecht, erstellen Sie Bundles und lassen Sie Texte von allen Stimmen im Bundle nacheinander vorlesen.

🎤 Stimmen-Auswahl öffnen – Interaktive Übersicht mit Filter, Bundle-Erstellung und Vorlese-Funktion.

Digitalen Mitarbeiter einrichten: Der digitale Mitarbeiter muss bereits arbeiten und konfiguriert sein.
Loader einbinden: Fügen Sie die 3 Zeilen Code in Ihre Website ein (siehe oben).
Optional: Kunden-JSON: Erstellen Sie eine eigene Konfigurationsdatei für individuelle Einstellungen.
Trigger setzen: Fügen Sie data-aechat-* Attribute zu Texten oder Elementen hinzu.
Stimme aktivieren: Optional können Sie Sprachfunktionen (Mikrofon/Lautsprecher) aktivieren.
Panel/Overlay positionieren: Classic-Chat kann als Floating oder Fullscreen angezeigt werden.
Fertig: Testen Sie die Integration live auf Ihrer Website!

Wie können Sie es bekommen?

Kurztermin vereinbaren oder direkt testen:

Wir integrieren den Loader, richten eine Kunden-JSON ein und schalten die wichtigsten Trigger frei. Auf Wunsch mit kleinen UIs, Site Functions und Reporting.

Kurztermin vereinbaren
Direkt testen
Loader integrieren
Kunden-JSON einrichten
Trigger freischalten
Optional: UIs, Functions, Reporting

Was kostet's?

Ab 400 € Setup für Basisintegration:

Erweiterungen wie Site Functions, zusätzliche UIs, Screenshots/Galerie und Reporting nach Aufwand.

Basisintegration: 400€
Kunden-JSON Setup
Zentrale Trigger
Site Functions (nach Aufwand)
Zusätzliche UIs (nach Aufwand)
Screenshots/Galerie (nach Aufwand)
Reporting (nach Aufwand)

Sie haben eine andere Frage dazu?

Fragen zur Integration, Datenschutz, Stimme oder Triggern? Starten Sie unten den KI‑Chat oder schreiben Sie uns – wir zeigen Live‑Beispiele auf Ihrer Website.

Interesse an AE Web Paket?

Lassen Sie uns gemeinsam Ihre individuellen Anforderungen besprechen und die passende Lösung für Ihr Unternehmen finden.

Mehr erfahren

Sofort ausprobieren

Nutzen Sie die Buttons in den Kacheln oben für interaktive Demos.