5분 이내에 WebSocket Gateway를 통해 OpenClaw을 웹사이트에 통합하세요. 이 가이드에서는 OpenClaw v2026.2+, Node.js 22+ 요구 사항, Gateway 구성, 임베디드 채팅 위젯 및 자체 호스팅 AI 어시스턴트를 위한 보안 설정에 대해 설명합니다.
WebChat 통합
OpenClaw을 WebChat에 연결하여 웹사이트에 직접 AI 어시스턴트를 임베드하세요.
TL;DR
- ✓ openclaw.json에서 WebSocket Gateway 구성
- ✓ Gateway를 활성화하고 OpenClaw 시작
- ✓ 웹사이트에 채팅 위젯 임베드
- ✓ 소요 시간: 약 5분
설정 단계
1단계: openclaw.json 구성
{
"channels": {
"webchat": {
"enabled": true,
"gateway": {
"port": 3000,
"path": "/ws",
"auth": {
"enabled": true,
"apiKeys": ["your-api-key-1", "your-api-key-2"]
}
}
}
}
}2단계: OpenClaw 시작
openclaw startWebSocket Gateway는 기본적으로 포트 3000에서 시작됩니다.
3단계: 채팅 위젯 임베드
OpenClaw 채팅 위젯을 웹사이트에 추가하세요:
<script src="https://your-openclaw-server.com/widget.js"></script>
<script>
OpenClaw.init({
server: 'wss://your-openclaw-server.com/ws',
apiKey: 'your-api-key',
theme: {
primaryColor: '#FF4500',
position: 'bottom-right'
}
});
</script>주요 기능
커스터마이징 가능
완전히 커스터마이징 가능한 위젯外观.
API 키
API 키를 통한 안전한 인증.
실시간
즉각적인 응답을 위한 WebSocket.
테마
다양한 테마 옵션과 다크 모드 지원.
관련 가이드
자주 묻는 질문
WebChat 채널은 어떤 유형의 웹사이트에 적합한가요?
WebChat 채널은 모든 웹사이트에 적합합니다. 일반적인 사용 사례로는 고객 지원 채팅, 실시간 문의, AI 어시스턴트 통합, 그리고 커스텀 웹 애플리케이션이 있습니다.
WebSocket Gateway에 보안을 어떻게 설정하나요?
openclaw.json에서 API 키 인증을 활성화할 수 있습니다. enabled: true로 설정하고 배열에 API 키를 추가하세요. 이렇게 하면 승인된 클라이언트만 Gateway에 연결할 수 있습니다.
채팅 위젯의 디자인을 커스터마이즈할 수 있나요?
네, OpenClaw.init() 함수에서 theme 객체를 사용하여 기본 색상, 위치, 폰트 등의 스타일링 옵션을 구성할 수 있습니다. 다크 모드도 지원됩니다.
동시에 여러 웹사이트에서 사용할 수 있나요?
네,同一个 API 키를 여러 도메인에서 사용하거나, 각 웹사이트에 대해 별도의 API 키를 생성할 수 있습니다. openclaw.json에서 allowedOrigins 설정을 사용하여 도메인을 제한할 수 있습니다.