기본 위젯 설치 예제 (HTML/JS) > BlueTalk::블루톡 무료 실시간 채팅 위젯 · 1:1 DM

기본 위젯 설치 예제

1. 최소 예제 – HTML 한 페이지

아래 코드는 basic.html 같은 파일 하나 만들어서 붙여넣으면 바로 동작하는 가장 단순한 형태입니다.
실제로 테스트해 보고 싶다면, site_key만 본인 값으로 바꿔서 사용해 보세요.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>BlueTalk 위젯 기본 예제</title>

    <!-- 1) 블루톡 JS SDK 로드 -->
    <script src="https://bluetalk.kr/talk/bluetalk.js"></script>
</head>
<body style="margin:0; padding:0;">

    <!-- 2) 채팅이 들어갈 영역 -->
    <div id="bluetalk" style="width:100%; height:100vh;"></div>

    <!-- 3) 테스트용 값으로 초기화 -->
    <script>
      // ※ 실제 서비스에서는 서버에서 생성한 값을 써야 합니다.
      window.SITE_KEY          = "발급받은_site_key";  // ★ 반드시 본인 site_key로 변경
      window.GLOBAL_USER_ID    = "guest";             // 테스트용
      window.GLOBAL_USER_KEY   = "test_user_key";     // 테스트용 (실서비스에서는 서버에서 생성)
      window.GLOBAL_NICKNAME   = "손님";

      const bt = new BlueTalk({
        mode:     'global',   // 전체 채팅
        targetId: 'bluetalk'  // 위 div id와 동일
      });
      bt.init();
    </script>
</body>
</html>

※ 위 예제는 “브라우저에서만” 빠르게 화면을 확인하기 위한 코드입니다.
실제 서비스에서는 user_key를 반드시 서버에서만 생성해야 합니다.

2. PHP에서 값 주입하는 기본 패턴

실제로는 서버에서 로그인 정보를 보고 user_id / nickname / user_key를 만들어서 HTML에 넘겨주게 됩니다.
아래 예제는 아무 PHP 페이지에도 그대로 응용할 수 있는 기본 패턴입니다.

<?php
// 예시: user 정보는 세션 또는 로그인 시스템에서 가져온다고 가정
$is_login  = isset($_SESSION['user']);  // 예시
if ($is_login) {
    $user_id  = $_SESSION['user']['id'];
    $nickname = $_SESSION['user']['nick'];
} else {
    $user_id  = 'guest';
    $nickname = '손님';
}

// site_key / secret 은 설정 파일에서 불러온다고 가정
$blt_site_key = '발급받은_site_key';
$blt_secret   = '서버_내부_비밀문자열';

// 매우 단순한 user_key 예시 (실제 서비스에서는 payload를 더 풍부하게 구성하세요)
$payload    = $user_id . '|' . $blt_site_key . '|' . $blt_secret;
$user_key   = hash('sha256', $payload);
?>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>BlueTalk PHP 연동 예제</title>
    <script src="https://bluetalk.kr/talk/bluetalk.js"></script>
</head>
<body>

    <div id="bluetalk" style="width:100%; height:100vh;"></div>

    <script>
      window.SITE_KEY          = "<?php echo $blt_site_key; ?>";
      window.GLOBAL_USER_ID    = "<?php echo $user_id; ?>";
      window.GLOBAL_USER_KEY   = "<?php echo $user_key; ?>";
      window.GLOBAL_NICKNAME   = "<?php echo htmlspecialchars($nickname, ENT_QUOTES, 'UTF-8'); ?>";

      const bt = new BlueTalk({
        mode:     'global',
        targetId: 'bluetalk'
      });
      bt.init();
    </script>

</body>
</html>

※ 위 코드는 “PHP 한 파일 안에서” 모든 걸 처리하는 예시입니다.
실제로는 config.php / 공통 include 파일에 $blt_site_key, $blt_secret 등을 두고, 레이아웃 템플릿에서 JS 부분만 출력하도록 분리하는 것을 추천합니다.

3. 기존 사이트 HTML에 위젯만 끼워넣기

블루톡 위젯은 <div id="bluetalk"> 위치에 렌더링되기 때문에,
기존 페이지 어디든 쉽게 끼워 넣을 수 있습니다.

예시) 본문 우측에 카드 형태로 배치

<!-- 예: 부트스트랩 레이아웃 -->
<div class="row">
  <div class="col-sm-8">
    <!-- 기존 콘텐츠 -->
    ... 게시글 / 내용 ...
  </div>

  <div class="col-sm-4">
    <div class="panel panel-default">
      <div class="panel-heading">실시간 채팅</div>
      <div class="panel-body" style="padding:0;">
        <div id="bluetalk" style="height:480px;"></div>
      </div>
    </div>
  </div>
</div>

<script src="https://bluetalk.kr/talk/bluetalk.js"></script>
<script>
  window.SITE_KEY          = "<?php echo $blt_site_key; ?>";
  window.GLOBAL_USER_ID    = "<?php echo $user_id; ?>";
  window.GLOBAL_USER_KEY   = "<?php echo $user_key; ?>";
  window.GLOBAL_NICKNAME   = "<?php echo htmlspecialchars($nickname, ENT_QUOTES, 'UTF-8'); ?>";

  const bt = new BlueTalk({
    mode:     'global',
    targetId: 'bluetalk'
  });
  bt.init();
</script>

※ 중요 : 위젯 아이디는 bluetalk가 아니어도 상관 없습니다.
다른 이름을 쓰고 싶다면, <div id="my-chat"> + targetId: 'my-chat' 조합으로 맞춰만 주시면 됩니다.

4. 예전 문서와의 차이 (Bluetalk.init 사용 금지)

예전 문서/샘플에는 다음과 같은 형태의 코드가 있을 수 있습니다.

// ❌ 현재 버전에서는 존재하지 않는 패턴 (사용하면 안 됨)
Bluetalk.init({
  site_key: "....",
  user_id:  "....",
  user_key: "....",
  nickname: "...."
});

현재 bluetalk.js에는 Bluetalk.init() 함수가 없습니다.
따라서 이런 형태로 사용하면 Uncaught ReferenceError: Bluetalk is not defined 같은 에러가 발생합니다.

항상 아래 형태로 사용해야 합니다.

<script src="https://bluetalk.kr/talk/bluetalk.js"></script>

<div id="bluetalk"></div>

<script>
  window.SITE_KEY          = "...";
  window.GLOBAL_USER_ID    = "...";
  window.GLOBAL_USER_KEY   = "...";
  window.GLOBAL_NICKNAME   = "...";

  const bt = new BlueTalk({
    mode:     'global',
    targetId: 'bluetalk'
  });
  bt.init();
</script>

5. 정리

HTML만으로 테스트할 때는 basic.html 예제를 그대로 쓰면 됩니다.
실서비스에서는 반드시 서버에서 user_key를 생성해서 내려줘야 합니다.
JS에서는 항상 window.SITE_KEY / window.GLOBAL_* 값을 세팅한 뒤 new BlueTalk().init()을 호출합니다.
위젯 아이디(bluetalk)는 마음대로 바꿀 수 있으며, targetId 값만 맞춰주면 됩니다.

“이 코드 그대로 써도 되나?” 싶은 부분이 있으면, Q&A 게시판에 소스 일부와 함께 올려주시면
실제 구조에 맞게 수정하는 방향까지 같이 잡아갈 수 있습니다.