교차 오리진 임베드 테스트

아래 코드를 복사해 내 컴퓨터에 `.html` 파일로 저장한 뒤 브라우저로 열어주세요. `file://` 은 이 사이트와 완전히 다른 오리진이라, 고객사 웹사이트에 붙였을 때와 같은 조건으로 검증됩니다. (이 페이지 안에서 테스트하면 같은 오리진이라 의미가 없습니다.)

고객 문의 · customer-default사내 문의 · internal-default

① 익명 방문자

가장 단순한 형태 — 스크립트 한 줄.

<!doctype html>
<html lang="ko">
<head><meta charset="utf-8"><title>세컨팀톡 임베드 테스트</title></head>
<body style="font-family:system-ui;padding:40px;max-width:640px">
  <h1>고객사 웹사이트 (가짜)</h1>
  <p>오른쪽 아래 런처를 눌러 상담을 열어보세요.</p>

  <script src="https://talk.second-team.com/widget.js" data-inbox-key="customer-default" async></script>
</body>
</html>

② 식별 사용자 (사내 직원)

HMAC 서명으로 신원이 확인된 상태로 문의합니다. 서명이 틀리면 거절하지 않고 익명으로 내려갑니다.

<!doctype html>
<html lang="ko">
<head><meta charset="utf-8"><title>세컨팀톡 — 식별 사용자 테스트</title></head>
<body style="font-family:system-ui;padding:40px;max-width:640px">
  <h1>사내 인트라넷 (가짜)</h1>
  <p>로그인한 직원으로 문의하는 흐름입니다. 상담원 콘솔에 이름과 인증 배지(✓)가 보입니다.</p>

  <script>
    // ⚠️ 데모용입니다. 운영에서는 고객사 **서버**가 로그인 세션을 근거로 서명해
    //    아래 data-signature 값을 직접 심어야 합니다. 브라우저에서 받아오면 의미가 없습니다.
    (async function () {
      var userId = "emp-1";
      var res = await fetch("https://talk.second-team.com/api/demo/sign?key=customer-default&userId=" + userId);
      var json = await res.json();

      var s = document.createElement("script");
      s.src = "https://talk.second-team.com/widget.js";
      s.async = true;
      s.setAttribute("data-inbox-key", "customer-default");
      s.setAttribute("data-user-id", userId);
      s.setAttribute("data-signature", json.signature || "");
      s.setAttribute("data-name", "김직원");
      s.setAttribute("data-email", "emp-1@example.com");
      document.body.appendChild(s);
    })();
  </script>
</body>
</html>

확인할 것

세컨팀톡