Dokumentacja
Tryb hero: awatar w treści strony
Wskazujecie kontener w swoim układzie, a widget stawia w nim postać i pasek sterowania. Rozmowa startuje w miejscu, w które odwiedzający już patrzy.
Znaczniki na Waszej stronie
Sterujecie rozmową własnymi atrybutami, bez dotykania interfejsu programistycznego widgetu.
<!-- Kontener, w którym stanie awatar. Treść w środku jest zapasowa. -->
<div class="hero-avatar" data-caip-avatar>
<picture><img src="/obrazy/ada.png?v=2" alt="Ada, asystentka AI"></picture>
</div>
<!-- Widoczne ujawnienie przy postaci. Widget dokłada własną notę,
ale tylko wtedy, gdy trzyma kontener. -->
<p>Ada jest asystentką AI. Rozmowę prowadzi system, nie człowiek.</p>
<!-- Wasz przycisk startu rozmowy głosowej, w dowolnym miejscu strony -->
<button type="button" data-caip-call>Porozmawiaj z Adą</button>
<!-- Wasz przycisk otwarcia czatu do pisania -->
<button type="button" data-caip-open>Napisz do nas</button>Trzy atrybuty
| Atrybut | Znaczenie |
|---|---|
| data-caip-avatar | Kontener przejmowany przez widget. Dostaje własne, zamknięte drzewo stylów, a w nim ramkę awatara i pasek sterowania |
| data-caip-call | Start rozmowy głosowej w awatarze. Nie otwiera dymka |
| data-caip-open | Otwarcie panelu czatu do pisania |
Zasady, o które najczęściej pytacie
- Treść zapasowa znika późno
- Obraz w kontenerze pozostaje, dopóki ramka nie wstanie poprawnie. Zła konfiguracja zostawia stronę przy Waszym obrazku, a nie przy pustym prostokącie.
- Sesja otwiera się leniwie
- Pierwsze kliknięcie otwiera sesję, a potem rozmowę głosową. Kliknięcie pozostaje gestem odwiedzającego, dzięki czemu mikrofon i odtwarzanie dźwięku są dozwolone przez przeglądarkę.
- Rozmowa jest jedna
- Ramka jest jedna naraz i przy otwartym oknie czatu należy do panelu: Twój kontener wraca na ten czas do treści zapasowej i odzyskuje ramkę po zamknięciu okna. Wyjątkiem jest rozmowa już trwająca w awatarze, która zatrzymuje swoją ramkę, a panel pokazuje wtedy samo sterowanie rozmową.
- Nie stawiajcie przycisku tuż pod kontenerem
- Po przejęciu kontenera pasek widgetu rysuje tam swój przycisk startu. Wasz przycisk umieszczony bezpośrednio pod spodem stanąłby na nim.
- Wysokość
- Szerokość ramka bierze z kontenera, a wysokość z proporcji kwadratu. Kontenerowi o wysokości automatycznej nie trzeba nic ustawiać. Kontener z konkretną wysokością wygrywa, a rosnący pasek rozmowy odbiera wysokość jemu, nie stronie, więc układ nie skacze.
- Gdy głos jest wyłączony
- Przyciski rozmowy w awatarze chowają się trwale, a Wasz przycisk nie głuchnie: otwiera wtedy czat.
- Ujawnienie w treści zapasowej
- Gdy ramkę trzyma panel, postać w Twojej stronie to Twoja własna treść zapasowa, bez paska widgetu, a więc i bez jego noty. Daj tej treści widoczne zdanie o tym, że postać jest asystentką AI, nie sam tekst alternatywny czy aria-label.
Polityka bezpieczeństwa treści
Awatar jest osadzany w ramce. Jeśli Wasza strona wysyła nagłówek Content-Security-Policy, musi dopuszczać ramkę z app.aivatary.com w dyrektywie frame-src. Po naszej stronie osadzenie jest ograniczone dyrektywą frame-ancestors do domen z Waszej listy dozwolonych, więc ramki nie da się wstawić na obcej stronie.
Zobaczcie to działające
Tryb hero działa na naszej stronie głównej. Postać w nagłówku to dokładnie ten mechanizm.