구성

위젯의 외관과 동작을 커스터마이징하세요.

초기화 옵션#

옵션	기본값	설명
agentId	필수*	에이전트의 고유 ID. *사람 전용(humans-only) 위젯에서는 `channelId`만으로 충분합니다.
channelId	—	위젯 채널의 ID. 한 에이전트가 여러 위젯을 구동할 때 어떤 위젯의 설정(스타일링, 아웃바운드 툴팁/배너)을 적용할지 선택하며, 사람 전용 위젯에서는 유일한 식별자입니다. `agentId` / `channelId` 중 최소 하나는 필수입니다.
position	bottom-right	`bottom-right` 또는 `bottom-left`
primaryColor	#3B82F6	위젯 버튼과 헤더의 브랜드 색상
title	Support	헤더 제목 텍스트
greeting	auto	환영 메시지(기본적으로 대시보드 설정에서 로드됨)
language	page	위젯 언어를 BCP-47 코드로 지정합니다(`de`, `pt-BR`). UI, 인사말, 빠른 질문의 언어를 결정합니다. 생략하면 위젯은 페이지의 `<html lang>`을 따릅니다. `lang`이 `en`이 아닌 페이지는 이제 방문자의 브라우저와 관계없이 해당 언어로 시작합니다. `<html lang="en">`만 있는 경우는 템플릿 기본값으로 간주하여 무시하며, 방문자는 이전 동작(기억된 선택, 그다음 브라우저 언어)을 유지합니다. `'browser'`를 전달하면 `<html lang>`을 완전히 무시하고 브라우저 전용 동작으로 돌아갑니다. 런타임에는 `Respondo.setLanguage('fr')`으로 변경할 수 있어 페이지를 새로 고치지 않는 언어 전환기에 유용합니다.
placeholder	—	커스텀 입력 플레이스홀더 텍스트
quickQuestions	—	첫 메시지 전에 표시되는 추천 질문 배열
logoUrl	—	위젯 헤더에 표시되는 로고의 URL
avatarUrl	—	메시지 옆에 표시되는 AI 에이전트 아바타의 URL
identity	—	init 시점에 사용자 신원을 미리 설정(`identify()`와 동일한 필드)
localStorageKey	—	`userId`를 자동으로 읽어올 localStorage 키(GTM / 노코드 설정용)
chatSize	default	`compact`, `default`, `large` — 채팅 창 크기
launcherSize	default	`small`, `default`,`large` — 런처 버튼 크기
offsetBottom	20	하단 가장자리로부터의 거리(px)
offsetSide	20	좌/우 가장자리로부터의 거리(px)
borderRadius	20	채팅 창 테두리 반경(px)
zIndex	999999	위젯 컨테이너의 CSS z-index
customCSS	—	고급 스타일링을 위해 위젯 Shadow DOM에 주입되는 커스텀 CSS
testMode	false	대화를 테스트로 표시(주요 뷰에서 숨김)

전체 구성#

전체 구성javascript

Respondo.init({
  agentId: 'YOUR_AGENT_ID',
  channelId: 'YOUR_CHANNEL_ID',
  position: 'bottom-right',        // 'bottom-right' | 'bottom-left'
  primaryColor: '#2563eb',
  language: 'de',                  // BCP-47; 기본값: <html lang>(en은 약한 신호), 'browser'는 이를 무시
  title: 'Help Center',
  greeting: 'How can we help?',
  placeholder: 'Ask anything...',
  logoUrl: 'https://yoursite.com/logo.png',
  avatarUrl: 'https://yoursite.com/avatar.png',
  quickQuestions: [
    'How do I get started?',
    'What are the pricing plans?',
    'How do I contact support?'
  ],
  testMode: false,
  localStorageKey: 'myapp_user_id', // localStorage에서 userId 자동 읽기(GTM / 노코드)
  chatSize: 'default',              // 'compact' | 'default' | 'large'
  offsetBottom: 20,                 // 하단으로부터의 거리(px)
  identity: {                      // 선택: 사용자를 이미 알고 있다면 init에서 설정
    email: 'user@example.com',
    name: 'John Doe',
    userId: 'usr_123',
    properties: {                  // 커스텀 연락처 속성
      account_type: 'enterprise',
      region: 'eu-west'
    }
  }
});

대부분의 설정(색상, 로고, 인사말, 빠른 질문)은 Channels 대시보드에서 관리됩니다. 위젯은 로드 시점에 이 값을 가져오므로 — 임베드 코드에서는 agentId/channelId 쌍만 있으면 됩니다.