Webhelywidgetek
Ágyazza be az AI hangügynökét bármely webhelyre, hogy a látogatók közvetlenül a böngészőből indíthassanak hangbeszélgetést. A Widgetek lap beágyazási kódokat, testreszabási lehetőségeket és tartomány-biztonsági beállításokat biztosít.
A Visszahívás widget nagyon eltérően működik az ezen az oldalon található widgetekhez képest — ahelyett, hogy böngészőbeli hanghívást indítana, összegyűjti a látogató telefonszámát, és az ügynöke visszahívja őket. Lásd a dedikált Visszahívás widget oldalt.
Widget-típusok
A Hanc.AI négy böngészőbeli widget-típust kínál, plusz egy különálló Visszahívás widgetet telefonos visszahívásokhoz:
| Widget | Tag-név | Leírás | Mire a legjobb |
|---|---|---|---|
| Lebegő widget | hanc-ai-floating-call | Az oldal felett lebegő gömb gomb | Mindig látható call-to-action |
| Pill widget | hanc-ai-pill-call | Kompakt, pill alakú gomb a tartalomba helyezve | Minimális helyfoglalás meglévő layouton belül |
| Lebegő Pill widget | hanc-ai-pill-float-call | Ugyanaz a kompakt pill alak, mint a Pill, de az oldallal lebeg, mint a Lebegő widget | Amikor pill esztétikát szeretne, amely követi a látogatót görgetés közben |
| Inline widget | hanc-ai-inline-call | Teljes méretű hívó gomb az oldal tartalmába ágyazva | Dedikált „Beszéljen velünk" szakaszokhoz |
| Visszahívás widget | hanc-ai-callback | Telefonszám űrlap; az ügynök visszahívja a látogatót | Lead-gen oldalak, magas szándékú landing oldalak — lásd Visszahívás widget |
Általános attribútumok
Minden widget-típus támogatja ezeket az alapvető attribútumokat:
| Attribútum | Kötelező | Leírás | Alapértelmezett |
|---|---|---|---|
agent-id | Igen | Az ügynöke egyedi azonosítója | — |
voice-service-url | Nem | Felülírja a voice service URL-jét | Automatikusan észlelve |
api-base-url | Nem | Felülírja az API alap URL-jét | Automatikusan észlelve |
Megjelenítési attribútumok
| Attribútum | Leírás | Értékek | Alapértelmezett |
|---|---|---|---|
position | Widget pozíciója az oldalon | bottom-right, bottom-left, top-right, top-left, static | bottom-right |
size | Widget méret pixelben | Szám | 120 |
theme | Színtéma neve | Lásd Színtémák | default |
Gombszöveg attribútumok
| Attribútum | Leírás | Alapértelmezett |
|---|---|---|
button-start-text | Üresjárati gombon megjelenő szöveg | "Call" |
button-connecting-text | Csatlakozás közben megjelenő szöveg | "Connecting..." |
button-end-text | Aktív hívás közben megjelenő szöveg | — |
Feltételek attribútumok
| Attribútum | Leírás | Alapértelmezett |
|---|---|---|
terms-enabled | Hozzájárulási párbeszéd engedélyezése hívás előtt | false |
terms-content | Markdown formátumú hozzájárulási szöveg | "" |
terms-url | Link az Általános Szerződési Feltételek oldalra | "https://hanc.ai/terms" |
privacy-url | Link az adatvédelmi szabályzat oldalra | "https://hanc.ai/privacy" |
A HTML elemen beállított Terms attribútumokat felülírják az API-ból lekért ügynök widget-beállítások, kivéve, ha a skip-fetch értéke true.
Hangattribútumok
| Attribútum | Leírás | Alapértelmezett |
|---|---|---|
sound-enabled | Híváskezdő/befejező hangok engedélyezése | true |
sound-volume | Hanghatás hangereje | 0.25 |
sound-preset | Hangelőbeállítás azonosítója | "1" |
Színtémák
Szabja testre a widget megjelenését 11 beépített színtémával:
| Téma | Érték |
|---|---|
| Alapértelmezett | default |
| Lila | purple |
| Kék | blue |
| Cián | cyan |
| Smaragd | emerald |
| Borostyán | amber |
| Mandarin | tangerine |
| Rózsa | rose |
| Parázs | ember |
| Fekete | black |
| Fehér | white |
Minden témának van sötét és világos változata is. Állítsa be a témát a theme attribútumon keresztül a beágyazási kódban, vagy konfigurálja az ügynök widget-beállításaiban.
Beágyazási példák
Lebegő 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>
Lebegő widget témával és pozícióval
<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>
A fenti szkript URL mindig a legutóbb kiadott widgetet tölti be — az oldala automatikusan átveszi a fejlesztéseket. Ha egy ismert jó verzióra kell zárolnia, rögzítse explicit módon a https://unpkg.com/hanc-webrtc-widgets@1.4.0 formával (helyettesítse a kívánt verzióval). A @latest tag az alapértelmezett, ha nincs verzió megadva.
Widget-események
A widgetek olyan eseményeket bocsátanak ki, amelyeket JavaScripten hallgathat:
| Esemény | Leírás |
|---|---|
status-changed | Akkor lép működésbe, amikor a hívás állapota változik |
connecting | A hívás létrejön |
connected | A hívás aktív |
idle | Nincs aktív hívás |
error | Hiba történt |
audio-track | Távoli audio-track érkezett (vizualizációhoz) |
local-audio-track | Helyi mikrofon audio-track (vizualizációhoz) |
microphone-enabled | A mikrofon engedélyezve lett |
microphone-disabled | A mikrofon le lett tiltva |
call-start | Akkor lép működésbe, amikor egy hívás sikeresen elindul |
call-end | Akkor lép működésbe, amikor a hívás véget ér |
Példa: Események hallgatása
const widget = document.querySelector('hanc-ai-floating-call');
widget.addEventListener('call-start', () => {
console.log('Call started');
});
widget.addEventListener('call-end', () => {
console.log('Call ended');
});
Műszaki követelmények
A widgetek megkövetelik, hogy a látogató böngészője támogassa:
- WebGL 2.0 — a megjelenítéshez
- Web Audio API — az audiofeldolgozáshoz
- WebRTC — a valós idejű hangkommunikációhoz
Az összes modern böngésző (Chrome, Firefox, Safari, Edge) támogatja ezeket a technológiákat.
Tartomány-korlátozások
Szabályozza, hogy mely webhelyek ágyazhatják be az ügynök widgetjét.
Mindig engedélyezett tartományok
A következő tartományok mindig engedélyezettek, függetlenül a konfigurációtól:
hanc.ai(és aldomainek)hanc.me(és aldomainek)localhost
Összes tartomány engedélyezése
Alapértelmezés szerint a widget bármely webhelyre beágyazható. A widget-beállításokban kapcsolja át az „Összes tartomány engedélyezése" lehetőséget, hogy korlátozza ezt.
Korlátozás meghatározott tartományokra
Ha korlátozott, adja hozzá az egyes tartományokat, amelyeket engedélyezni szeretne:
- A tartományneveket
https://nélkül adja meg (pl.example.com) - Az aldomaineknek külön bejegyzések kellenek (pl.
www.example.com,shop.example.com) - A portok megadhatók (pl.
localhost:3000) - Maximum 50 tartomány vehető fel a fehérlistára
Termelési ügynököknél korlátozza a widgeteket saját tartományaira, hogy megakadályozza az illetéktelen beágyazást.
Általános Szerződési Feltételek
Engedélyezzen egy hozzájárulási párbeszédet, mielőtt a hívók beszélgetést kezdhetnének.
Konfiguráció
| Beállítás | Leírás |
|---|---|
| Feltételek engedélyezése | Feltételek párbeszéd be/ki kapcsolása |
| Feltételek tartalma | A felhasználóknak megjelenő Markdown formátumú hozzájárulási szöveg (max. 5 000 karakter) |
| Feltételek URL | Link a teljes Általános Szerződési Feltételek oldalra |
| Adatvédelmi URL | Link az adatvédelmi szabályzat oldalra |
Ha engedélyezve van:
- A felhasználók hozzájárulási párbeszédet látnak a hívás megkezdése előtt
- Az „Elfogadom" gombra kell kattintaniuk a folytatáshoz
- A hozzájárulás helyileg tárolódik a böngészőben
- A Hozzájárulás visszaállítása gomb tisztítja a tárolt hozzájárulást teszteléshez
Tartalomformázás
A feltételek tartalma támogatja a Markdown formázást:
- Használja a
####jelet címsorokhoz - Használja a
**bold**jelet kiemeléshez - Használjon sortöréseket az olvashatóság érdekében
Kapcsolódó
- Visszahívás widget — Telefonos visszahívások azoknak, akik nem szeretnének böngészőben beszélni
- AI hangügynökök áttekintése
- Beállítások — Ügynök-beállítások a widget konfigurációjával együtt
- Integrációk — API-kulcsok és telefonszám beállítása