Сайт виджеттері
Дауыстық агентіңізді кез келген сайтқа ендіріңіз, сонда келушілер браузерден тікелей дауыстық әңгімені бастай алады. Widgets қойындысы ендіру кодтарын, теңшеу опцияларын және домен қауіпсіздік параметрлерін ұсынады.
Кері қоңырау виджеті бұл беттегі виджеттерден өте басқаша жұмыс істейді — браузер дауыстық қоңырауын бастаудың орнына, ол келушінің телефон нөмірін жинайды және агентіңізге оларға кері қоңырау шалуға тапсырма береді. Арнайы Кері қоңырау виджеті бетін қараңыз.
Виджет түрлері
Hanc.AI төрт браузер ішіндегі виджет түрін, плюс телефон кері қоңырауларына арналған бөлек Кері қоңырау виджетін ұсынады:
| Виджет | Тег атауы | Сипаттама | Үшін ең жақсысы |
|---|---|---|---|
| Floating Widget | hanc-ai-floating-call | Бетіңізде қалқып тұратын шар батырмасы | Әрқашан көрінетін шақыру батырмасы |
| Pill Widget | hanc-ai-pill-call | Мазмұныңызда inline орналастырылған тығыз pill-пішімді батырма | Қолданыстағы орналасу ішіндегі минималды із |
| Pill Floating Widget | hanc-ai-pill-float-call | Pill сияқты бірдей тығыз pill пішіні, бірақ Floating виджеті сияқты бетпен қалқиды | Pill эстетикасын келуші айналдырғанда оны ілесіп жүруін қаласаңыз |
| Inline Widget | hanc-ai-inline-call | Бет мазмұнына ендірілген толық өлшемді қоңырау батырмасы | Арнайы "Бізбен сөйлесіңіз" бөлімдері |
| Callback Widget | hanc-ai-callback | Телефон-нөмір формасы; агент келушіге кері қоңырау шалады | Лидтер жинау беттері, жоғары ниетті landing беттер — Кері қоңырау виджеті қараңыз |
Жалпы атрибуттар
Барлық виджет түрлері осы негізгі атрибуттарды қолдайды:
| Атрибут | Қажет пе | Сипаттама | Әдепкі |
|---|---|---|---|
agent-id | Иә | Сіздің агентіңіздің бірегей идентификаторы | — |
voice-service-url | Жоқ | Дауыс қызметінің URL мекенжайын қайта анықтау | Авто-анықталады |
api-base-url | Жоқ | API негізгі URL мекенжайын қайта анықтау | Авто-анықталады |
Дисплей атрибуттары
| Атрибут | Сипаттама | Мәндер | Әдепкі |
|---|---|---|---|
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 | Сіздің "Шарттар" бетіңізге сілтеме | "https://hanc.ai/terms" |
privacy-url | Сіздің "Құпиялылық саясаты" бетіңізге сілтеме | "https://hanc.ai/privacy" |
HTML элементінде орнатылған terms атрибуттарын 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 |
Әр тақырыптың қараңғы және ашық нұсқалары бар. Тақырыпты ендіру кодында theme атрибуты арқылы орнатыңыз немесе агенттің виджет параметрлерінде конфигурациялаңыз.
Ендіру мысалдары
Floating виджеті
<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 виджеті
<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 виджеті
<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 виджеті
<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('Қоңырау басталды');
});
widget.addEventListener('call-end', () => {
console.log('Қоңырау аяқталды');
});
Техникалық талаптар
Виджеттер келушінің браузеріне мынаны қолдауды талап етеді:
- 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 доменді ақ тізімге қосуға болады
Өндірістік агенттер үшін рұқсатсыз ендіруді болдырмау үшін виджеттерді өз домендеріңізге шектеңіз.
Шарттар және келісімдер
Қоңырау шалушылар әңгімені бастамас бұрын келісім диалогын қосыңыз.
Конфигурация
| Параметр | Сипаттама |
|---|---|
| Enable Terms | Шарттар диалогын қосу/өшіру |
| Terms Content | Пайдаланушыларға көрсетілетін Markdown-пішімделген келісім мәтіні (макс 5,000 таңба) |
| Terms URL | Сіздің толық "Шарттар" бетіңізге сілтеме |
| Privacy URL | Сіздің "Құпиялылық саясаты" бетіңізге сілтеме |
Қосылғанда:
- Пайдаланушылар қоңырауды бастамас бұрын келісім диалогын көреді
- Жалғастыру үшін олар "Agree" батырмасын басуы керек
- Келісім браузерде жергілікті сақталады
- Reset Consent батырмасы тестілеу үшін сақталған келісімді тазалайды
Мазмұнды пішімдеу
Шарттар мазмұны Markdown пішімдеуін қолдайды:
- Тақырыптар үшін
####пайдаланыңыз - Екпін үшін
**bold**пайдаланыңыз - Оқу мүмкіндігі үшін жол үзілімдерін пайдаланыңыз
Қатысты
- Кері қоңырау виджеті — Браузерде сөйлесуді қаламайтын келушілерге арналған телефон кері қоңыраулары
- Дауыстық агенттер шолуы
- Параметрлер — Виджет конфигурациясын қосқанда агент параметрлері
- Интеграциялар — API кілттері және телефон нөмірлерін орнату