챗봇 위젯 통합 가이드

chat.ggone.co.kr 챗봇을 쉽게 웹사이트에 추가하세요

개요

chat.ggone.co.kr 챗봇 위젯은 간단한 몇 줄의 코드만으로 여러분의 웹사이트에 고급 AI 챗봇을 추가할 수 있게 해줍니다. 플로팅 버튼 형태로 표시되며, 클릭하면 챗봇 창이 열립니다.

빠른 시작

1단계: 챗봇 설정 스크립트 추가

HTML 파일의 </body> 태그 직전에 다음 코드를 추가하세요:

<!-- 챗봇 위젯 설정 -->
<script>
  window.CHATBOT_CONFIG = {
    url: 'https://your-chatbot.chat.ggone.co.kr/chatbot',
    color: '#2563eb',  // 선택사항: 버튼 및 헤더 색상
    headerText: '24h/365d Online'  // 선택사항: 헤더 텍스트
  };
</script>
<link rel="stylesheet" href="https://test.chat.ggone.co.kr/css/chatbot-widget.css">
<script src="https://test.chat.ggone.co.kr/js/chatbot-widget.js"></script>

2단계: 챗봇 URL 설정

url 값을 여러분의 챗봇 URL로 변경하세요:

url: 'https://your-chatbot.chat.ggone.co.kr/chatbot'

3단계: 완료!

이제 웹사이트를 새로고침하면 우측 하단에 챗봇 버튼이 표시됩니다.

⚠️ 테스트 방법:

