Віджети сайту
Вбудовуйте свого голосового агента на будь-який сайт, щоб відвідувачі могли розпочати голосову розмову прямо з браузера. Вкладка Widgets надає коди вбудовування, опції налаштування та параметри безпеки доменів.
Віджет зворотного дзвінка працює зовсім інакше, ніж віджети на цій сторінці — замість того, щоб почати голосовий дзвінок у браузері, він збирає номер телефону відвідувача, і ваш агент передзвонює йому. Див. окрему сторінку Віджет зворотного дзвінка.
Типи віджетів
Hanc.AI пропонує чотири типи віджетів у браузері плюс окремий Віджет зворотного дзвінка для телефонних зворотних дзвінків:
| Віджет | Назва тегу | Опис | Найкраще для |
|---|---|---|---|
| Floating Widget | hanc-ai-floating-call | Кругла кнопка, яка плаває над вашою сторінкою | Завжди видимий заклик до дії |
| Pill Widget | hanc-ai-pill-call | Компактна кнопка у формі pill, розміщена inline у вашому контенті | Мінімальний слід усередині наявного макета |
| Pill Floating Widget | hanc-ai-pill-float-call | Така ж компактна форма pill, як у Pill, але плаває разом зі сторінкою, як Floating-віджет | Коли хочете естетику pill, яка слідує за відвідувачем при прокручуванні |
| Inline Widget | hanc-ai-inline-call | Повнорозмірна кнопка дзвінка, вбудована в контент сторінки | Виділені секції «Talk to Us» |
| Callback Widget | hanc-ai-callback | Форма для номера телефону; агент передзвонює відвідувачу | Лід-генеруючі сторінки, лендінги з високим наміром — див. Віджет зворотного дзвінка |
Спільні атрибути
Усі типи віджетів підтримують ці основні атрибути:
| Атрибут | Обов'язковий | Опис | За замовчуванням |
|---|---|---|---|
agent-id | Так | Унікальний ідентифікатор вашого агента | — |
voice-service-url | Ні | Перевизначає URL голосового сервісу | Автовизначення |
api-base-url | Ні | Перевизначає базовий URL API | Автовизначення |
Атрибути відображення
| Атрибут | Опис | Значення | За замовчуванням |
|---|---|---|---|
position | Позиція віджета на сторінці | bottom-right, bottom-left, top-right, top-left, static | bottom-right |
size | Розмір віджета в пікселях | Число | 120 |
theme | Назва кольорової теми | Див. Кольорові теми | default |
Атрибути тексту кнопки
| Атрибут | Опис | За замовчуванням |
|---|---|---|
button-start-text | Текст, який показується на неактивній кнопці | "Call" |
button-connecting-text | Текст, який показується під час підключення | "Connecting..." |
button-end-text | Текст, який показується під час активного дзвінка | — |
Атрибути умов
| Атрибут | Опис | За замовчуванням |
|---|---|---|
terms-enabled | Увімкнути діалог згоди перед дзвінком | false |
terms-content | Markdown-форматований текст згоди | "" |
terms-url | Посилання на вашу сторінку Terms & Conditions | "https://hanc.ai/terms" |
privacy-url | Посилання на вашу сторінку Privacy Policy | "https://hanc.ai/privacy" |
Атрибути умов, установлені на HTML-елементі, перевизначаються налаштуваннями віджета агента, отриманими з API, якщо skip-fetch не встановлено в true.
Звукові атрибути
| Атрибут | Опис | За замовчуванням |
|---|---|---|
sound-enabled | Увімкнути звуки початку/завершення дзвінка | true |
sound-volume | Гучність звукових ефектів | 0.25 |
sound-preset | Ідентифікатор звукового пресета | "1" |
Кольорові теми
Налаштовуйте зовнішній вигляд віджета 11 вбудованими кольоровими темами:
| Тема | Значення |
|---|---|
| Default | default |
| Purple | purple |
| Blue | blue |
| Cyan | cyan |
| Emerald | emerald |
| Amber | amber |
| Tangerine | tangerine |
| Rose | rose |
| Ember | ember |
| Black | black |
| White | white |
Кожна тема має варіанти dark і light. Установіть тему через атрибут theme у коді вбудовування або налаштуйте її в налаштуваннях віджета агента.
Приклади вбудовування
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 із темою та позицією
<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 скрипту вище завжди завантажує останню випущену версію віджета — ваш сайт автоматично отримує покращення. Якщо вам треба зафіксуватися на відомій робочій версії, явно вкажіть з https://unpkg.com/hanc-webrtc-widgets@1.4.0 (замініть на потрібну версію). Тег @latest — за замовчуванням, коли версію не вказано.
Події віджета
Віджети генерують події, які можна слухати в JavaScript:
| Подія | Опис |
|---|---|
status-changed | Спрацьовує при зміні статусу дзвінка |
connecting | Дзвінок встановлюється |
connected | Дзвінок активний |
idle | Немає активного дзвінка |
error | Виникла помилка |
audio-track | Отримано віддалену аудіодоріжку (для візуалізації) |
local-audio-track | Локальна аудіодоріжка мікрофона (для візуалізації) |
microphone-enabled | Мікрофон увімкнено |
microphone-disabled | Мікрофон вимкнено |
call-start | Спрацьовує, коли дзвінок успішно стартує |
call-end | Спрацьовує, коли дзвінок завершується |
Приклад: прослуховування подій
const widget = document.querySelector('hanc-ai-floating-call');
widget.addEventListener('call-start', () => {
console.log('Call started');
});
widget.addEventListener('call-end', () => {
console.log('Call ended');
});
Технічні вимоги
Віджети вимагають, щоб браузер відвідувача підтримував:
- WebGL 2.0 — для рендерингу
- Web Audio API — для обробки аудіо
- WebRTC — для голосової комунікації в реальному часі
Усі сучасні браузери (Chrome, Firefox, Safari, Edge) підтримують ці технології.
Обмеження доменів
Контролюйте, які сайти можуть вбудовувати ваш віджет агента.
Завжди дозволені домени
Наступні домени дозволені завжди, незалежно від конфігурації:
hanc.ai(і піддомени)hanc.me(і піддомени)localhost
Дозволити всі домени
За замовчуванням ваш віджет можна вбудовувати на будь-якому сайті. Перемкніть «Allow all domains» у налаштуваннях віджета, щоб це обмежити.
Обмежити конкретними доменами
Коли обмежено, додайте кожен домен, який має бути дозволено:
- Вводьте назви доменів без
https://(наприклад,example.com) - Піддомени потребують окремих записів (наприклад,
www.example.com,shop.example.com) - Можна вказувати порти (наприклад,
localhost:3000) - Максимум 50 доменів можна додати в білий список
Для продакшн-агентів обмежуйте віджети своїми власними доменами, щоб запобігти несанкціонованому вбудовуванню.
Terms & Conditions
Увімкніть діалог згоди, перш ніж співрозмовники зможуть розпочати розмову.
Конфігурація
| Параметр | Опис |
|---|---|
| Enable Terms | Перемикач діалогу умов on/off |
| Terms Content | Markdown-форматований текст згоди, що показується користувачам (макс. 5 000 символів) |
| Terms URL | Посилання на вашу повну сторінку Terms & Conditions |
| Privacy URL | Посилання на вашу сторінку Privacy Policy |
Коли увімкнено:
- Користувачі бачать діалог згоди перед початком дзвінка
- Вони мають натиснути «Agree», щоб продовжити
- Згода зберігається локально в браузері
- Кнопка Reset Consent очищає збережену згоду для тестування
Форматування контенту
Контент умов підтримує форматування Markdown:
- Використовуйте
####для заголовків - Використовуйте
**bold**для виділення - Використовуйте переноси рядків для зручності читання
Пов'язане
- Віджет зворотного дзвінка — Телефонні зворотні дзвінки для відвідувачів, які не хочуть говорити в браузері
- Огляд голосових агентів
- Налаштування — Налаштування агента, включно з конфігурацією віджета
- Інтеграції — Налаштування ключів API та номерів телефонів