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 unternehmerischen Interessen vertritt, berät und 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?

Website-Betreiber die annehmen, dass in jedem Interessenten- und Kundenkontakt, Potenzial für WIN-WIN 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.

Context-Chat Panel (kontextuelle Hilfe im Inhalt)
Classic-Chat (vollständiges Chat-Overlay, floating oder fullscreen)
Simple-Overlay (konservative Einstiegsvariante ohne KI-Anmutung)
Section-Vorlesen (Abschnitte per Lautsprecher-Symbol vorlesen lassen)
Website-Feedback: Daumen-Buttons unten links + Feedback-Trigger im Inhalt
Kommentar-Overlay für positives/negatives Feedback (mit Kontext-Erfassung)
Extended Contact/KVP-Formular für kontinuierliche Verbesserung
Copy & Deeplink Standard (Text/DeepLink kopieren)

Leistungsumfang

Context Chat →

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

Das Context Chat Fenster erscheint kontextuell an der Stelle, wo Besucher mit der Maus zeigen oder klicken. Es erkennt die Mausposition und damit den Kontext des aktuellen Inhalts.

Sprechen und Zuhören – Hier als natürliches Gespräch
Zeigen und dazu Fragen
Dreifach-Klick als Frage oder Hilferuf
Sprechen, Stoppen, erneut Sprechen lassen
Website-Bereiche vorlesen
Link auf Frage oder Antwort
Spotlight: Text, Eltern.Eltern.Text, Individueller Spot
Tastenkombinationen
Ziehen und Ablegen des Fensters
Antwortsvorschläge und Nachfolge-Fragen
Nachfolge-Aktionen
Website-Führung
Alle Funktionen des Digitalen Mitarbeiters
Website‑Funktionen ausführen

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.

GUI-Elemente erklärt – Tour durch alle Buttons
Tour-Steuerung erklärt – Navigation durch Touren
FAB-Buttons unten rechts erklärt
Feedback-Buttons erklärt
Alle AWP Steuerungselemente – Komplette Übersicht
Sprechen und Zuhören - Hier als natürliches Gespräch
Zeigen und dazu Fragen
Dreifach-Klick als Frage oder Hilferuf
Tastatur-Shortcuts
Drag & Drop des Panels
Sprechen, Stoppen, erneut Sprechen lassen
Antwortsvorschläge und Nachfolge-Fragen
URL-Follow-Up – Link im Chip
Website-Bereiche vorlesen
Link auf Frage oder Antwort
Alle Funktionen des Digitalen Mitarbeiters
Spotlight: TextEltern.Eltern.TextIndividueller Spot
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

Website-Feedback & KVP

Mit dem Website-Feedback sammeln Sie strukturierte Rückmeldungen direkt dort ein, wo sie entstehen: Globale Daumen-Buttons links unten und Feedback-Trigger im Inhalt liefern kontextbezogene Bewertungen und Kommentare – optional mit "Reaktion erwünscht" und Kontaktaufnahme. Beispiel hier.

Das Website-Feedback-Modul erweitert das AE Web Paket um bewertbares Nutzerfeedback direkt aus der Website. Besucher können mit Daumen hoch/runter oder über kleine Daumen-Symbole im Inhalt Feedback geben. Ein kommentierbares Overlay erlaubt es, positives oder negatives Feedback in strukturierter Form zu hinterlassen – inklusive Kontext (Seite, Abschnitt, Element) und optionaler Kontaktmöglichkeit für Rückfragen.

Reaktion erwünscht: Aktiviert ein Extended Contact/KVP-Formular im Overlay. Besucher können Vorname, Nachname, E-Mail, Telefon und "WhatsApp bevorzugt" angeben. Diese Daten werden wie im Tech4Humans-Kontakt/KVP-Dialog vorbefüllt, persistent gespeichert (LocalStorage) und in Statements/E-Mails genutzt.

Datendrehscheibe: Alle Feedbacks werden in ein standardisiertes Statement-Template (z. B. awp-website-feedback-standard) geschrieben – inkl. Kontext, Bewertung (Daumen hoch/runter), Kommentar und optionalen Kontaktdaten. Parallel kann eine E-Mail an definierte Empfänger gesendet werden (KVP/Feedback-Postfach).

Globale Daumen-Buttons (links unten)
Feedback-Trigger im Inhalt (data-awp-feedback)
Kommentar-Overlay (positiv/negativ)
Extended Contact/KVP-Formular
Statements & E-Mail-Benachrichtigungen

