문서 페이지에 Docs Agent 위젯을 임베드하는 방법을 알아보세요.
Docs Agent는 문서 페이지를 위해 특별히 설계된 AI 기반 위젯입니다. 전체 화면 대화 상자를 사용하여 문서에 대한 질문에 답함으로써 사용자에게 즉각적인 도움을 제공합니다.
지금 사용해 보세요!
아래 버튼을 클릭하여 이 페이지에서 Docs Agent의 작동을 확인하세요.
Docs Agent 위젯을 시작하는 것은 간단합니다. 다음 두 단계를 따르세요:
문서 페이지가 iframe 내에서 에이전트를 로드하는 경우, 호스트 페이지 출처가 OAuth 애플리케이션의 allowed_origins에 포함되어 있는지 확인하세요. 위젯 토큰 엔드포인트는 토큰을 발급하기 전에 이 출처를 검증합니다.
필요한 구성으로 docs-widget.js 스크립트를 HTML 페이지에 추가하세요. 여러 개의 docs 위젯을 로드하는 경우, 각 스크립트에 고유한 data-instance-id를 부여하세요:
<script src="https://widget.companin.tech/docs-widget.js" data-widget-key="YOUR_WIDGET_KEY" data-instance-id="docs-help" data-locale="en" async></script>위젯의 open() 메서드를 호출하는 버튼이나 요소를 생성하세요:
<button id="help-btn" type="button">Ask Documentation Agent</button><script> const handleOpen = (event) => { console.log('Docs widget opened', event?.context); }; // Generic event API (returns unsubscribe function) const unsubscribeOpen = window.CompaninDocsWidget?.on?.('open', handleOpen); document.getElementById('help-btn')?.addEventListener('click', () => { window.CompaninDocsWidget?.open(); }); // Cleanup on page unload or SPA route change window.addEventListener('beforeunload', () => { if (typeof unsubscribeOpen === 'function') unsubscribeOpen(); });</script>Docs Agent를 통합하는 방법에 대한 몇 가지 실용적인 예시입니다:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My Documentation</title></head><body> <header> <h1>Product Documentation</h1> <button onclick="window.CompaninDocsWidget.open()"> Need Help? </button> </header> <main> <!-- Your documentation content --> </main> <script src="https://widget.companin.tech/docs-widget.js" data-widget-key="your-widget-key" data-locale="en"> </script></body></html>더 많은 제어를 원하신다면 기존 버튼에 이벤트 리스너를 추가할 수 있습니다:
// Wait for the widget to loadwindow.addEventListener('load', () => { const unsubscribeResponse = window.CompaninDocsWidget?.on?.('response', (event) => { console.log('Agent response:', event?.data); }); document.getElementById('help-btn').addEventListener('click', () => { if (window.CompaninDocsWidget) { window.CompaninDocsWidget.open(); } }); window.addEventListener('beforeunload', () => { if (typeof unsubscribeResponse === 'function') unsubscribeResponse(); });});React 또는 Next.js 애플리케이션에서:
import React from 'react';export default function Documentation() { const openDocsAgent = () => { if (window.CompaninDocsWidget) { window.CompaninDocsWidget.open(); } }; return ( <div> <h1>API Documentation</h1> <button onClick={openDocsAgent} className="help-button" > Ask Customer Support AI Agent </button> </div> );}Docs Agent 위젯은 여러 구성 매개변수를 수락합니다. 여러 위젯을 하나의 페이지에 포함할 때 데이터 인스턴스 ID를 사용하여 결정론적인 인스턴스별 제어를 수행하세요:
data-widget-key: 문서 위젯의 위젯 ID — 대부분의 설치에 필요한 단일 값입니다. 클라이언트, 에이전트 및 구성 서버 측에서 해결됩니다.다중 인스턴스 설정을 위해 이 세 가지를 명시적으로 전달하는 고급 대안 <code>data-widget-key</code>:
data-client-id: Companin 대시보드에서 고유한 클라이언트 식별자data-agent-id: 사용하려는 에이전트의 IDdata-config-id: 위젯 사용자 지정을 위한 구성 IDdata-locale: 언어 코드(기본값: 'en'). 지원: en, de, es, fr, it, nb, nl, pt, svdata-dev: 개발 모드에서 'true'로 설정(로컬호스트:3001에 연결)로드되면 위젯은 프로그래밍 제어를 위한 전역 API를 노출합니다. 다중 위젯 설정에서는 최신 전역 참조만 사용하는 것보다 인스턴스 레지스트리(CompaninDocsWidgets.get(instanceId))를 선호하세요:
window.CompaninDocsWidget.open();Docs Agent 대화 상자를 전체 화면 모드로 엽니다.
window.CompaninDocsWidget.close();Docs Agent 대화 상자를 닫고 위젯을 숨깁니다.
트리거 버튼을 원하는 방식으로 스타일링할 수 있습니다. 다음은 떠 있는 도움 버튼의 예입니다:
.my-help-button { position: fixed; bottom: 20px; right: 20px; padding: 12px 24px; background: #2563eb; color: white; border: none; border-radius: 8px; font-weight: 600; cursor: pointer; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); transition: all 0.2s;}.my-help-button:hover { background: #1d4ed8; transform: translateY(-2px); box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);}API를 호출하기 전에 스크립트가 로드되었는지 확인하세요. 위젯이 사용 가능한지 확인할 수 있습니다:
window.addEventListener('load', () => { console.log('Widget loaded:', !!window.CompaninDocsWidget);});유효한 data-widget-key(또는 명시적 형식의 경우 client-id, agent-id 및 config-id)를 제공했는지 확인하고 그것이 올바른지 확인하세요. 여러 위젯이 있는 경우 각 스크립트에 고유한 data-instance-id가 있는지 확인하세요.