Deyo developer guide

복사 한 번으로 설치하고, origin과 CSP로 범위를 제한하세요.

Deyo에는 공개 관리 API나 SDK가 없습니다. 이 가이드는 워크스페이스별 웹 위젯을 실제 서비스에 설치하고 검증하는 데 필요한 인터페이스만 다룹니다.

워크스페이스별 설치 코드

실제 코드는 설정 > 설치에서 복사하세요. 아래의 YOUR_WORKSPACE_ID를 추측해 만들거나 다른 워크스페이스 값으로 바꾸지 않습니다.

<script async src="https://app.deyo.kr/widget/v1.js"
  data-workspace-id="YOUR_WORKSPACE_ID"></script>

설치 전 준비

설정 > 위젯에서 브랜드 색상, 첫 인사말, 좌우 위치와 화면 언어를 정합니다. 설정 > 보안에는 위젯을 실제로 띄울 사이트의 origin을 추가합니다.

origin은 https://example.com처럼 프로토콜과 호스트, 필요한 경우 포트까지 포함하고 경로나 마지막 슬래시는 넣지 않습니다. 운영과 스테이징 주소가 다르면 각각 등록합니다.

설치 스크립트 넣기

설정 > 설치에서 현재 워크스페이스용 script 태그를 복사합니다. 사이트 공통 레이아웃의 body 끝부분이나 프레임워크의 안전한 외부 스크립트 로더에 한 번만 추가하세요.

스크립트의 data-workspace-id는 워크스페이스를 식별하므로 다른 워크스페이스의 값을 섞지 않습니다. 로더는 페이지가 준비된 뒤 위젯을 마운트하며 같은 페이지에 중복 삽입해도 하나만 표시되도록 보호됩니다.

외부 script 태그를 추가하고 정확한 origin을 등록할 수 있는 사이트라면 개발자 없이도 직접 설치할 수 있습니다. 사이트 빌더가 사용자 정의 스크립트를 허용하지 않거나 CSP를 직접 관리하기 어렵다면 사이트 관리자나 개발자의 도움이 필요할 수 있습니다.

CSP와 허용 origin

엄격한 Content-Security-Policy를 사용하면 script-src, connect-src, frame-src에 Deyo 앱 origin을 허용해야 합니다. 사이트 정책에 따라 style-src도 위젯이 사용하는 스타일 방식을 허용해야 할 수 있습니다. 먼저 브라우저 개발자 도구의 CSP 오류를 확인한 뒤 필요한 지시문만 최소 범위로 추가하세요.

Deyo의 허용 도메인 목록과 사이트 CSP는 서로 다른 보호 장치입니다. 둘 중 하나라도 막으면 위젯이 로드되지 않을 수 있습니다.

위젯 제거

사이트 코드에서 Deyo script 태그를 삭제하고 배포하면 새로 여는 페이지에서 위젯이 사라집니다. 이어서 설정 > 보안의 허용 도메인에서도 해당 origin을 제거하세요.

이미 열려 있던 탭은 새로고침 전까지 기존 위젯을 보일 수 있습니다. 스크립트를 제거해도 Deyo의 기존 지식과 대화 데이터가 자동 삭제되지는 않습니다. 데이터 삭제가 필요하면 해당 소스 또는 워크스페이스의 삭제 절차를 별도로 진행합니다.

프레임워크별 안전한 배치

일반 HTML

공통 템플릿의 </body> 직전에 한 번 삽입합니다. async 속성을 유지합니다.

Next.js·React

인증·온보딩·위젯 iframe을 제외한 고객 화면 레이아웃에서 hydration 뒤 외부 스크립트로 로드합니다.

SPA 라우터

라우트가 바뀔 때마다 스크립트를 다시 만들지 말고 앱 셸에서 한 번만 로드합니다.

태그 매니저

동의와 CSP 정책을 확인하고 같은 태그가 여러 트리거에서 중복 실행되지 않게 제한합니다.

배포 뒤 설치 검증

  1. 1운영 URL에서 위젯 버튼이 하나만 보이고 열기·닫기가 동작하는지 확인합니다.
  2. 2데스크톱, 실제 모바일 화면과 키보드가 열린 상태를 확인합니다.
  3. 3허용하지 않은 origin에서는 위젯이 차단되는지 확인합니다.
  4. 4근거가 있는 질문은 출처와 함께 답하고 범위 밖 질문은 추측하지 않는지 확인합니다.
  5. 5담당자 연결 질문이 Inbox와 설정한 알림 채널에 도착하는지 확인합니다.
  6. 6설정 체크리스트에서 위젯 설치 항목이 완료됐는지 확인합니다.