Web widget-ը AiHummer-ի գործակալ է դնում ձեր կայքում որպես ներդրվող զրույցի
գործարկիչ։ Այցելուները սեղմում են պղպջակին, տպում, և streaming-ով հետ ստանում պատասխաններ նույն
turn engine-ից, որը սնուցում է ամեն մյուս ալիք։
Widget-ը մատուցվում է հենց gateway-ի կողմից /widget/ ուղում, այնպես որ
առանձին ծառայություն գործարկելու կարիք չկա։
Ինչպես է աշխատում ներդրումը
Widget-ը առաքվում է երեք շերտով՝ նախագծված ձեր
էջի սեփական ոճերից և script-երից մեկուսացված մնալու համար.
Փոքր <script> loader, որը դուք գցում եք ձեր էջում։
shadow-root գործարկիչ — զրույցի պղպջակը և վահանակը ցուցադրվում են Shadow
DOM-ի ներսում, այնպես որ ձեր CSS-ը և widget-ի CSS-ը երբեք չեն բախվում։
same-origin iframe, որը հոստինգում է իրական զրույցի մակերեսը։
Ներդրման հատվածը
Ավելացրեք loader script-ը ցանկացած էջում, որտեղ ուզում եք գործակալը հասանելի լինի, սովորաբար
հենց փակվող </body> tag-ից առաջ.
Loader-ը մատուցվում է նույն gateway-ից, որը գործարկում է ձեր գործակալները, այնպես որ զրույցի
մակերեսը same-origin է widget-ի asset-ների հետ։
Endpoint-ները widget-ի հետևում
Widget-ը խոսում է gateway-ի երկու endpoint-ի հետ.
POST /v1/web/sessionGET /v1/web/stream
POST /v1/web/session բացում է web զրույցի session։
GET /v1/web/stream streaming-ով հետ է ուղարկում գործակալի պատասխանը Server-Sent
Events (SSE)-ով, այնպես որ պատասխանները հայտնվում են token-առ-token։
Կարգավորում
Widget-ի ճիշտ մատուցման և ուղարկման համար պետք է լինեն երկու կարգավորում.
AIHUMMER_WIDGET_DIR — widget-ի asset-ների գրացուցակը, որը gateway-ը մատուցում է
/widget/-ում։
AIHUMMER_DEFAULT_WORKSPACE_ID — լռելյայն workspace-ը, որի մեջ ուղարկվում են մուտքային web
session-ները։
[!NOTE]
Widget-ը մատուցվում է gateway-ի կողմից /widget/-ում. դրա համար առանձին
process չեք տեղակայում։ Դադարեցրեք TLS-ը ձեր reverse proxy-ում, ինչպես կանեիք gateway-ի մնացած
մասի համար։
**Web widget-ը AiHummer-ի գործակալ է դնում ձեր կայքում** որպես ներդրվող զրույցի
գործարկիչ։ Այցելուները սեղմում են պղպջակին, տպում, և streaming-ով հետ ստանում պատասխաններ նույն
turn engine-ից, որը սնուցում է ամեն մյուս ալիք։
Widget-ը մատուցվում է հենց gateway-ի կողմից `/widget/` ուղում, այնպես որ
առանձին ծառայություն գործարկելու կարիք չկա։
## Ինչպես է աշխատում ներդրումը
Widget-ը առաքվում է երեք շերտով՝ նախագծված ձեր
էջի սեփական ոճերից և script-երից մեկուսացված մնալու համար.
1. Փոքր **`<script>` loader**, որը դուք գցում եք ձեր էջում։
2. **shadow-root գործարկիչ** — զրույցի պղպջակը և վահանակը ցուցադրվում են Shadow
DOM-ի ներսում, այնպես որ ձեր CSS-ը և widget-ի CSS-ը երբեք չեն բախվում։
3. **same-origin iframe**, որը հոստինգում է իրական զրույցի մակերեսը։
## Ներդրման հատվածը
Ավելացրեք loader script-ը ցանկացած էջում, որտեղ ուզում եք գործակալը հասանելի լինի, սովորաբար
հենց փակվող `</body>` tag-ից առաջ.
```html
<script
src="https://your-aihummer-host/widget/loader.js"
async>
</script>
```
Loader-ը մատուցվում է նույն gateway-ից, որը գործարկում է ձեր գործակալները, այնպես որ զրույցի
մակերեսը same-origin է widget-ի asset-ների հետ։
## Endpoint-ները widget-ի հետևում
Widget-ը խոսում է gateway-ի երկու endpoint-ի հետ.
```http
POST /v1/web/session
GET /v1/web/stream
```
- **`POST /v1/web/session`** բացում է web զրույցի session։
- **`GET /v1/web/stream`** streaming-ով հետ է ուղարկում գործակալի պատասխանը **Server-Sent
Events (SSE)**-ով, այնպես որ պատասխանները հայտնվում են token-առ-token։
## Կարգավորում
Widget-ի ճիշտ մատուցման և ուղարկման համար պետք է լինեն երկու կարգավորում.
- **`AIHUMMER_WIDGET_DIR`** — widget-ի asset-ների գրացուցակը, որը gateway-ը մատուցում է
`/widget/`-ում։
- **`AIHUMMER_DEFAULT_WORKSPACE_ID`** — լռելյայն workspace-ը, որի մեջ ուղարկվում են մուտքային web
session-ները։
> [!NOTE]
> Widget-ը մատուցվում է gateway-ի կողմից `/widget/`-ում. դրա համար առանձին
> process չեք տեղակայում։ Դադարեցրեք TLS-ը ձեր reverse proxy-ում, ինչպես կանեիք gateway-ի մնացած
> մասի համար։
## Ուր հաջորդիվ
- Զրույցի հավելվածների համար տեսեք [Telegram](/hy/v1.0/channels/telegram) և
[MAX](/hy/v1.0/channels/max)։
- Native հավելվածի համար տեսեք [Mobile client](/hy/v1.0/channels/mobile-client)։
- Հարմարեցված ինտեգրումների համար տեսեք [Generic inbound](/hy/v1.0/channels/generic-inbound)։
