사용자 지정 CSS로 웹 채팅 스타일을 지정하는 방법

학습 내용

커스텀 CSS를 사용해 Klaviyo 웹 채팅의 모양(런처, 채팅 창, 메시지 말풍선, 메시지 캠페인 컴포저)을 변경하는 방법을 알아보세요. 어떤 테마 변수와 클래스 이름을 안전하게 타겟팅할 수 있는지, 그리고 어떤 것들은 Klaviyo가 업데이트를 배포하면 깨지는지 알아보실 수 있어요.

이 문서는 웹 채팅을 단독으로 사용하든 Klaviyo 고객 허브의 일부로 사용하든 모두 적용돼요. 채팅 인터페이스는 두 경우 모두 동일하므로, 같은 CSS가 둘 다에 적용돼요.

시작하기 전에 알아야 할 것

필요한 것:

• 소유자, 관리자, 또는 매니저 역할
• CSS 선택기와 사용자 지정 속성(CSS 변수)에 대한 이해

사용자 정의 CSS를 작성하기 전에, 기본 제공 디자인 설정만으로도 필요한 작업을 이미 할 수 있는지 확인해 보세요. 색상, 글꼴, 버튼 모양, 런처 위치는 모두 코드 없이 구성할 수 있으며, 이러한 설정은 Klaviyo 업데이트 후에도 유지됩니다. 디자인 설정에서 다루지 않는 부분에만 사용자 정의 CSS를 사용해 보세요.

맞춤 CSS를 추가할 위치

Custom CSS 편집기 위치는 설정에 따라 달라요.

Klaviyo 고객 허브를 사용하는 경우

1. Klaviyo 고객 허브 > 디자인으로 이동합니다.
2. 스타일 설정 하단의 사용자 지정 섹션으로 스크롤해 주세요.
3. 맞춤 CSS 추가를 클릭하거나, 이미 있는 CSS를 편집해 주세요.
4. 저장을 클릭합니다.

독립형 웹 채팅을 사용하는 경우

1. 설정 > 웹 채팅 > 디자인으로 이동합니다.
2. 스타일 설정 하단의 사용자 지정 섹션으로 스크롤해 주세요.
3. 맞춤 CSS 추가를 클릭하거나, 이미 있는 CSS를 편집해 주세요.
4. 저장을 클릭합니다.

사용자 지정 CSS 적용 방식

CSS는 Klaviyo 자체 스타일 뒤에, 스토어프런트의 style 태그에 추가돼요. 이로부터 두 가지가 따라와요:

• CSS가 우선 적용돼요. 마지막에 로드되기 때문에 대부분의 경우 !important 없이도 규칙이 Klaviyo의 기본값을 재정의해요.
• CSS가 채팅 범위로 스코프되지 않았어요. 페이지 전체에 적용돼요. 전체 스토어프런트에 영향을 줄 수 있는 button { … } 같은 기본 규칙을 작성하는 대신, 항상 선택자를 채팅 요소로 스코프해 주세요.

테마 변수부터 시작하세요

웹 채팅을 다시 스타일링하는 가장 신뢰할 수 있는 방법은 :root 블록에서 Klaviyo의 테마 변수를 재정의하는 거예요. 이 값들은 안정적이고, 전체 인터페이스에 올바르게 캐스케이드되며, 개별 요소를 대상으로 하는 것보다 깨질 가능성이 훨씬 낮아요.

:root {
  --atlas-chat-bubble-background: #f0ebe4;
  --atlas-message-border-radius: 4px;
}

채팅 메시지 변수

쇼퍼(발신) 메시지는 의도적으로 브랜드 색상을 재사용해요. 말풍선에는 --atlas-button-primary가, 텍스트에는 --atlas-text-primary-inverse가 적용되며, 두 값 모두 디자인 설정에서 지정해요.

색상 및 표면 변수

형태 및 간격 변수

타이포그래피 변수

이 중 몇 가지는 디자인 설정에서 이미 작성돼 있어요. 디자인 설정 UI에서 글꼴과 색상을 설정하는 것이 더 바람직해요. UI에서 노출하지 않는 값에는 변수를 사용하세요.

