오른쪽 하단 플로팅 채팅 레이아웃 예제 > BlueTalk::블루톡 무료 실시간 채팅 위젯 · 1:1 DM

오른쪽 하단 플로팅 채팅 레이아웃

1. 레이아웃 구조 개요

플로팅 채팅 레이아웃은 대략 다음과 같은 구조를 가집니다.

<!-- 1) 플로팅 버튼 -->
<button id="bluetalk-fab">💬</button>

<!-- 2) 채팅 패널 래퍼 -->
<div id="bluetalk-panel">
    <div class="blt-panel-header">
        <span class="blt-title">실시간 채팅</span>
        <button class="blt-close">✕</button>
    </div>
    <div class="blt-panel-body">
        <div id="bluetalk-widget"></div> <!-- 여기에 블루톡 위젯이 렌더링됨 -->
    </div>
</div>

버튼을 클릭하면 #bluetalk-panel을 열고/닫는 방식으로 구현합니다.

2. CSS 예제 (오른쪽 하단 플로팅)

아래 CSS는 “오른쪽 하단 동그란 버튼 + 그 위로 떠오르는 채팅창” 형태의 기본 스타일 예제입니다.

/* 플로팅 버튼 */
#bluetalk-fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  font-size: 22px;
  box-shadow: 0 10px 25px rgba(15,23,42,0.45);
  background: linear-gradient(135deg, #2563eb, #4f46e5);
  color: #fff;
  z-index: 9998;
}

/* 플로팅 채팅 패널 */
#bluetalk-panel {
  position: fixed;
  right: 20px;
  bottom: 84px; /* 버튼 위에 뜨도록 여유 */
  width: 360px;
  max-width: calc(100% - 40px);
  height: 520px;
  max-height: calc(100vh - 120px);
  background: #020617;
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(15,23,42,0.7);
  overflow: hidden;
  display: none;              /* 기본은 숨김 */
  flex-direction: column;
  z-index: 9999;
}

/* 패널 헤더 */
#bluetalk-panel .blt-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: #020617;
  border-bottom: 1px solid #1e293b;
  color: #e5e7eb;
  font-size: 13px;
}

#bluetalk-panel .blt-title {
  font-weight: 600;
}

#bluetalk-panel .blt-close {
  border: none;
  background: transparent;
  color: #9ca3af;
  cursor: pointer;
  font-size: 16px;
}

/* 패널 바디 (여기에 블루톡 위젯이 들어감) */
#bluetalk-panel .blt-panel-body {
  flex: 1;
  background: #020617;
}

/* 패널 ON/OFF 전환용 클래스 */
#bluetalk-panel.open {
  display: flex;
}

필요에 따라 bottom, width, height 등을 조정해서 사이트 디자인에 맞게 튜닝하시면 됩니다.

3. JS + BlueTalk 초기화 예제

아래는 플로팅 버튼 클릭 시 패널을 열고, 그 안에 BlueTalk를 초기화하는 전체 JS 예제입니다.
중요: Bluetalk.init(...)가 아니라 new BlueTalk(...) 패턴을 사용해야 합니다.

<!-- 1) bluetalk.js 로드 -->
<script src="https://bluetalk.kr/talk/bluetalk.js"></script>

<!-- 2) 플로팅 버튼 + 패널 HTML (body 안 어딘가) -->
<button id="bluetalk-fab">💬</button>

<div id="bluetalk-panel">
  <div class="blt-panel-header">
    <span class="blt-title">실시간 채팅</span>
    <button class="blt-close">✕</button>
  </div>
  <div class="blt-panel-body">
    <div id="bluetalk-widget"></div>
  </div>
</div>

