Hero-Modus: der Avatar in der Seite
Sie zeigen auf einen Container in Ihrem Layout, und das Widget stellt die Figur samt Steuerleiste hinein. Das Gespräch beginnt dort, wohin der Besucher ohnehin schon schaut.
Auszeichnung auf Ihrer Seite
Sie steuern das Gespräch mit eigenen Attributen, ohne die Programmierschnittstelle des Widgets anzufassen.
<!-- Der Container, den der Avatar einnimmt. Sein Inhalt ist der Ersatz. -->
<div class="hero-avatar" data-caip-avatar>
<picture><img src="/images/ada.png?v=2" alt="Ada, KI-Assistentin"></picture>
</div>
<!-- Sichtbarer Hinweis neben der Figur. Das Widget ergänzt eine eigene
Notiz, aber nur solange es den Container hält. -->
<p>Ada ist eine KI-Assistentin. Das Gespräch führt ein System, kein Mensch.</p>
<!-- Ihre Schaltfläche für das Sprachgespräch, an beliebiger Stelle der Seite -->
<button type="button" data-caip-call>Mit Ada sprechen</button>
<!-- Ihre Schaltfläche zum Öffnen des Textchats -->
<button type="button" data-caip-open>Schreiben Sie uns</button>Drei Attribute
| Attribut | Bedeutung |
|---|---|
| data-caip-avatar | Der Container, den das Widget übernimmt. Er bekommt einen eigenen, geschlossenen Stilbaum mit dem Rahmen des Avatars und einer Steuerleiste |
| data-caip-call | Startet ein Sprachgespräch im Avatar. Öffnet die Blase nicht |
| data-caip-open | Öffnet das Fenster des Textchats |
Die Regeln, nach denen am häufigsten gefragt wird
- Der Ersatzinhalt verschwindet spät
- Das Bild im Container bleibt, bis der Rahmen sauber steht. Eine schlechte Konfiguration lässt die Seite bei Ihrem Bild, nicht bei einem leeren Rechteck.
- Die Sitzung öffnet sich träge
- Der erste Klick öffnet die Sitzung und danach das Sprachgespräch. Der Klick bleibt eine Geste des Besuchers, und genau deshalb erlaubt der Browser Mikrofon und Tonwiedergabe.
- Es gibt nur ein Gespräch
- Es gibt genau einen Rahmen, und bei geöffnetem Chatfenster gehört er dem Fenster: Ihr Container kehrt so lange zu seinem Ersatzinhalt zurück und bekommt den Rahmen beim Schließen wieder. Ausnahme ist ein bereits laufendes Gespräch im Avatar, das seinen Rahmen behält; das Fenster zeigt dann nur die Gesprächssteuerung.
- Setzen Sie keine Schaltfläche dicht unter den Container
- Nach der Übernahme des Containers zeichnet die Leiste des Widgets dort ihre eigene Startschaltfläche. Ihre Schaltfläche direkt darunter käme auf ihr zu stehen.
- Höhe
- Die Breite nimmt der Rahmen aus dem Container, die Höhe aus einem quadratischen Verhältnis. Einem Container mit automatischer Höhe müssen Sie nichts einstellen. Ein Container mit fester Höhe gewinnt, und die wachsende Gesprächsleiste nimmt die Höhe ihm ab und nicht der Seite, sodass das Layout nicht springt.
- Wenn die Stimme abgeschaltet ist
- Die Gesprächsschaltflächen im Avatar verschwinden dauerhaft, und Ihre eigene Schaltfläche wird nicht taub: sie öffnet dann den Chat.
- Hinweis in den Ersatzinhalt
- Solange das Fenster den Rahmen hält, ist die Figur auf Ihrer Seite Ihr eigener Ersatzinhalt, ohne die Leiste des Widgets und damit ohne dessen Notiz. Geben Sie diesem Inhalt einen sichtbaren Satz darüber, dass die Figur eine KI-Assistentin ist, nicht nur einen Alternativtext oder ein aria-label.
Content-Security-Policy
Der Avatar wird in einem Rahmen eingebettet. Wenn Ihre Seite den Header Content-Security-Policy sendet, muss sie in der Direktive frame-src einen Rahmen von app.aivatary.com zulassen. Auf unserer Seite ist die Einbettung durch die Direktive frame-ancestors auf die Domains Ihrer Liste begrenzt, der Rahmen lässt sich also auf einer fremden Seite nicht einsetzen.
Sehen Sie es laufen
Der Hero-Modus läuft auf unserer eigenen Startseite. Die Figur im Kopf der Seite ist genau dieser Mechanismus.