• 로컬 테스트: http://localhost:8000/index.html로 접속하여 테스트할 수 있습니다.
• 중요: 파일시스템에서 직접 HTML 파일을 열어서 읽을 경우(예: file:// 프로토콜)에는 챗봇이 동작하지 않습니다. 반드시 웹 서버를 통해 접속해야 합니다.

로컬 테스트 방법

방법 1: Python HTTP 서버 사용 (권장)

터미널에서 이 디렉토리로 이동한 후 다음 명령을 실행하세요:

# Python 3
python -m http.server 8000

# 또는 Python 2
python -m SimpleHTTPServer 8000

그 다음 브라우저에서 다음 주소로 접속:

http://localhost:8000/index.html
http://localhost:8000/hair_salon.html

방법 2: Node.js http-server 사용

# http-server 설치 (한 번만)
npm install -g http-server

# 서버 실행
http-server -p 8000

방법 3: VS Code Live Server 확장 사용

VS Code에서 "Live Server" 확장을 설치하고, HTML 파일을 우클릭하여 "Open with Live Server"를 선택하세요.

⚠️ 주의사항:

• 직접 파일 열기 (file://)는 작동하지 않습니다: 브라우저 보안 정책상 file:// 프로토콜에서는 iframe이 제대로 작동하지 않을 수 있습니다.
• 챗봇 URL: 헤어러버(https://hairlover.chat.ggone.co.kr/chatbot), 기타(https://test.chat.ggone.co.kr/chatbot)
• 프로덕션 환경: 실제 웹서버에 배포할 때는 Nginx 설정에서 localhost 허용을 제거하세요.

설정 옵션

필수 설정

url: 챗봇의 URL (필수)

선택 설정

color: 챗봇 버튼과 헤더의 색상 (hex 색상 코드)
headerText: 챗봇 헤더에 표시될 텍스트

💡 팁:

선택 설정을 생략하면 기본값이 사용됩니다. 기본 색상은 파란색(#2563eb), 기본 헤더 텍스트는 '24h/365d Online'입니다.

색상 팔레트

아래 색상 중 하나를 선택하거나, 원하는 hex 색상 코드를 사용할 수 있습니다.

#2563eb

파란색 (기본)

#10b981

초록색

#f59e0b

주황색

#ef4444

빨간색

#8b5cf6

보라색

#ec4899

분홍색

#14b8a6

청록색

#6366f1

남색

예시: 초록색을 사용하려면 다음과 같이 설정하세요:

window.CHATBOT_CONFIG = {
  url: 'https://your-chatbot.chat.ggone.co.kr/chatbot',
  color: '#10b981'
};

완전한 예시

다음은 모든 설정을 포함한 완전한 예시입니다:

<!DOCTYPE html>
<html lang="ko">
    <head> <title>My Website</title> </head>
    <body>
        My Website Contents

        <script> window.CHATBOT_CONFIG = { 
            url: 'https://hairlover.chat.ggone.co.kr/chatbot', 
            color: '#764ba2', 
            headerText: 'Hair Lover Salon' 
        }; 
        </script>
        <link rel="stylesheet" href="/css/chatbot-widget.css">
        <script src="/js/chatbot-widget.js"></script>
    </body>
</html>

주의사항

중요:

• 챗봇 CSS와 JavaScript 파일은 반드시 window.CHATBOT_CONFIG 설정 이후에 로드되어야 합니다.
• 챗봇 URL은 정확한 도메인과 경로를 포함해야 합니다.
• 색상은 hex 색상 코드 형식(#으로 시작하는 6자리 코드)을 사용해야 합니다.

📁 파일 경로 설정:

• 참고 예시: 현재 디렉토리에 있는 index.html 파일을 참고하세요.
• 중요: chatbot-widget.css와 chatbot-widget.js 파일을 서버에 설치한 후, 설치된 경로를 정확하게 지정해주어야 합니다.
• 파일이 다른 경로에 설치되어 있다면 해당 경로로 수정해야 합니다.

<link rel="stylesheet" href="/css/chatbot-widget.css">
<script src="/js/chatbot-widget.js"></script>

보안 및 도메인 등록

⚠️ 필수: 도메인 등록 필요

보안상의 이유로, chat.ggone.co.kr에서 챗봇을 사용하는 홈페이지의 도메인 주소를 사전에 등록해야 합니다. 챗봇을 사용하려는 웹사이트의 도메인 주소를 아래 연락처로 알려주시기 바랍니다.

이메일: ggone@6763@naver.com
전화: +82-10-6763-7138

도메인 등록이 완료되지 않으면 챗봇이 정상적으로 작동하지 않을 수 있습니다.

💡 안내:

• 도메인 등록 시 사용할 도메인 주소를 정확히 알려주세요 (예: www.example.com, example.com)
• 개발/테스트 환경의 경우 localhost 또는 127.0.0.1도 등록 가능합니다.
• 도메인 등록은 보통 1-2일 내에 완료됩니다.

실제 작동 예시

아래는 이 페이지에 포함된 실제 챗봇입니다. 우측 하단의 버튼을 클릭하여 챗봇이 어떻게 작동하는지 확인해보세요!

현재 설정:

챗봇 URL: https://hairlover.chat.ggone.co.kr/chatbot
색상: #764ba2 (보라색)
헤더 텍스트: Hair Lover Salon

테스트 방법:

이 페이지는 http://localhost:8000/index.html로 접속하여 테스트할 수 있습니다. 파일시스템에서 직접 열 경우(예: file:// 프로토콜)에는 챗봇이 동작하지 않습니다.

실제 적용 사례

챗봇이 적용된 사례로 아래 사이트가 있습니다:

https://ggone.co.kr/

해당 웹사이트를 방문하여 실제 프로덕션 환경에서 챗봇 위젯이 어떻게 통합되고 작동하는지 확인해보세요.

자주 묻는 질문

Q: 챗봇이 표시되지 않아요

A: 다음을 확인해보세요:

챗봇 설정 스크립트가 </body> 태그 직전에 있는지 확인
브라우저 콘솔에서 오류 메시지 확인
챗봇 URL이 올바른지 확인

Q: 색상을 변경했는데 적용이 안 돼요

A: hex 색상 코드 형식(#으로 시작하는 6자리)을 사용했는지 확인하세요.

Q: 모바일에서도 작동하나요?

A: 네, 챗봇 위젯은 반응형으로 설계되어 데스크톱과 모바일 모두에서 작동합니다.

법적 고지

이용약관|개인정보 처리방침|환불 및 구독 취소 정책