🔌 EV 충전기 AI 상담 위젯

아래 코드 스니펫을 사용하여 고객 운영 관제 시스템에 AI 챗봇을 연동하세요

Embed 방법 (Script Tag)

아래 코드를 고객 웹사이트의 <body> 태그 안에 삽입하면 우측 하단에 플로팅 버블 아이콘이 생성됩니다.

<!-- AI Call Center Chat Widget -->
<script>
  (function() {
    var iframe = document.createElement('iframe');
    iframe.src = 'https://your-domain.com/widget';
    iframe.style.cssText = 'position:fixed;bottom:0;right:0;width:400px;height:600px;border:none;z-index:9999;';
    document.body.appendChild(iframe);
  })();
</script>

Embed 방법 (iframe)

다른 방식으로, iframe 태그를 바로 삽입할 수도 있습니다.

<iframe
  src="https://your-domain.com/widget"
  style="position:fixed;bottom:0;right:0;
         width:400px;height:600px;
         border:none;z-index:9999;"
  allow="microphone"
></iframe>

React 컴포넌트 직접 사용

React 프로젝트에서 Package로 직접 사용하는 방식입니다.

import ChatWidget from '@/components/chat-widget';

<ChatWidget
  apiUrl="https://your-api.com/api/chat"
  title="EV 충전기 AI 상담"
  subtitle="무엇이든 물어보세요!"
  primaryColor="#6366f1"
  position="bottom-right"
/>

⬇ 우측 하단의 플로팅 아이콘을 클릭해 실제 AI 상담 위젯을 테스트해보세요