챗봇 위젯 커스터마이징
챗봇 위젯 커스터마이징
이 문서는 임베디드 챗봇 위젯 UI를 우리 사이트에 맞게 커스텀하게 제어하기 위해 제공되는 공개 함수 두 가지,
toggle() 과 layoutUpdate(widget) 사용법을 설명합니다.
젤라또 어드민에서 제공하는 위젯 설정 대신, 사이트에서 챗봇 위젯을 커스텀하게 사용할 때 선택적으로 사용해 주세요.
챗봇 위젯을 커스터마이징 하기 위해서는 우선 젤라또에서 제공하는 챗봇 위젯 숨김 처리가 필요합니다. 현재 해당 기능은 별도 문의 요청 후 적용할 수 있습니다.
기능 문의 및 추가 확인 사항은 [email protected] 으로 연락해 주세요.
커스터마이징 주의 사항
챗봇 위젯의 크기와 위치를 커스텀 한 후 어드민(관리자 화면) 젤라또 만들기 > 스타일/위젯 설정에 값을 반영해 주세요.
챗봇 위젯 커스터마이징을 해도 어드민 설정의 위젯 설정은 필수입니다.
챗봇 대화창(대화 인터페이스)의 위치는 위젯의 크기와 위치를 기반으로 조정됩니다.
linkToStartAutoOpen:true 일 때 버튼 렌더링 속도가 느릴 경우, 다소 어색하게 동작할 수 있습니다.
linkToStartAutoOpen:false(기본값) 일 때는 영향이 없습니다.
*linkToStartAutoOpen: gelatto.init() 제공/챗봇 답변 내 링크 클릭 시 이동한 페이지에서 대화창이 자동 열리도록 설정하는 값
제공 함수
요약
gelatto.toggle()
챗봇 위젯 UI의 표시/숨김을 토글
포커스/스크롤 포함한 UI 상태를 안전하게 전환
데스크톱/모바일 환경 모두 지원하며 올바른 전환 처리를 진행
gelatto.layoutUpdate(widget: 필수)
현재 화면(디바이스/뷰포트)에 맞게 챗봇 대화창과 챗봇 위젯 버튼 레이아웃을 반응형 기준으로 재계산해 즉시 반영
(widget)인자 필수
필수 사항
gelatto.layoutUpdate(widget)함수는(widget)옵션을 인자로 넘겨 즉시 적용해야 합니다.두 함수 모두 초기화(init) 후 호출해 주세요.
toggle()
설명: 챗봇 사용자 대화창(컨테이너)의 열림/닫힘 상태를 전환합니다.
내용
닫힘 → 열림: 챗봇 사용자 대화창(컨테이너) 표시, 포커스/스크롤 처리
열림 → 닫힘: 챗봇 사용자 대화창(컨테이너) 숨김
입력 파라미터
없음
반환 값
없음
사용 예시
layoutUpdate(widget)
설명: 챗봇 사용자 대화창(컨테이너)과 챗봇 위젯 버튼(플로팅 버튼)의 위치/크기를 현재 Viewport(데스크톱/모바일)에 맞게 재설정합니다.
내용
Viewport에 따라 모바일/데스크톱 분기
챗봇 사용자 대화창(컨테이너) 최대 크기, 라운딩, 하단 오프셋 계산 / 확장·축소 상태에 따라 사이즈 스위칭
채팅창 위치·여백 재계산
입력 파라미터
widget (필수): 챗봇 레이아웃 위치 계산에 사용할 옵션 오브젝트
반환 값
void
widget 옵션 필드 예시
posType
string
'RIGHT_BOTTOM' | 'LEFT_BOTTOM' (데스크톱 위치)
posSide
number
데스크톱 가로 여백(px)
posBottom
number
데스크톱 세로 여백(px)
mobilePosType
string
'RIGHT_BOTTOM' | 'LEFT_BOTTOM' (모바일 위치)
mobilePosSide
number
모바일 전용 가로 여백(px)
mobilePosBottom
number
모바일 전용 세로 여백(px)
size
number
원형 플로팅 버튼 직경(px)
사용 예시
필수 사항
초기 렌더링 이후 동적 레이아웃 변경에서 호출해 최신 레이아웃을 유지해 주세요.
어드민 설정 값과 동일하게 전달하고, 필요한 값만 수정해 주세요.
SPA 라우팅 환경에서는 전환 시 열림 상태를 닫는 등 일관성 유지가 필요합니다.
자주 묻는 질문 (FAQ)
Last updated
Was this helpful?