게스트 채팅을,
내 웹사이트에서.

1. 1
   위젯 만들기

   Prohost에서 AI 채팅 위젯 앱을 열고 방문자에게 보일 이름, 인사말, 버튼 스타일을 설정합니다.

2. 2
   스니펫 복사하기

   다른 웹사이트에 추가 섹션에서 스니펫을 복사합니다. 위젯 ID, 임베드 키, 버튼 설정이 이미 들어 있습니다.

3. 3
   닫는 body 태그 앞에 붙여넣기

   사이트 전체 푸터나 사용자 지정 코드 영역에 넣고 게시하세요. 다음 페이지 로드부터 모서리에 버튼이 나타납니다.

<script
  src="https://app.prohost.ai/webchat.js"
  data-widget="WIDGET_ID"
  data-api-key="WIDGET_API_KEY"
  data-position="bottom-right"
  data-launcher-color="#4F46E5"
  data-launcher-icon="chat"
  data-sound="on"
  async></script>

WIDGET_ID와 WIDGET_API_KEY를 위젯 설정의 값으로 바꾸거나, 앱에서 완성된 스니펫을 그대로 복사하세요. 값이 자동으로 채워집니다. 임베드 키는 공개 값이며 해당 위젯에만 적용됩니다. 계정 접근 권한은 전혀 없습니다. Prohost는 키를 처음 보여준 뒤 숨기므로, 복사 가능한 새 스니펫이 필요하면 키 재발급을 사용하세요.

<script
  src="https://app.prohost.ai/webchat.js"
  data-widget="WIDGET_ID"
  data-api-key="WIDGET_API_KEY"
  async></script>

대부분의 사이트 빌더에서 동작합니다. Webflow, WordPress, Squarespace, Wix 모두 푸터에 사용자 지정 코드를 넣을 자리가 있습니다.

data-hide-mobile은 존재 여부만 봅니다. 빈 문자열을 포함해 어떤 값이든 켜집니다. 나머지 속성은 값으로 판단하며, 특히 data-sound는 소문자 on이라는 정확한 값에만 반응합니다.

• 방문자가 먼저 페이지와 상호작용해야 합니다

  브라우저는 누군가 클릭, 탭, 입력하기 전까지 오디오를 차단합니다. 버튼을 여는 동작도, 창에 입력하는 것도 상호작용에 포함되므로 답장을 유발한 메시지를 보낸 방문자는 소리를 듣게 됩니다. 그래도 브라우저가 재생을 막는다면 문제될 것은 없습니다. 버튼의 안 읽음 배지가 주된 신호이고 소리는 보조 수단입니다.

• 읽고 있는 동안에는 울리지 않습니다

  창이 열려 있고 탭이 앞에 있는 동안에는 소리가 나지 않습니다. 답장이 이미 화면에 있기 때문입니다. 창이 닫혀 있거나 탭이 뒤에 있을 때 울립니다. 안 읽음 배지는 이보다 조금 좁은 규칙을 따라, 창이 닫혀 있을 때만 나타납니다.

• 연달아 온 답장도 알림음은 한 번

  여러 메시지가 한꺼번에 도착해도 메시지마다가 아니라 한 번만 알립니다.

function wireUpWebchat() {
  window.ProhostWebchat.on('webchat_host_message', (event) => {
    console.log(event.type);
  });

  document.querySelector('#my-chat-button')?.addEventListener('click', () => {
    window.ProhostWebchat.open();
    // window.ProhostWebchat.close() collapses it again.
  });
}

if (window.ProhostWebchat) {
  wireUpWebchat();
} else {
  // src*= rather than src$= — the tag may carry a cache-busting query string.
  document
    .querySelector('script[src*="/webchat.js"]')
    ?.addEventListener('load', wireUpWebchat);
}

data-hide-mobile과 함께 쓰면 좋습니다. 휴대폰에서는 기본 버튼을 숨기고 직접 만든 버튼으로 창을 여세요. 이벤트는 Prohost 임베드에서 온 경우에만 전달되며 다른 출처에서는 전달되지 않습니다.