클래스 훅으로 요소를 타겟팅하세요.

테마 변수로는 해결할 수 없을 때는 요소를 직접 대상으로 지정해 주세요. Klaviyo는 아래 클래스 이름을 보장해요.

채팅 요소

채팅 창에도 현재 화면의 클래스 이름이 포함돼요 ― .kl-hub-route-chat 채팅 자체에 사용돼요. 단독 웹 채팅에서는 항상 .kl-hub-route-chat이에요. Klaviyo 고객 허브에서는 쇼퍼가 탐색함에 따라 변경돼요(.kl-hub-route-home, .kl-hub-route-orders, 등). 이를 통해 한 화면에만 CSS 범위를 지정할 수 있어요.

전송 버튼에는 전용 클래스가 없어요. 캠페인 컴포저를 통해 타겟팅하세요:

.kl-hub-chat-input-wrapper .kl-hub-button-primary {
  background: #2f4f4f;
}

공유 요소

스타일링 에이전트와 쇼퍼 메시지를 다르게 하기

이 요청이 가장 흔하며, 특정한 접근 방식이 필요해요. 에이전트와 쇼퍼 버블은 단일 .kl-hub-message class — 이를 구분하는 안정적인 클래스가 없으므로 하나를 직접 선택할 수 없어요.

대신 두 요소를 서로 다르게 처리하도록 이미 설정된 테마 변수를 사용하세요:

:root {
  /* Agent messages */
  --atlas-chat-bubble-background: #f0ebe4;
  --atlas-chat-bubble-text-primary: #2b2b2b;

  /* Shopper messages */
  --atlas-button-primary: #1f3a3d;
  --atlas-text-primary-inverse: #ffffff;
}

예시

모든 모서리를 각지게 만들기

:root {
  --atlas-drawer-inset-border-radius: 0;
  --atlas-message-border-radius: 0;
  --atlas-button-border-radius: 0;
  --atlas-input-border-radius-normal: 0;
}

대문자 제목 및 버튼

.kl-hub-heading,
.kl-hub-button {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

사용자 지정 그림자를 추가해 런처를 더 크게 만들기

.kl-hub-launcher {
  width: 72px !important;
  height: 72px !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25) !important;
}

런처는 여러 속성을 요소에 직접 설정하므로, 런처 규칙이 적용되려면 !important가 필요해요. 이 경우에만 보통 필요해요.

데스크톱에서 채팅 창을 더 넓게 하세요

@media (min-width: 900px) {
  .kl-hub-drawer {
    width: 480px;
  }
}

CSS가 저장되지 않는 경우

저장하면 Klaviyo에서 CSS가 정상적으로 파싱되는지 확인해요. 정상적으로 파싱되지 않으면 잘못된 CSS입니다. 구문을 확인해 주세요.가 표시돼요. 그러면 변경 사항이 저장되지 않아요.

스타일시트는 규칙을 전혀 생성하지 않을 때만 완전히 거부되는데, 이는 보통 붙여넣은 내용이 CSS가 아니라는 뜻이에요. 일반적인 원인:

• CSS 규칙 대신 일반 텍스트, HTML 또는 style 태그를 붙여넣는 경우
• 완전한 규칙이 아니라 선언의 일부를 붙여넣기
• 모든 규칙에 구문 오류가 있는 스타일시트

사용자 정의 CSS로 할 수 없는 작업

• 텍스트 변경. 사용자 지정 CSS로는 문구를 수정할 수 없어요. 이를 위해 디자인 및 콘텐츠 설정을 사용해 주세요.
• CSS 레이아웃에서 허용하는 범위를 넘어 요소를 재정렬하거나 위치를 변경 할 수 없어요. 채팅의 구조는 사용자 지정할 수 없어요.
• 클래스별로 에이전트 버블과 쇼퍼 버블을 각각 타겟팅하세요. 위에서 설명한 대로 테마 변수를 사용하세요.
• 리디자인을 자동으로 견디세요. 클래스 훅과 변수는 일반 업데이트에서는 안정적이지만, 대규모 리디자인에서는 CSS를 다시 검토해야 할 수 있어요. 주요 릴리스 후에는 다시 테스트해 주세요.

추가 자료