사용자 정의 CSS/JS 주입 — 무제한 디자인 유연성

표준 사용자 정의는 90%의 요구를 충족하지만, 독특한 브랜드는 독특한 솔루션을 요구합니다. 우리의 고급 스타일링 및 스크립트 주입 기능은 디자인 팀과 개발자에게 핵심 위젯 코드를 포크하거나 수정하지 않고도 진정으로 독특한 AI 에이전트 경험을 만들 수 있는 힘을 제공합니다.

사용자 정의 CSS 작동 방식

CSS를 URL 인코딩된 문자열로 제공하거나 외부 스타일시트 URL을 참조하십시오. 로더는 위젯의 iframe 내에서 <style> 태그에 스타일을 주입하며, 메인 애플리케이션이 마운트되기 전에 초기화됩니다. 귀하의 규칙은 기본값을 재정의하거나 새로운 클래스를 추가하거나 기존 구성 요소를 향상시킬 수 있습니다.

위젯의 CSS 아키텍처는 BEM 명명 규칙을 따르므로 재정의가 예측 가능하고 유지 관리가 용이합니다.

JavaScript를 통한 고급 행동 사용자 정의

스타일링을 넘어, 사용자 정의 JavaScript는 정교한 통합을 가능하게 합니다:

• 고객이 가격 섹션으로 스크롤할 때 위젯을 자동으로 열기
• 현재 페이지 맥락이나 URL 매개변수를 기반으로 첫 번째 메시지를 미리 채우기
• 고객 행동(페이지 체류 시간, 종료 의도, 장바구니 값)에 따라 메시지를 프로그래밍 방식으로 전송하기
• 기본 텔레메트리로 다루지 않는 사용자 정의 이벤트에 대한 분석 추적 주입하기
• 기존 UI 버튼 및 제어에서 위젯 작업 트리거하기

두 가지 JavaScript 주입 방법

• 외부 스크립트 URL — CDN 또는 서버에 호스팅된 스크립트를 가리킵니다; 위젯 초기화 전에 가져오고 평가되며, 공유 라이브러리 또는 복잡한 논리에 적합합니다.
• 인라인 코드 스니펫 — 페이지별 조정 및 테스트에 이상적인 간단한 사용자 정의.

두 방법 모두 iframe의 전역 범위에서 실행되며 위젯 API 및 DOM에 대한 전체 접근 권한을 가집니다.

보안 고려 사항

사용자 정의 코드는 위젯 상태, API 호출 및 고객 대화에 대한 접근 권한을 포함하여 iframe 권한으로 실행됩니다.

• 배포 전에 모든 사용자 정의 코드를 보안 취약점에 대해 검토하십시오.
• 명시적으로 신뢰하는 도메인에서만 스크립트를 로드하십시오.
• 콘텐츠 보안 정책 (CSP) 헤더 권장 사항이 제공됩니다.
• 샌드박싱은 사용자 정의 코드가 iframe 컨텍스트를 벗어나지 못하도록 하여 부모 페이지를 보호합니다.

일반적인 사용 사례

• 브랜드 일치 애니메이션 — 사이트의 마이크로 상호작용에 맞는 CSS 애니메이션 주입
• 맥락 인식 위젯 열기 — 특정 사용자 행동을 감지하고 위젯을 자동으로 열기
• 사용자 정의 글꼴 및 아이콘 — 전문 글꼴 또는 아이콘 라이브러리 로드
• 채팅 기록 — 사용자 정의 JavaScript를 사용하여 "대화 기록 다운로드" 버튼 추가