웹 위젯 임베드하기

스크립트 태그 하나로 어떤 웹사이트에나 에이전트를 올리세요 — 버블, 창, 전체 화면 모드 포함.

기본 임베드

<script src="https://chat.agent4.io/ui/embed.js"
        data-token="YOUR_SHARE_TOKEN" async></script>

로더는 창이나 전체 화면으로 펼쳐지는 떠 있는 채팅 버블(우측 하단)을 주입합니다. iframe이 플랫폼 오리진을 가리키므로, 당신의 사이트에는 CORS 설정이 필요 없습니다.

옵션

속성	효과
`data-token`	필수. 콘솔에서 받은 share token.
`data-color`	위젯 헤더/버블의 강조 색상.
`data-position="left"`	버블을 우측 하단 대신 좌측 하단에 도킹합니다.

키보드: Ctrl/⌘ + Shift + F가 버블 → 창 → 전체 화면을 순환합니다.

명령 팔레트 (Ask 바)

문서 사이트에서 보이는 현대적인 "질문하기" 패턴을 선호하나요? embed.js를 ask.js로 바꾸세요 — 같은 한 줄, 다른 변경은 없습니다:

<script src="https://chat.agent4.io/ui/ask.js"
        data-token="YOUR_SHARE_TOKEN" async></script>

이것은 얇은 질문하기 바를 주입합니다. 이를 클릭하거나 — 페이지 어디서든 ⌘K / Ctrl+K를 누르면 — 어두워진 배경 위 중앙에 명령 팔레트로 펼쳐집니다. Esc 또는 바깥 클릭으로 닫힙니다. 이 바는 정적 레이블이 아닙니다: 방문자가 그 페이지에서 가장 물어볼 법한 질문들을 하나씩 차례로 타이핑해 보여줍니다(버블의 추천 질문을 구동하는 것과 같은 페이지 플레이북에서 가져옵니다).

속성	효과
`data-token`	필수. 콘솔에서 받은 share token.
`data-color`	강조 색상.
`data-position`	`bottom-center`(기본값), `bottom-right`, 또는 `bottom-left`.

팔레트는 버블과 동일한 에이전트, 검색, 인증을 실행합니다 — 아래의 host-session 모드를 포함해 — 따라서 이 페이지의 다른 모든 내용이 변경 없이 적용됩니다. 콘솔에서 share마다 버블과 Ask 바 중 하나를 선택하세요 (Website embed → Chat bubble / Ask bar).

도메인 허용 목록

각 share는 allowed_domains 목록을 지닙니다. 플랫폼은 frame-ancestors CSP로 이를 강제하므로, 위젯은 당신이 나열한 사이트 안에서만 렌더링됩니다. 콘솔의 share에서 설정하세요.

인증 모드

share는 세 가지 모드 중 하나로 실행됩니다:

익명(Anonymous) — 방문자가 계정 없이 채팅하며, 각 브라우저가 자체 스페이스를 갖습니다.
계정 로그인(Account login) — 방문자가 플랫폼 엔드유저 계정으로 로그인하며, 이력과 메모리가 기기 간에 따라다닙니다.
Host session (HMAC) — 당신의 백엔드가 사용자가 누구인지 위젯에 알려주므로, 로그인된 사용자가 두 번째 로그인 없이 인식됩니다:

<script src="https://chat.agent4.io/ui/embed.js"
        data-token="YOUR_SHARE_TOKEN"
        data-uid="user-42"
        data-ts="1767139200"
        data-sig="HMAC_SHA256(secret, uid + ts)"
        async></script>

당신의 서버가 share의 서명 secret으로 data-sig를 계산하면, 플랫폼이 이를 검증하고 user-42를 안정적인 엔드유저 신원에 매핑합니다.

독립 페이지

모든 share는 https://chat.agent4.io/s/YOUR_SHARE_TOKEN에서 전체 페이지로도 접근할 수 있습니다 — 호스팅 사이트를 통제하지 못할 때 QR 코드, 이메일 링크, 광고 랜딩 페이지에 유용합니다.

답변 자체에 대한 검사

페이지 플레이북