Copy & Deeplink

Mit dem Copy & Deeplink Standard können Besucher Inhalte oder DeepLinks mit einem Klick in die Zwischenablage kopieren – im Chat (Meta-Bar), im Website-Feedback-Overlay und an beliebigen Stellen auf der Seite über data-awp-copy. Automatisch aktiviert für alle Sektionen-Titel (H1, H2) und Feature-Titel auf Solution-Seiten.

Der Copy & Deeplink Standard macht Sharing und Nachvollziehbarkeit deutlich einfacher. Über zentral konfigurierte SVG-Icons (Copy- und Link-Symbol) können Inhalte kopiert oder DeepLinks auf bestimmte Stellen der Seite erzeugt werden. Die Logik ist Teil des AE Web Packs und kann sowohl im Chat (Meta-Bar), im Website-Feedback-Overlay als auch direkt im Content genutzt werden.

Automatische Funktion: Auf Tech4Humans Solution-Seiten werden alle Sektionen-Titel (H1, H2) und Feature-Titel automatisch mit Copy-Link-Icons versehen. Die Funktion generiert automatisch IDs (slugified aus dem Titel-Text) und fügt die notwendigen Attribute hinzu – keine manuelle Konfiguration erforderlich.

Konfiguration: Icons und Texte werden zentral in der AE-Web-Pack-Config gepflegt (z. B. config.feedback.icons.copyText/copyLink und config.feedback.copy.toastText.*). Damit bleiben Layout und Verhalten über alle Einsatzorte konsistent. Das Modul copy-link.js erkennt Elemente mit data-awp-copy="deeplink" automatisch und injiziert das Copy-Icon mit vollständiger Copy-to-Clipboard-Funktionalität.

Text kopieren
DeepLink kopieren
Scope-Steuerung (element/section/page)
Toast-Hinweise beim Kopieren

Local Storage Form Management

Mit dem Local Storage Form Management werden Formulardaten automatisch gespeichert und beim nächsten Besuch wiederhergestellt – ohne zusätzlichen Code. Einfach data-awp-ls-data-collection-id am Formular setzen und fertig. Beispiel hier.

Das Local Storage Form Management macht Formulare benutzerfreundlicher, indem Eingaben automatisch gespeichert und beim nächsten Besuch wiederhergestellt werden. Besucher müssen nicht mehr alle Felder erneut ausfüllen – die Daten bleiben erhalten, auch wenn die Seite versehentlich geschlossen wird.

Automatisches Speichern: Bei jedem change Event werden alle Formularfelder automatisch im Local Storage gespeichert. Ausnahmen können über data-awp-ls-exclude="true" definiert werden.

Automatisches Laden: Beim Seitenladen werden gespeicherte Daten automatisch in die Formularfelder geladen. So können Besucher nahtlos dort weitermachen, wo sie aufgehört haben.

Intelligente Datenstruktur: User-Daten (z.B. firstName, email) werden automatisch ins User-Profil gemappt. Assistant-Daten (mit assistant_* Prefix) werden in customDataCollections gespeichert – getrennt vom User-Profil.

DSGVO-konform: Alle Daten werden lokal gespeichert und nur mit expliziter Zustimmung an Backend-Services übertragen. Ohne Consent werden Daten nur im SessionStorage gepuffert.

Basis-Integration – Ein Attribut genügt
Feldausnahmen – Honeypot-Felder ausschließen
Intelligentes Mapping – User vs. Assistant-Daten
Konfiguration – Auto-Save/Load steuern
DSGVO-konform – Lokale Speicherung mit Consent-Check

AE Web Completion

Mit AE Web Completion können Formularfelder automatisch ausgefüllt werden – basierend auf anderen Feldern. Perfekt für Anrede, Geschlecht oder andere Felder, die aus Kontext abgeleitet werden können. Beispiel hier.

AE Web Completion nutzt KI, um Formularfelder intelligent auszufüllen. Basierend auf anderen Feldern (z.B. Vorname) werden passende Werte vorgeschlagen – z.B. Anrede (Herr/Frau) oder Geschlecht (Male/Female/Diverse) aus dem Vornamen.

Deklarative Steuerung: Über HTML-Attribute können Sie Completion pro Feld aktivieren. Keine Programmierung nötig – einfach data-awp-field-completion und data-awp-field-source setzen und fertig.

