Webové widgety
Vložte svého AI hlasového agenta na jakýkoli web, aby návštěvníci mohli zahájit hlasovou konverzaci přímo z prohlížeče. Karta Widgety poskytuje vložené kódy, možnosti přizpůsobení a nastavení zabezpečení domén.
Widget zpětného volání funguje velmi odlišně od widgetů na této stránce — místo zahájení hlasového hovoru v prohlížeči shromažďuje telefonní číslo návštěvníka a nechá vašeho agenta zavolat zpět. Viz vyhrazená stránka Widget zpětného volání.
Typy widgetů
Hanc.AI nabízí čtyři typy widgetů v prohlížeči, plus samostatný Widget zpětného volání pro telefonní zpětná volání:
| Widget | Název tagu | Popis | Nejlepší pro |
|---|---|---|---|
| Floating Widget | hanc-ai-floating-call | Kulové tlačítko, které se vznáší nad vaší stránkou | Vždy viditelná výzva k akci |
| Pill Widget | hanc-ai-pill-call | Kompaktní tlačítko ve tvaru pilulky umístěné inline ve vašem obsahu | Minimální stopa uvnitř stávajícího rozvržení |
| Pill Floating Widget | hanc-ai-pill-float-call | Stejný kompaktní tvar pilulky jako Pill, ale vznáší se se stránkou jako Floating widget | Když chcete pillovou estetiku, která sleduje návštěvníka při scrollování |
| Inline Widget | hanc-ai-inline-call | Tlačítko hovoru v plné velikosti vložené do obsahu stránky | Vyhrazené sekce "Promluvte si s námi" |
| Callback Widget | hanc-ai-callback | Formulář s telefonním číslem; agent zavolá návštěvníkovi zpět | Stránky pro generování leadů, landing pages s vysokým záměrem — viz Widget zpětného volání |
Společné atributy
Všechny typy widgetů podporují tyto hlavní atributy:
| Atribut | Povinný | Popis | Výchozí |
|---|---|---|---|
agent-id | Ano | Jedinečný identifikátor vašeho agenta | — |
voice-service-url | Ne | Přepíše URL hlasové služby | Automaticky detekováno |
api-base-url | Ne | Přepíše základní URL API | Automaticky detekováno |
Atributy zobrazení
| Atribut | Popis | Hodnoty | Výchozí |
|---|---|---|---|
position | Pozice widgetu na stránce | bottom-right, bottom-left, top-right, top-left, static | bottom-right |
size | Velikost widgetu v pixelech | Číslo | 120 |
theme | Název barevného tématu | Viz Barevná témata | default |
Atributy textu tlačítka
| Atribut | Popis | Výchozí |
|---|---|---|
button-start-text | Text zobrazený na nečinném tlačítku | "Call" |
button-connecting-text | Text zobrazený během spojování | "Connecting..." |
button-end-text | Text zobrazený během aktivního hovoru | — |
Atributy podmínek
| Atribut | Popis | Výchozí |
|---|---|---|
terms-enabled | Povolit dialog souhlasu před hovorem | false |
terms-content | Text souhlasu formátovaný v Markdownu | "" |
terms-url | Odkaz na vaši stránku Smluvních podmínek | "https://hanc.ai/terms" |
privacy-url | Odkaz na vaši stránku Zásad ochrany soukromí | "https://hanc.ai/privacy" |
Atributy podmínek nastavené na HTML elementu jsou přepsány nastavením widgetu agenta načteným z API, pokud není skip-fetch nastaven na true.
Atributy zvuku
| Atribut | Popis | Výchozí |
|---|---|---|
sound-enabled | Povolit zvuky zahájení/ukončení hovoru | true |
sound-volume | Hlasitost zvukových efektů | 0.25 |
sound-preset | Identifikátor přednastavení zvuku | "1" |
Barevná témata
Přizpůsobte vzhled widgetu pomocí 11 vestavěných barevných témat:
| Téma | Hodnota |
|---|---|
| Default | default |
| Purple | purple |
| Blue | blue |
| Cyan | cyan |
| Emerald | emerald |
| Amber | amber |
| Tangerine | tangerine |
| Rose | rose |
| Ember | ember |
| Black | black |
| White | white |
Každé téma má jak tmavou, tak světlou variantu. Téma nastavte přes atribut theme ve vloženém kódu, nebo ho nakonfigurujte v nastavení widgetu agenta.
Příklady vložení
Floating Widget
<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>
Floating Widget s tématem a pozicí
<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>
Pill Widget
<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>
Inline Widget
<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 skriptu výše vždy načítá nejnovější vydaný widget — váš web automaticky převezme vylepšení. Pokud potřebujete uzamknout na známou dobrou verzi, zafixujte explicitně pomocí https://unpkg.com/hanc-webrtc-widgets@1.4.0 (nahraďte verzi, kterou chcete). Tag @latest je výchozí, pokud není zadána žádná verze.
Události widgetu
Widgety vysílají události, kterým můžete naslouchat v JavaScriptu:
| Událost | Popis |
|---|---|
status-changed | Vyzařuje se při změně stavu hovoru |
connecting | Hovor se vytváří |
connected | Hovor je aktivní |
idle | Žádný aktivní hovor |
error | Došlo k chybě |
audio-track | Přijata vzdálená audio stopa (pro vizualizaci) |
local-audio-track | Lokální audio stopa mikrofonu (pro vizualizaci) |
microphone-enabled | Mikrofon byl povolen |
microphone-disabled | Mikrofon byl zakázán |
call-start | Vyzařuje se při úspěšném zahájení hovoru |
call-end | Vyzařuje se při ukončení hovoru |
Příklad: Naslouchání událostem
const widget = document.querySelector('hanc-ai-floating-call');
widget.addEventListener('call-start', () => {
console.log('Call started');
});
widget.addEventListener('call-end', () => {
console.log('Call ended');
});
Technické požadavky
Widgety vyžadují, aby prohlížeč návštěvníka podporoval:
- WebGL 2.0 — pro vykreslování
- Web Audio API — pro zpracování zvuku
- WebRTC — pro hlasovou komunikaci v reálném čase
Všechny moderní prohlížeče (Chrome, Firefox, Safari, Edge) tyto technologie podporují.
Omezení domén
Řiďte, které weby mohou vložit widget vašeho agenta.
Vždy povolené domény
Následující domény jsou vždy povoleny bez ohledu na konfiguraci:
hanc.ai(a subdomény)hanc.me(a subdomény)localhost
Povolit všechny domény
Ve výchozím nastavení lze váš widget vložit na jakýkoli web. Přepněte "Povolit všechny domény" v nastavení widgetu, abyste to omezili.
Omezit na konkrétní domény
Při omezení přidejte každou doménu, která má být povolena:
- Zadejte názvy domén bez
https://(např.example.com) - Subdomény vyžadují samostatné položky (např.
www.example.com,shop.example.com) - Lze zadat porty (např.
localhost:3000) - Lze povolit maximálně 50 domén
Pro produkční agenty omezte widgety na vlastní domény, abyste zabránili neoprávněnému vložení.
Smluvní podmínky
Povolte dialog souhlasu předtím, než volající mohou zahájit konverzaci.
Konfigurace
| Nastavení | Popis |
|---|---|
| Povolit podmínky | Přepínač dialogu podmínek zap/vyp |
| Obsah podmínek | Text souhlasu formátovaný v Markdownu zobrazený uživatelům (max 5 000 znaků) |
| URL podmínek | Odkaz na vaši kompletní stránku Smluvních podmínek |
| URL ochrany soukromí | Odkaz na vaši stránku Zásad ochrany soukromí |
Když je povoleno:
- Uživatelé před zahájením hovoru vidí dialog souhlasu
- Musí kliknout na "Souhlasím", aby pokračovali
- Souhlas se ukládá lokálně v prohlížeči
- Tlačítko Resetovat souhlas vymaže uložený souhlas pro testování
Formátování obsahu
Obsah podmínek podporuje formátování Markdown:
- Použijte
####pro nadpisy - Použijte
**bold**pro zvýraznění - Použijte zalomení řádků pro čitelnost
Související
- Widget zpětného volání — Telefonní zpětná volání pro návštěvníky, kteří raději nemluví v prohlížeči
- Přehled AI hlasových agentů
- Nastavení — Nastavení agenta včetně konfigurace widgetu
- Integrace — API klíče a nastavení telefonního čísla