<!-- 3) 서버에서 내려준 값 세팅 + BlueTalk 초기화 -->
<script>
  // 여기 값들은 실제 서비스에서는 PHP/Node/Python 등 서버에서 생성해서 내려줘야 합니다.
  window.SITE_KEY          = "발급받은_site_key";
  window.GLOBAL_USER_ID    = "user123";
  window.GLOBAL_USER_KEY   = "서버에서_생성한_user_key";
  window.GLOBAL_NICKNAME   = "홍길동";

  // 플로팅 버튼/패널 DOM
  const fab   = document.getElementById("bluetalk-fab");
  const panel = document.getElementById("bluetalk-panel");

  // BlueTalk 인스턴스
  let bt = null;

  function openPanel() {
    panel.classList.add("open");

    // 최초 한 번만 BlueTalk 초기화
    if (!bt && window.BlueTalk) {
      bt = new BlueTalk({
        mode:     "global",           // 또는 "channel", "dm"
        targetId: "bluetalk-widget"   // 패널 안 div id
      });
      bt.init();
    }
  }

  function closePanel() {
    panel.classList.remove("open");
  }

  fab.addEventListener("click", () => {
    // 이미 열려 있으면 닫고, 아니면 열기
    if (panel.classList.contains("open")) {
      closePanel();
    } else {
      openPanel();
    }
  });

  const closeBtn = panel.querySelector(".blt-close");
  if (closeBtn) {
    closeBtn.addEventListener("click", () => closePanel());
  }
</script>

이 예제에서는 panel.open 클래스만으로 ON/OFF를 제어하고 있습니다.
필요하다면 ESC 키로 닫기, 바깥 클릭 시 닫기 등도 추가로 구현할 수 있습니다.

4. 그누보드/아미나에서 적용할 때 패턴

그누보드/아미나에서는 head.sub.php 또는 공통 레이아웃 파일에 플로팅 버튼 + 패널 HTML과 JS를 넣으면 됩니다.

<?php
// head.sub.php 상단 등에서 미리 아래 변수들을 준비해 둔다고 가정
// $blt_site_key, $blt_secret, $blt_user_id, $blt_user_key, $blt_nickname ...
?>

<button id="bluetalk-fab">💬</button>

<div id="bluetalk-panel">
  <div class="blt-panel-header">
    <span class="blt-title">실시간 채팅</span>
    <button class="blt-close">✕</button>
  </div>
  <div class="blt-panel-body">
    <div id="bluetalk-widget"></div>
  </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 fab   = document.getElementById("bluetalk-fab");
  const panel = document.getElementById("bluetalk-panel");
  let bt = null;

  function openPanel() {
    panel.classList.add("open");
    if (!bt && window.BlueTalk) {
      bt = new BlueTalk({
        mode:     "global",
        targetId: "bluetalk-widget"
      });
      bt.init();
    }
  }

  function closePanel() {
    panel.classList.remove("open");
  }

  fab.addEventListener("click", () => {
    panel.classList.contains("open") ? closePanel() : openPanel();
  });

  const closeBtn = panel.querySelector(".blt-close");
  if (closeBtn) {
    closeBtn.addEventListener("click", () => closePanel());
  }
</script>

“어느 페이지에서만 플로팅을 보이게 할지”는
defined('_INDEX_')나 $bo_table 등으로 조건문을 추가해 제어하시면 됩니다.

5. 정리

플로팅 레이아웃은 버튼 + 패널 + 간단한 CSS/JS만으로 구현할 수 있습니다.
BlueTalk 초기화는 항상 window.SITE_KEY / window.GLOBAL_* + new BlueTalk().init() 패턴을 사용합니다.
그누보드/아미나에서는 head.sub.php 등 공통 레이아웃에 플로팅 코드를 넣고, 페이지/게시판별로 출력 여부를 제어하면 가장 편합니다.

현재 사용 중인 테마/레이아웃 구조가 복잡해서 위치가 애매하다면,
head.sub.php 일부와 함께 Q&A 게시판에 올려주시면
구조에 맞는 커스터마이징 방향도 같이 잡아볼 수 있습니다.