문서

위젯 스타일링 및 커스터마이징

init 옵션 또는 대시보드 UI를 통해 위젯 외관을 제어하세요.

크기 프리셋#

chatSize와 launcherSize를 통해 세 가지 기본 크기 프리셋 중에서 선택하세요:

chatSize채팅 창
compact340 x 460 px
default380 x 520 px
large420 x 600 px

launcherSize는 chatSize와 독립적으로 플로팅 버튼을 제어합니다:

launcherSize런처아이콘
small48 px22 px
default60 px28 px
large68 px32 px
Respondo.init({
  agentId: 'YOUR_AGENT_ID',
  chatSize: 'large',        // 더 넓고 높은 채팅 창
  launcherSize: 'small'     // 더 작은 플로팅 버튼
});

위치 지정#

offsetBottom과 offsetSide(픽셀 단위)로 위젯 위치를 미세 조정하세요. position(bottom-right 또는 bottom-left)과 결합하면 배치를 완전히 제어할 수 있습니다.

Respondo.init({
  agentId: 'YOUR_AGENT_ID',
  position: 'bottom-left',
  offsetBottom: 40,          // 하단에서 40px(기본값: 20)
  offsetSide: 30             // 왼쪽 가장자리에서 30px(기본값: 20)
});

모서리 반경 및 Z-Index#

borderRadius는 채팅 창의 모서리 둥글기를 제어합니다(기본값: 20px).zIndex는 쌓임 순서(stacking order)를 설정합니다(기본값: 999999).

Respondo.init({
  agentId: 'YOUR_AGENT_ID',
  borderRadius: 12,    // 더 각진 모서리
  zIndex: 100000       // 충돌을 피하기 위해 z-index를 낮춤
});

커스텀 CSS#

기본 옵션을 넘어서는 고급 스타일링을 위해 customCSS 문자열을 전달하세요. 이는 위젯의 Shadow DOM에 주입되며 — 모든 위젯 스타일을 재정의할 수 있지만 페이지에는 영향을 줄 수 없습니다.

Respondo.init({
  agentId: 'YOUR_AGENT_ID',
  customCSS: `
    .respondoai-chat {
      border-radius: 24px;
      box-shadow: 0 12px 48px rgba(0,0,0,0.2);
    }
    .respondoai-launcher {
      box-shadow: none;
      border: 2px solid #e5e7eb;
    }
    .respondoai-header {
      backdrop-filter: blur(10px);
    }
    .respondoai-message.assistant {
      background: #f0f9ff;
    }
    /* 공지 카드 내부의 CTA 버튼 스타일 지정 */
    .respondoai-announcement-cta-button {
      border-radius: 999px;
      font-weight: 600;
      letter-spacing: 0.2px;
    }
    /* 공지 CTA 버튼을 기본 세로 배치 대신 가로로 배치 */
    .respondoai-announcement-ctas {
      flex-direction: row;
    }
  `
});
커스텀 CSS는 Shadow DOM 내부에서 실행되며 — 페이지 스타일과 완전히 격리됩니다. 부작용 없이 어떤 위젯 클래스든 안전하게 재정의할 수 있습니다.

사용 가능한 CSS 클래스:

클래스요소
.respondoai-widget루트 컨테이너(위치, z-index)
.respondoai-launcher플로팅 버튼
.respondoai-chat채팅 창
.respondoai-header채팅 헤더 바
.respondoai-messages메시지 목록 컨테이너
.respondoai-message.user사용자 메시지 말풍선
.respondoai-message.assistant봇 메시지 말풍선
.respondoai-input-area입력 바 컨테이너
.respondoai-input텍스트 입력 필드
.respondoai-send전송 버튼
.respondoai-suggestion-btn빠른 질문 버튼
.respondoai-announcement-cta-button공지 카드 내부의 CTA 버튼
.respondoai-announcement-ctas공지 카드의 CTA 버튼을 감싸는 래퍼(레이아웃 대상)
대시보드에서도 모든 스타일링 옵션을 구성할 수 있습니다 — Channels → Widget → Appearance로 이동하세요. 대시보드에서 변경한 내용은 config API를 통해 자동으로 위젯에 반영됩니다.