← 예제 목록으로

플로팅 챗봇 위젯 데모

플로팅 버튼, 부드러운 애니메이션, 마크다운 스트리밍 응답을 갖춘 모던한 챗봇 인터페이스를 체험해보세요.

우측 하단의 채팅 버튼을 클릭하세요

부드러운 애니메이션과 함께 챗봇이 열리고, 스트리밍 마크다운 콘텐츠가 표시됩니다.

1 플로팅 버튼

화면 우측 하단에 위치한 세련된 플로팅 액션 버튼(FAB)입니다. 다음과 같은 기능을 제공합니다:

  • 브랜드에 맞는 그라데이션 배경
  • 부드러운 호버 및 클릭 애니메이션
  • 채팅/닫기 아이콘 전환 효과
  • 알림 배지 표시 (선택)

2 채팅 레이어

챗봇 iframe을 포함하는 팝업 레이어입니다. 부드러운 CSS 트랜지션으로 열립니다:

  • 페이드인 + 스케일 애니메이션
  • 둥근 모서리와 그림자 효과
  • 모바일 반응형 디자인
  • 작은 화면에서 전체화면 모드

3 Iframe 통합

챗봇 UI는 완전한 격리를 위해 iframe으로 로드됩니다:

  • 별도의 CSS 스코프
  • 어디서나 쉽게 임베드 가능
  • chatbot-iframe.html 사용
  • 필요시 postMessage로 통신

4 스트리밍 마크다운

챗봇은 스트리밍 마크다운 렌더링을 시연합니다:

  • 문자 단위 실시간 출력
  • 실시간 구문 강조
  • 테이블, 코드 블록, 목록 지원
  • 타이핑 인디케이터 애니메이션
여기를 클릭하세요!