AI 채팅 위젯 코드: 어떤 웹사이트에든 지원 어시스턴트 추가하기

AI 채팅 위젯은 방문자가 지금 읽고 있는 페이지에서 바로 답변합니다. api14에서는 통합 전체가 스크립트 태그 하나로 끝납니다. 대시보드에서 위젯을 디자인하고, 코드를 복사해 HTML에 붙여 넣으면 됩니다. 설치할 SDK도, 작성할 서버 코드도 없습니다.

채팅 위젯이 하는 일

채팅 위젯은 선택한 모델의 답변을 실시간으로 보여 주는 작은 대화 창입니다. 방문자에게는 보이지 않는, 직접 작성한 비공개 지침을 따르므로 고객 지원 담당자, 영업 어시스턴트, 문서 안내자 역할을 맡길 수 있습니다. 답변은 기본 서식(단락, 목록, 굵은 글씨, 코드, 링크)을 지원하고, 중지 버튼으로 긴 답변을 멈출 수 있으며, 방문자가 같은 탭에서 페이지를 이동해도 대화가 유지됩니다.

위젯 코드

위젯에서 위젯을 저장하면 편집기에 삽입 코드가 표시됩니다.

<script src="https://api14.com/widget.js" data-widget="YOUR_WIDGET_ID" async></script>

채팅이 나타날 위치의 <body> 안에 태그를 넣으세요. 선택 속성 두 가지로 표시 위치와 방식을 바꿀 수 있습니다.

화면 모서리의 실행 버튼을 선호한다면 편집기에서 떠 있는 버튼 배치를 선택하세요. 코드는 그대로입니다.

채팅 어시스턴트를 공개하는 네 단계

1. 모델을 고릅니다. 카탈로그의 어떤 채팅 모델이든 사용할 수 있습니다. 모델 선택기에 모델별 가격이 표시되므로 빠르고 저렴한 모델로 시작했다가 사이트를 건드리지 않고 나중에 바꿀 수 있습니다.
2. API 키를 선택합니다. 모든 위젯은 내 API 키 중 하나로 실행됩니다. 기존 키를 선택하거나 목록의 마지막 옵션인 새 API 키 만들기로 이 위젯 전용 키를 만드세요. 키의 한도가 위젯에 적용되며, 키 자체는 브라우저로 전달되지 않습니다.
3. 지침과 문구를 작성합니다. 제목, 환영 메시지, 입력창 안내 문구, 버튼 문구를 정하세요. 제품 설명과 원하는 말투를 담은 비공개 지침도 추가합니다.
4. 도메인을 허용합니다. 설정, 위젯 사이트에 위젯을 실행할 사이트를 등록하세요. 다른 사이트에서 온 요청은 거부됩니다.

페이지를 망가뜨리지 않는 이유

위젯은 격리된 Shadow DOM 안에 그려집니다. 사이트의 CSS가 채팅 창으로 새어 들어가지 않고, 위젯도 페이지의 스타일을 바꾸지 않습니다. 비동기로 로드되므로 나머지 콘텐츠의 렌더링을 막지도 않습니다.

공개 전 점검

• 편집기에서 미리보기를 열고 고객이 실제로 묻는 질문을 해 보세요. 미리보기는 저장하지 않은 설정으로 실제 요청을 보냅니다.
• 위젯에 일일 지출 한도를 설정해 바쁜 날에도 예상치 못한 비용이 나오지 않게 하세요.
• 예상 트래픽을 감당할 잔액이 있는지 확인하세요. 방문자 요청은 모델의 정상 가격으로 USD 잔액에서 차감됩니다.

바로 시작해 볼까요? 계정 없이 위젯 페이지에서 채팅 위젯을 디자인하고, 위젯 문서에서 전체 레퍼런스를 확인하세요.