Standard‑Prompt: Wenn data-awp-field-prompt leer ist, wird automatisch der Standard‑Prompt web-completion-data-field-fill aus awp_standard_prompts.js verwendet. Dieser ermittelt basierend auf Source‑Feld (Name, Typ, Wert) und Target‑Feld (Name, Typ, Optionen) den passenden Wert.

Custom‑Prompt: Mit data-awp-field-prompt können Sie eigene Prompts definieren. Wenn der Wert ein Standard‑Prompt aus awp_standard_prompts.js ist, wird dieser verwendet, sonst als individueller Prompt.

Typ-sichere Validierung: Wenn das Completion-Ergebnis nicht zum Feld-Typ passt (z.B. ungültiger Enum-Wert), bleibt das Feld leer und der Fehler wird geloggt – keine falschen Werte werden eingetragen.

Basis-Integration – Zwei Attribute genügen
Source-Feld-Referenz – Automatische Feld-Erkennung
Standard-Prompt – Automatische Verwendung
Custom-Prompt – Standard oder individuell
Typ-sichere Validierung – Keine falschen Werte
Standard-Funktion – webCompletionDataFieldFill

DSGVO-Management

Das DSGVO-Management sorgt für rechtssichere Kommunikation auf Ihrer Website. Automatische Consent-Verwaltung, Double-Opt-In, Privacy-Policy-Hinweise und Human-Gate/Bot-Detection schützen Sie und Ihre Besucher. Beispiel hier.

Das DSGVO-Management ist eine zentrale Komponente des AE Web Pakets und sorgt für vollständige DSGVO-Konformität bei allen Interaktionen. Es umfasst Consent-Verwaltung, Double-Opt-In-Flows, Privacy-Policy-Hinweise und Human-Gate/Bot-Detection.

Automatische Consent-Verwaltung: Der Consent-Status wird automatisch verwaltet und in Statements dokumentiert. Besucher können jederzeit zustimmen oder ablehnen – alle Entscheidungen werden nachvollziehbar gespeichert.

Double-Opt-In: Bei neuen Kontakten wird automatisch ein Double-Opt-In-Prozess gestartet. Besucher erhalten eine E-Mail oder WhatsApp-Nachricht mit Bestätigungslink – erst nach Bestätigung ist der Consent aktiv.

Privacy-Policy-Hinweise: Identifizierte Kontakte werden automatisch über aktuelle Privacy-Policies informiert und können jederzeit widersprechen. Alle Hinweise werden dokumentiert und nachvollziehbar gespeichert.

Human-Gate/Bot-Detection: Automatische Erkennung von Bot-Aktivitäten schützt vor Missbrauch und reduziert Kosten. Verdächtige Aktivitäten werden blockiert, echte Besucher werden nicht beeinträchtigt.

Automatische Consent-Verwaltung – Nachvollziehbar dokumentiert
Double-Opt-In – Automatische Bestätigung
Privacy-Policy-Hinweise – Automatische Information
Human-Gate/Bot-Detection – Schutz vor Missbrauch
Consent-Statements – Vollständige Dokumentation

Contact Form Management

Mit Contact Form Management werden Kontaktformulare automatisch verarbeitet: Kontakte werden angelegt, Consent (DOi) orchestriert, Owner- und Besucher-Nachrichten versendet und in der mailHistory dokumentiert. Einfach data-awp-contact="true" am Formular setzen und fertig. Beispiel hier.

Das Contact Form Management automatisiert die komplette Verarbeitung von Kontaktformularen. Bei jedem Submit orchestriert der Endpunkt /hub/contacts/contact_management den Kontakt-Upsert, Consent (Double-Opt-In, sofern nicht unterdrückt) sowie Owner- und Besucher-Nachrichten – ohne zusätzlichen Code.

Automatische Kontaktanlage: Formulardaten werden gesammelt und Account-basiert angelegt/aktualisiert. Alle Felder werden gemappt (z.B. firstName → FirstName), SecureId priorisiert für Empfänger.

Nachrichtenversand: Owner-Kanal kommt aus Formular/Config, Visitor-Kanal aus Formularfeldern (z.B. preferWhatsapp/Email). Versand läuft intern über send_message_to_contact_ep.

Local Storage Persistierung: Versendete Nachrichten können in context.mailHistory dokumentiert werden (max. 100 Einträge).

