Widgety witryny
Osadź swojego agenta głosowego AI na dowolnej stronie, aby odwiedzający mogli rozpocząć rozmowę głosową bezpośrednio z przeglądarki. Zakładka Widgety zapewnia kody osadzania, opcje dostosowywania i ustawienia bezpieczeństwa domeny.
Widget oddzwaniania działa zupełnie inaczej niż widgety na tej stronie — zamiast rozpoczynać rozmowę głosową w przeglądarce, zbiera numer telefonu odwiedzającego i każe Twojemu agentowi do niego oddzwonić. Patrz dedykowana strona Widget oddzwaniania.
Typy widgetów
Hanc.AI oferuje cztery typy widgetów działających w przeglądarce, plus oddzielny Widget oddzwaniania do oddzwonień telefonicznych:
| Widget | Nazwa tagu | Opis | Najlepszy do |
|---|---|---|---|
| Widget pływający | hanc-ai-floating-call | Przycisk-kula, który pływa nad Twoją stroną | Zawsze widoczne wezwanie do działania |
| Widget pigułka | hanc-ai-pill-call | Kompaktowy przycisk w kształcie pigułki umieszczony inline w treści | Minimalny ślad w istniejącym układzie |
| Pływająca pigułka | hanc-ai-pill-float-call | Ten sam kompaktowy kształt pigułki co Pill, ale pływa wraz ze stroną jak widget pływający | Gdy chcesz estetykę pigułki, która podąża za odwiedzającym podczas przewijania |
| Widget inline | hanc-ai-inline-call | Przycisk rozmowy pełnego rozmiaru osadzony w treści strony | Dedykowane sekcje „Porozmawiaj z nami" |
| Widget oddzwaniania | hanc-ai-callback | Formularz numeru telefonu; agent oddzwania do odwiedzającego | Strony do generowania leadów, landing page'y o wysokiej intencji — patrz Widget oddzwaniania |
Wspólne atrybuty
Wszystkie typy widgetów obsługują te podstawowe atrybuty:
| Atrybut | Wymagany | Opis | Domyślne |
|---|---|---|---|
agent-id | Tak | Unikalny identyfikator Twojego agenta | — |
voice-service-url | Nie | Nadpisz URL usługi głosowej | Auto-wykrywany |
api-base-url | Nie | Nadpisz bazowy URL API | Auto-wykrywany |
Atrybuty wyświetlania
| Atrybut | Opis | Wartości | Domyślne |
|---|---|---|---|
position | Pozycja widgetu na stronie | bottom-right, bottom-left, top-right, top-left, static | bottom-right |
size | Rozmiar widgetu w pikselach | Liczba | 120 |
theme | Nazwa motywu kolorów | Patrz Motywy kolorów | default |
Atrybuty tekstu przycisku
| Atrybut | Opis | Domyślne |
|---|---|---|
button-start-text | Tekst pokazany na bezczynnym przycisku | "Call" |
button-connecting-text | Tekst pokazany podczas łączenia | "Connecting..." |
button-end-text | Tekst pokazany podczas aktywnego połączenia | — |
Atrybuty regulaminu
| Atrybut | Opis | Domyślne |
|---|---|---|
terms-enabled | Włącz okno dialogowe zgody przed połączeniem | false |
terms-content | Tekst zgody sformatowany w Markdown | "" |
terms-url | Link do Twojej strony Regulaminu | "https://hanc.ai/terms" |
privacy-url | Link do Twojej Polityki Prywatności | "https://hanc.ai/privacy" |
Atrybuty regulaminu ustawione na elemencie HTML są nadpisywane przez ustawienia widgetu agenta pobierane z API, chyba że skip-fetch jest ustawione na true.
Atrybuty dźwięku
| Atrybut | Opis | Domyślne |
|---|---|---|
sound-enabled | Włącz dźwięki rozpoczęcia/zakończenia połączenia | true |
sound-volume | Głośność efektów dźwiękowych | 0.25 |
sound-preset | Identyfikator presetu dźwięku | "1" |
Motywy kolorów
Dostosuj wygląd widgetu za pomocą 11 wbudowanych motywów kolorów:
| Motyw | Wartość |
|---|---|
| Default | default |
| Purple | purple |
| Blue | blue |
| Cyan | cyan |
| Emerald | emerald |
| Amber | amber |
| Tangerine | tangerine |
| Rose | rose |
| Ember | ember |
| Black | black |
| White | white |
Każdy motyw ma warianty ciemny i jasny. Ustaw motyw za pomocą atrybutu theme w kodzie osadzania lub skonfiguruj go w ustawieniach widgetu agenta.
Przykłady osadzania
Widget pływający
<hanc-ai-floating-call agent-id="YOUR_AGENT_ID"></hanc-ai-floating-call>
<script src="https://unpkg.com/hanc-webrtc-widgets" async type="text/javascript"></script>
Widget pływający z motywem i pozycją
<hanc-ai-floating-call
agent-id="YOUR_AGENT_ID"
theme="emerald"
position="bottom-left"
size="140"
></hanc-ai-floating-call>
<script src="https://unpkg.com/hanc-webrtc-widgets" async type="text/javascript"></script>
Widget pigułka
<hanc-ai-pill-call agent-id="YOUR_AGENT_ID"></hanc-ai-pill-call>
<script src="https://unpkg.com/hanc-webrtc-widgets" async type="text/javascript"></script>
Widget inline
<hanc-ai-inline-call agent-id="YOUR_AGENT_ID"></hanc-ai-inline-call>
<script src="https://unpkg.com/hanc-webrtc-widgets" async type="text/javascript"></script>
URL skryptu powyżej zawsze ładuje najnowszy wydany widget — Twoja strona automatycznie otrzymuje ulepszenia. Jeśli musisz zablokować do znanej, dobrej wersji, przypnij jawnie za pomocą https://unpkg.com/hanc-webrtc-widgets@1.4.0 (zastąp wersją, której chcesz). Tag @latest jest domyślny, gdy żadna wersja nie jest określona.
Zdarzenia widgetu
Widgety emitują zdarzenia, których możesz nasłuchiwać w JavaScript:
| Zdarzenie | Opis |
|---|---|
status-changed | Wyzwalane przy zmianie statusu połączenia |
connecting | Połączenie jest nawiązywane |
connected | Połączenie jest aktywne |
idle | Brak aktywnego połączenia |
error | Wystąpił błąd |
audio-track | Odebrano zdalną ścieżkę audio (do wizualizacji) |
local-audio-track | Lokalna ścieżka audio mikrofonu (do wizualizacji) |
microphone-enabled | Mikrofon został włączony |
microphone-disabled | Mikrofon został wyłączony |
call-start | Wyzwalane, gdy połączenie rozpocznie się pomyślnie |
call-end | Wyzwalane, gdy połączenie się kończy |
Przykład: Nasłuchiwanie zdarzeń
const widget = document.querySelector('hanc-ai-floating-call');
widget.addEventListener('call-start', () => {
console.log('Call started');
});
widget.addEventListener('call-end', () => {
console.log('Call ended');
});
Wymagania techniczne
Widgety wymagają, aby przeglądarka odwiedzającego wspierała:
- WebGL 2.0 — do renderowania
- Web Audio API — do przetwarzania dźwięku
- WebRTC — do komunikacji głosowej w czasie rzeczywistym
Wszystkie nowoczesne przeglądarki (Chrome, Firefox, Safari, Edge) wspierają te technologie.
Ograniczenia domeny
Kontroluj, które strony mogą osadzić Twój widget agenta.
Zawsze dozwolone domeny
Następujące domeny są zawsze dozwolone niezależnie od konfiguracji:
hanc.ai(i poddomeny)hanc.me(i poddomeny)localhost
Zezwalaj wszystkim domenom
Domyślnie Twój widget może być osadzony na dowolnej stronie. Przełącz „Zezwalaj wszystkim domenom" w ustawieniach widgetu, aby to ograniczyć.
Ogranicz do konkretnych domen
Gdy ograniczone, dodaj każdą domenę, która powinna być dozwolona:
- Wpisz nazwy domen bez
https://(np.example.com) - Poddomeny wymagają oddzielnych wpisów (np.
www.example.com,shop.example.com) - Można określić porty (np.
localhost:3000) - Maksymalnie 50 domen może być na białej liście
Dla produkcyjnych agentów ogranicz widgety do własnych domen, aby zapobiec nieautoryzowanemu osadzaniu.
Regulamin
Włącz okno dialogowe zgody przed rozpoczęciem rozmowy przez rozmówców.
Konfiguracja
| Ustawienie | Opis |
|---|---|
| Włącz regulamin | Przełącz okno regulaminu wł./wył. |
| Treść regulaminu | Tekst zgody sformatowany w Markdown pokazany użytkownikom (maks. 5 000 znaków) |
| URL regulaminu | Link do Twojej pełnej strony Regulaminu |
| URL polityki prywatności | Link do Twojej Polityki Prywatności |
Gdy włączone:
- Użytkownicy widzą okno dialogowe zgody przed rozpoczęciem połączenia
- Muszą kliknąć „Zgadzam się", aby kontynuować
- Zgoda jest przechowywana lokalnie w przeglądarce
- Przycisk Zresetuj zgodę czyści przechowywaną zgodę do testów
Formatowanie treści
Treść regulaminu obsługuje formatowanie Markdown:
- Użyj
####dla nagłówków - Użyj
**bold**dla wyróżnienia - Użyj podziałów wierszy dla czytelności
Powiązane
- Widget oddzwaniania — oddzwonienia telefoniczne dla odwiedzających, którzy wolą nie rozmawiać w przeglądarce
- Przegląd agentów głosowych AI
- Ustawienia — ustawienia agenta, w tym konfiguracja widgetu
- Integracje — klucze API i konfiguracja numeru telefonu