개발 문서 포털

API 명세서와 SDK, Playground 개발자 가이드를 참고하세요.

tB mini 가이드

Textway API 개발자 가이드

Playground 사용법

FAQ

tB mini 가이드

tB mini SDK를 활용한 개발 방법을 알아보세요.

NPM/Yarn 설치

CDN 사용

NPM으로 설치하기

• 패키지 설치:

npm install tbmini-sdk

• JavaScript/TypeScript에서 사용:

import { TaggingBox } from 'tbmini-sdk';

// SDK 초기화
TaggingBox.init({
  containerId: 'tagging-container',
  apiKey: 'your-api-key',
  userKey: 'user-unique-id',
  width: '400px',
  height: '600px'
});

• React에서 사용 예시:

import React, { useEffect } from 'react';
import { TaggingBox } from 'tbmini-sdk';

function App() {
  useEffect(() => {
    TaggingBox.init({
      containerId: 'tagging-container',
      apiKey: 'your-api-key',
      userKey: 'user-unique-id',
      width: '25rem',
      height: '600px',
      animation: 'fadeIn'
    });
  }, []);

  return (
    <div>
      <h1>My App</h1>
      <div id="tagging-container"></div>
    </div>
  );
}

SDK 옵션 설정

기본 설정

TaggingBox.init({
  containerId: 'tagging-container',  // 필수: 컨테이너 ID
  apiKey: 'your-api-key',           // 필수: API 키
  userKey: 'user-unique-id'         // 필수: 사용자 고유 식별자
});

크기 및 위치 설정

TaggingBox.init({
  containerId: 'tagging-container',
  apiKey: 'your-api-key',
  userKey: 'user-unique-id',
  width: '400px',                   // 기본값: '400px'
  height: '600px'                   // 기본값: '600px'
});

컨테이너 스타일 설정

// SDK 초기화 후 컨테이너 스타일 직접 설정
TaggingBox.init({
  containerId: 'tagging-container',
  apiKey: 'your-api-key',
  userKey: 'user-unique-id'
});

// 컨테이너 스타일 설정
const container = document.getElementById('tagging-container');
container.style.position = 'fixed';
container.style.top = '5rem';
container.style.right = '2rem';
container.style.zIndex = '999';
container.style.height = '100vh';
container.style.width = '25rem';

애니메이션 설정

// 다양한 애니메이션 효과
TaggingBox.init({
  containerId: 'tagging-container',
  apiKey: 'your-api-key',
  userKey: 'user-unique-id',
  animation: 'slideInLeft',         // 왼쪽에서 등장
  animationDuration: '0.5s'         // 애니메이션 지속 시간
});

// 사용 가능한 애니메이션:
// - 'slideInLeft': 왼쪽에서 등장
// - 'slideInRight': 오른쪽에서 등장 (기본값)
// - 'slideInTop': 위에서 등장
// - 'slideInBottom': 아래에서 등장
// - 'fadeIn': 페이드인 효과
// - 'zoomIn': 줌인 효과
// - 'none': 애니메이션 없음

플로팅 아이콘 설정

// 기본 아이콘 사용
TaggingBox.init({
  containerId: 'tagging-container',
  apiKey: 'your-api-key',
  userKey: 'user-unique-id'
});

// 커스텀 SVG 아이콘 사용
TaggingBox.init({
  containerId: 'tagging-container',
  apiKey: 'your-api-key',
  userKey: 'user-unique-id',
  iconSvg: `<svg width="60" height="60" viewBox="0 0 24 24" fill="none">
    <circle cx="12" cy="12" r="10" fill="#007bff"/>
    <path d="M12 6v6l4 2" stroke="white" stroke-width="2"/>
  </svg>`,
  iconSize: '80px',
  iconPosition: { bottom: '30px', right: '30px' }
});

// 이미지 URL 사용
TaggingBox.init({
  containerId: 'tagging-container',
  apiKey: 'your-api-key',
  userKey: 'user-unique-id',
  iconSvg: `<img src="https://example.com/icon.png" alt="Custom Icon" class="tagging-icon">`,
  iconSize: '70px'
});

표시 옵션 설정

// 플로팅 아이콘을 먼저 보여주는 경우 (기본값)
TaggingBox.init({
  containerId: 'tagging-container',
  apiKey: 'your-api-key',
  userKey: 'user-unique-id',
  showIconFirst: true              // 기본값: true
});

// TaggingBox를 바로 보여주는 경우
TaggingBox.init({
  containerId: 'tagging-container',
  apiKey: 'your-api-key',
  userKey: 'user-unique-id',
  showIconFirst: false             // 아이콘 없이 바로 박스 표시
});

전체 옵션 참조

필수 옵션

containerId

컨테이너 ID

containerId: 'tagging-container'

apiKey

API 키

apiKey: 'your-api-key'

userKey

사용자 고유 식별자

userKey: 'user-unique-id'

크기 설정

width

기본값: '400px'

width: '400px'

height

기본값: '600px'

height: '600px'

애니메이션 설정

animation

기본값: 'slideInRight'

animation: 'slideInRight'

사용 가능: slideInLeft, slideInTop, slideInBottom, fadeIn, zoomIn, none

animationDuration

기본값: '0.3s'

animationDuration: '0.3s'

표시 옵션

showIconFirst

기본값: true - 플로팅 아이콘을 먼저 표시할지 여부

showIconFirst: true

apiBaseUrl

기본값: 'https://developers.tbmini.im'

apiBaseUrl: 'https://developers.tbmini.im'

로고 설정

logoSvg

커스텀 로고 SVG

logoSvg: '<svg>...</svg>'

logoWidth

기본값: '60px'

logoWidth: '60px'

logoHeight

기본값: '20px'

logoHeight: '20px'

아이콘 설정

iconSvg

커스텀 아이콘 SVG

iconSvg: '<svg>...</svg>'

iconSize

기본값: '60px'

iconSize: '60px'

iconPosition

기본값: bottom: '20px', right: '20px'

iconPosition: { bottom: '20px', right: '20px' }