Event-System: Bei Erfolg wird awp:contact-form:success, bei Fehler awp:contact-form:error dispatcht.

Basis-Integration – Ein Attribut genügt
Kommunikationskanal – Email oder WhatsApp
Pro-Form-Email – Spezifische Empfänger
Betreff – Optionaler Topic
Mail History – Automatische Dokumentation

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.

🔄 WICHTIG – Aktualisierung: Das AE Web Paket nutzt jetzt das neue NEXT_TRIGGER System für alle Trigger-Sequenzen. Die alte Follow-Up-Syntax (:::StatementId:ResponseText) wird nicht mehr unterstützt. Verwenden Sie stattdessen die neue Syntax: :::NextTrigger in Suggest-Chips oder das neue data-awp-next Attribut. Siehe vollständige Referenz unten für Details.

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-awp-id="hilfe-beispiel"
      data-awp-type="static"
      data-awp-prompt="Hier ist Ihre Erklärung..."
      data-awp-open="click"
      data-awp-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-awp-* 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-awp-id="hilfe-beispiel"
      data-awp-type="static"
      data-awp-prompt="Hier ist Ihre Erklärung oder Hilfe..."
      data-awp-visual="marker"
      data-awp-open="click"
      data-awp-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-awp-id|hp-text-entry-point
data-awp-type|static
data-awp-prompt|Hallo! Ich bin Tobi. Wie kann ich Dir helfen?
data-awp-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-awp-visual|chip-choice
data-awp-open|click
data-awp-delay|500
data-awp-target|context
data-awp-statement|ae-text-entry
data-awp-statement-when|!ae-text-entry+ae-introduce-help

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

Website-Feedback & KVP – technische Details

Globale Daumen-FABs werden in der AE-Web-Pack-Config aktiviert (config.feedback.fab.enabled), Inline-Trigger erhalten data-awp-feedback. Das Overlay übernimmt automatisch Kontext, Statement und die erweiterten Kontaktfelder (Reaktion erwünscht).

<!-- Globale FABs in config/ae_web_pack_default_config.json -->
"feedback": {
  "fab": { "enabled": true, "defaultMode": "commentOverlay" }
}

<!-- Inline Trigger mit Kontext -->
<span
  data-awp-feedback="true"
  data-awp-feedback-mode="commentOverlay"
  data-awp-scope="section"
  data-awp-feedback-context="Website › Leistungen › Hero">
  👍 Feedback zu diesem Abschnitt
</span>

Aktiviert der Besucher Reaktion erwünscht, blendet das Overlay automatisch die zusätzlichen Felder ein (Vorname, Nachname, E-Mail, Telefon, WhatsApp bevorzugt) und übergibt sie an Statement + E-Mail.

Copy & Deeplink Standard – technische Details

Zum Kopieren wird data-awp-copy verwendet. data-awp-scope steuert, ob Text, Section oder Seite kopiert wird. Icons und Toast-Texte kommen aus config.feedback.icons.copy* und config.feedback.copy.toastText.*.

<button data-awp-copy="text" data-awp-scope="element">
  Text kopieren
</button>

<button data-awp-copy="deeplink" data-awp-scope="section">
  Deeplink kopieren
