그누보드 기본 연동 예제 > BlueTalk::블루톡 무료 실시간 채팅 위젯 · 1:1 DM

그누보드 기본 연동

1. 수정할 파일 위치 확인

사용 중인 테마에 따라 head.sub.php 파일 위치가 다를 수 있습니다. 일반적으로는 다음 중 한 곳에 있습니다.

/theme/사용중인테마/head.sub.php
/theme/사용중인테마/head.php (테마 구조에 따라 다를 수 있음)
아미나 빌더의 경우, 빌더 설정에서 지정한 레이아웃 파일 내부

※ 이 예제에서는 head.sub.php에 블루톡을 넣는다고 가정합니다.

2. site_key · secret 설정

먼저, 블루톡에서 발급받은 site_key와 user_key 생성을 위한 secret 값을 공통 설정에 추가합니다.

// 예: /config.php 또는 공통 include 파일 (common.php 등)

// BlueTalk site_key (블루톡에서 발급)
$blt_site_key = '발급받은_site_key';

// BlueTalk user_key 생성을 위한 비밀키 (서버에서만 알고 있어야 함)
$blt_secret   = '서버_내부_비밀문자열_예시';

※ 실제 서비스에서는 $blt_secret 값을 .env, 별도 설정 파일, DB 등 코드 외부에 보관하는 것을 권장합니다.

3. head.sub.php에 회원정보 · user_key 생성 코드 추가

그누보드/아미나의 head.sub.php는 페이지 상단 공통 레이아웃을 담당합니다.
로그인 정보($member, $is_member)를 이용해 user_id / nickname / user_key를 준비합니다.

<?php
// /theme/사용중인테마/head.sub.php 상단 또는 공통 include 위치

// 1) BlueTalk site_key / secret 은 config.php 등에서 이미 정의되어 있다고 가정
//    (예: $blt_site_key, $blt_secret)

// 2) 로그인 여부에 따라 user_id / nickname 설정
if ($is_member) {
    $blt_user_id  = $member['mb_id'];
    $blt_nickname = get_text($member['mb_nick']);
} else {
    $blt_user_id  = 'guest';
    $blt_nickname = '손님';
}

// 3) user_key 생성 (예: SHA-256)
//    실제로는 가입일/만료시간/추가 정보를 payload에 함께 넣어도 좋습니다.
$blt_payload  = $blt_user_id . '|' . $blt_site_key . '|' . $blt_secret;
$blt_user_key = hash('sha256', $blt_payload);
?>

※ 이 부분은 “어떻게 user_key를 만들 것인가”에 대한 예시일 뿐이며,
서비스 특성에 맞게 payload를 더 보강해 사용하시면 됩니다.

4. head.sub.php에 블루톡 위젯/스크립트 삽입

이제 실제로 <div id="bluetalk"> 영역과 bluetalk.js, 초기화 코드를 head.sub.php에 추가합니다.
아래 예시는 화면 오른쪽 하단에 고정된 채팅창 레이아웃 예시입니다.

<!-- /theme/사용중인테마/head.sub.php 하단 근처 -->

<style>
/* 오른쪽 하단 플로팅 컨테이너 예시 */
#bluetalk-container {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 360px;
    max-width: calc(100% - 40px);
    height: 480px;
    max-height: calc(100vh - 80px);
    z-index: 9999;
    box-shadow: 0 14px 32px rgba(15,23,42,0.6);
    border-radius: 12px;
    overflow: hidden;
    background: #020617; /* 다크 배경 */
}
</style>

<!-- 블루톡 위젯 영역 -->
<div id="bluetalk-container">
    <div id="bluetalk" style="width:100%; height:100%;"></div>
</div>

<!-- 블루톡 JS SDK -->
<script src="https://bluetalk.kr/talk/bluetalk.js"></script>

<!-- 초기화 코드 -->
<script>
  // PHP에서 만든 값을 JS 전역으로 전달
  window.SITE_KEY          = "<?= $blt_site_key; ?>";
  window.GLOBAL_USER_ID    = "<?= htmlspecialchars($blt_user_id, ENT_QUOTES, 'UTF-8'); ?>";
  window.GLOBAL_USER_KEY   = "<?= $blt_user_key; ?>";
  window.GLOBAL_NICKNAME   = "<?= htmlspecialchars($blt_nickname, ENT_QUOTES, 'UTF-8'); ?>";

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

※ 예전 문서에 있던 Bluetalk.init({...}) 형태는 더 이상 사용하지 않습니다.
반드시 위처럼 new BlueTalk({...}) + bt.init() 패턴을 사용해야 합니다.

5. 조건부 출력 예제 (특정 게시판/메인에서만)

모든 페이지에 채팅창을 띄우기 부담스럽다면, 아래처럼 조건을 걸어서 특정 페이지에서만 출력할 수 있습니다.

<?php
// head.sub.php 내부

$show_bluetalk = false;

// 1) 메인에서만
if (defined('_INDEX_')) {
    $show_bluetalk = true;
}

// 2) 특정 게시판에서만 (예: free)
if (isset($bo_table) && $bo_table === 'free') {
    $show_bluetalk = true;
}
?>

<?php if ($show_bluetalk) { ?>
  <div id="bluetalk-container">
    <div id="bluetalk" style="width:100%; height:100%;"></div>
  </div>

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

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

이렇게 $show_bluetalk 플래그를 사용하면,
“어느 페이지에 띄울지” 조건이 복잡해져도 코드 위치는 한 군데로 깔끔하게 관리할 수 있습니다.

6. 정리