</button>

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-awp-id="vollständiges-referenz-beispiel"
  
  <!-- 2. TYPE (Content-Typ) - ERFORDERLICH -->
  <!-- Optionen: static | completion | request -->
  data-awp-type="static"
  
  <!-- 3. PROMPT (Content-Quelle) - ERFORDERLICH -->
  <!-- Statischer Text (type="static"), AI-Prompt (type="completion"), AE-Anfrage (type="request") -->
  data-awp-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-awp-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-awp-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-awp-open="click+hover"
  
  <!-- 7. ACOUSTIC (Audio-Features) - OPTIONAL -->
  <!-- Optionen: tts | stt | tts+stt | none -->
  <!-- Kombinationen: + für gleichzeitig -->
  data-awp-acoustic="tts+stt"
  
  <!-- 8. DELAY (Verzögerung) - OPTIONAL -->
  <!-- Wert: Verzögerung in Millisekunden (z.B. 2000 = 2 Sekunden) -->
  data-awp-delay="2000"
  
  <!-- 9. TARGET (Ziel-Interface) - OPTIONAL (Default: context) -->
  <!-- Optionen: context | classic | context+classic -->
  <!-- Kombinationen: + für gleichzeitig -->
  data-awp-target="context+classic"
  
  <!-- 10. ACTION (Zusätzliche Aktionen) - OPTIONAL -->
  <!-- Format: action-type:action-value oder action-type:action-value:when-option|delay:ms -->
  <!-- Action-Typen: tour | anchor | url | function | none -->
  <!-- Timing-Optionen: immediate | after-delivery | after-user-input | after-suggest-chip | delay:ms -->
  <!-- Kombinationen: + für gleichzeitig, , für nacheinander -->
  <!-- Beispiele: tour:main-tour | tour:main-tour:after-delivery|delay:1000 | anchor:section1 | url:https://example.com | function:myFunction -->
  data-awp-action="tour:main-tour:after-delivery|delay:1000"
  
  <!-- 11. NEXT TRIGGER (Nächster Trigger nach diesem) - OPTIONAL -->
  <!-- Format: target:when-option|delay:ms -->
  <!-- Target-Typen: trigger-id | action:... | url:... | site-function:... | temp:... -->
  <!-- Timing-Optionen: immediate | after-delivery | after-user-input | after-suggest-chip | delay:ms -->
  <!-- Beispiele: trigger-2:after-delivery | action:tour:t4h-tour:after-delivery | url:/page#section:immediate | site-function:gehe-zu:delay:2000 -->
  data-awp-next="trigger-2:after-delivery|delay:1000"
  
  <!-- 12. STATEMENT (Statement-Erstellung) - OPTIONAL -->
  <!-- Format: template-id1+template-id2 -->
  <!-- Kombinationen: + für gleichzeitig -->
  data-awp-statement="demo-intro+usage-tracking+help-request"
  
  <!-- 13. 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-awp-statement-when="!ae-introduce+consent-accept"
  
  <!-- 14. SUGGESTIONS STATIC (Statische Suggestion Chips) - OPTIONAL -->
  <!-- Format: Label1:Text1++Label2:Text2 (++ = Separator) -->
  <!-- Erweiterte Syntax: Label:Text:::NextTrigger++Label2:Text2 -->
  <!-- NextTrigger kann sein: trigger-id | action:... | url:... | site-function:... -->
  <!-- Variante 1: Ein Attribut mit ++ Separator -->
  <!-- Variante 2: Mehrere data-awp-suggest-static Attribute (Reihenfolge = Anzeige-Reihenfolge) -->
  <!-- Beispiele: "Ja:Ja, gerne++Nein:Nein, danke" oder "Tour:Tour starten:::tour:t4h-tour++Weiter:Weiter zum nächsten:::trigger-2" -->
  data-awp-suggestions-static="Tour:Tour starten:::tour:t4h-tour++Weiter:Weiter:::trigger-2++Nein:Nein, danke"
  
  <!-- 15. 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-awp-suggestions-dynamic="true"
  
  <!-- 16. 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-awp-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: Ein digitaler Mitarbeiter ist arbeitsfähig und konfiguriert.
Loader einbinden: Die 3 Zeilen Code sind in der Website eingebunden. Damit stehen alle wesentlichen Standardfunktionen sofort zur Verfügung.
Optional - Individuelle Anpassungen: Die individuelle JSON-Konfiguration bildet gewünschte Anpassungen und Optionen (Corporate Design, KVP/Feedback an/aus, Begrüßung/Prompts, etc.) ab.
Optional - HTML-Attribute setzen: HTML-Attribute in der Website setzen, um den Mitarbeiter automatisiert auf der Website-Bühne erscheinen zu lassen, Touren zu definieren, Vorlesen zu ermöglichen, Support anzubieten, Website-Funktionen auszuführen.
Optional - Authentifizierung ermöglichen: Website-User können sich authentifizieren, um geschützte Informationen mit dem Mitarbeiter auszutauschen.
Optional - Geschäftsprozess-Integration: Geschäftsprozess-Integrationen ermöglichen Zugriffe auf ERP-, CRM- und Datenbanksysteme.
Optional - Kreativ werden: Gemeinsam weitere zielführende, erfolgssteigernde Ideen kreieren und umsetzen. Nur unsere Kreativität setzt hier ein Limit. Kein quatsch 🤓

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?

Preis auf Anfrage:

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

Individuelle Kalkulation
Basisintegration
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.