사용자 지정 CSS

Amplitude는 가이드 및 설문조사의 모양을 사용자 지정할 수 있는 두 가지 옵션을 제공합니다. 테마는 가이드 및 설문조사의 전반적인 외관을 제어합니다. 사용자 지정 CSS는 테마가 해결할 수 없는 특정 스타일 요구 사항을 세부적으로 제어할 수 있도록 해줍니다. Amplitude는 대부분의 사용자 정의에 테마를 사용할 것을 권장합니다. 테마는 더 나은 유연성과 이전 버전과의 호환성을 제공하기 때문입니다.

웹 SDK 전용

웹 SDK에서는 사용자 지정 CSS를 사용할 수 있습니다. 모바일 SDK(iOS, Android, React Native)는 사용자 지정 CSS를 지원하지 않습니다.

사용자 지정 CSS 작동 방식

가이드 및 설문조사 SDK는 CSS 클래스를 폼 팩터 요소에 추가하므로 요소를 CSS로 대상으로 지정할 수 있습니다. 이러한 선택기:

사용자 지정 스타일을 위한 안정적인 대상 제공
컨테이너와 상위 요소에 초점 맞추기
기존 테마 설정과 함께 사용

클래스 선택기

CSS 클래스 선택기를 사용하여 가이드 및 설문조사 요소를 대상으로 지정하십시오.

css

/* Target banner container */
.amplitude-engagement-banner-container {
  background-color: #f0f0f0;
}
/* Target modal overlay */
[data-amplitude-engagement-modal-overlay] {
  background-color: rgba(0, 0, 0, 0.8);
}

폼 팩터 컨테이너

폼 팩터	선택기
배너	`.amplitude-engagement-banner-container`
카드	`.amplitude-engagement-card-container`
모달	`.amplitude-engagement-modal-container`
모달 오버레이	`[data-amplitude-engagement-modal-overlay]`
팝오버	`.amplitude-engagement-popover-container`
툴팁	`.amplitude-engagement-tooltip-content`
핀	`.amplitude-engagement-pin`
체크리스트	`.amplitude-engagement-checklist`

공통 요소

요소	선택기
닫기 버튼	`.amplitude-engagement-close`
이미지	`.amplitude-engagement-image`
비디오	`.amplitude-engagement-video`
직함	`.amplitude-engagement-title`
콘텐츠	`.amplitude-engagement-content`
비콘	`.amplitude-engagement-beacon`

배너별 요소

요소	선택기
배너 본문	`.amplitude-engagement-banner-body`
배너 제목	`.amplitude-engagement-banner-title`
배너 콘텐츠	`.amplitude-engagement-banner-content`
배너 작업	`.amplitude-engagement-banner-actions`
배너 닫기 버튼	`.amplitude-engagement-banner-close-button`

툴팁 관련 요소

요소	선택기
툴팁 콘텐츠	`.amplitude-engagement-tooltip-content`
툴팁 마커	`.amplitude-engagement-tooltip-marker`
툴팁 마커(이미지)	`.amplitude-engagement-tooltip-marker__image`
툴팁 마커(아이콘)	`.amplitude-engagement-tooltip-marker__icon`
툴팁 마커(비콘)	`.amplitude-engagement-tooltip-marker__beacon`

툴팁이 Element is marker 설정을 사용하는 경우(웹에만 해당), Amplitude는 별도의 마커 요소를 렌더링하지 않으므로 위 표의 툴팁 마커 선택기는 어떤 요소와도 일치하지 않습니다. 자세한 내용은 폼 팩터 안내서의 툴팁으로 이동하십시오.

핀 관련 요소

요소	선택기
핀	`.amplitude-engagement-pin`
핀 신호	`.amplitude-engagement-pin-beacon`
핀 콘텐츠	`.amplitude-engagement-pin-content`
핀 화살표	`.amplitude-engagement-pin-arrow`
핀 마스크	`.amplitude-engagement-pin-mask`

체크리스트별 요소

요소	선택기
체크리스트	`.amplitude-engagement-checklist`
체크리스트 헤더	`.amplitude-engagement-checklist-header`
체크리스트 제목	`.amplitude-engagement-checklist-title`
체크리스트 부제목	`.amplitude-engagement-checklist-subtitle`
체크리스트 진행 상황	`.amplitude-engagement-checklist-progress`
체크리스트 닫기 버튼	`.amplitude-engagement-checklist-close-button`
체크리스트 항목 헤더(확장됨)	`.amplitude-engagement-checklist-item-header__expanded`
체크리스트 항목 헤더(축소됨)	`.amplitude-engagement-checklist-item-header__collapsed`
체크리스트 항목 본문	`.amplitude-engagement-checklist-item-body`
체크리스트 항목 콘텐츠	`.amplitude-engagement-checklist-item-content`
체크리스트 항목 버튼	`.amplitude-engagement-checklist-item-buttons`
체크리스트 항목 버튼(기본)	`.amplitude-engagement-checklist-item-button__primary`
체크리스트 항목 버튼(보조)	`.amplitude-engagement-checklist-item-button__secondary`

카드별 요소

요소	선택기
카드	`.amplitude-engagement-card`
카드 콘텐츠	`.amplitude-engagement-card-content`

모달 관련 요소

요소	선택기
모달 바디	`.amplitude-engagement-modal-body`

동작 막대 요소

이러한 선택기를 사용하여 nudge 푸터의 동작 막대 영역을 대상으로 지정할 수 있습니다. 각 레이아웃은 기본 클래스와 레이아웃 관련 변형 클래스를 적용하므로 모든 레이아웃에 스타일을 지정하거나 특정 레이아웃을 대상으로 지정할 수 있습니다.

요소	선택기
동작 막대 컨테이너	`.amplitude-engagement-actions-bar-container`
동작 막대	`.amplitude-engagement-actions-bar`
클래식 및 분할 레이아웃 변형	`.actions-bar-layout-classic`
스택 레이아웃 변형	`.actions-bar-layout-stacked`
가운데 맞춤 레이아웃 변형	`.actions-bar-layout-centered`

예를 들어, 모든 너지 바닥글 레이아웃에서 CTA 위에 테두리를 추가하거나 특정 레이아웃에만 스타일을 지정하려면 다음과 같이 하십시오.

css

/* Add a border above CTAs in all guide/survey footer layouts */
.amplitude-engagement-actions-bar-container {
  border-top: 1px solid #000000;
}
/* Style only Classic and Split layout footers */
.amplitude-engagement-actions-bar.actions-bar-layout-classic {
  padding-top: 12px;
}

버튼 및 동작

요소	선택기
CTA 버튼	`.amplitude-engagement-cta-button`
CTA 버튼(기본)	`.amplitude-engagement-cta-button__primary`
CTA 버튼(보조)	`.amplitude-engagement-cta-button__secondary`
배너 작업	`.amplitude-engagement-banner-actions`

양식 요소(설문조사 요소)

요소	선택기
설문조사 프롬프트	`.amplitude-engagement-survey-prompt`
목록	`.amplitude-engagement-list`
목록 드롭다운	`.amplitude-engagement-list-dropdown`
별점	`.amplitude-engagement-rating`
별점(이모티콘)	`.amplitude-engagement-rating__emojis`
별점(숫자)	`.amplitude-engagement-rating__numbers`
별점(별)	`.amplitude-engagement-rating__stars`
등급 레이블	`.amplitude-engagement-rating-label`
등급 레이블(시작)	`.amplitude-engagement-rating-label-start`
등급 레이블(끝)	`.amplitude-engagement-rating-label-end`
텍스트 입력	`.amplitude-engagement-text-input`
짧은 텍스트 입력	`.amplitude-engagement-short-text-input`
입력	`.amplitude-engagement-input`
선택	`.amplitude-engagement-select`
입력 선택	`.amplitude-engagement-select-input`
체크박스 옵션	`.amplitude-engagement-checkbox-option`
라디오 옵션	`.amplitude-engagement-radio-option`

.amplitude-engagement-survey-prompt 선택기는 평가, 텍스트, 목록 및 드롭다운 설문조사 블록 전반의 질문 프롬프트 레이블을 대상으로 합니다..amplitude-engagement-rating-label-start 및 .amplitude-engagement-rating-label-end 선택기는 .amplitude-engagement-rating-label 내부의 두 배율 끝점 레이블을 대상으로 합니다.

클래스 선택기 사용

기본 스타일링

css

/* Style banner background */
.amplitude-engagement-banner-container {
  background: linear-gradient(to right, #667eea, #764ba2);
}
/* Customize CTA button appearance */
.amplitude-engagement-cta-button {
  border-radius: 8px;
  text-transform: uppercase;
}
/* Style close button hover state */
.amplitude-engagement-close:hover {
  opacity: 0.7;
}

특정 폼 팩터를 목표로 설정

css

/* Style banners with custom background */
.amplitude-engagement-banner-container {
  background: linear-gradient(to right, #667eea, #764ba2);
}
/* Style primary CTA buttons in banners */
.amplitude-engagement-banner-container
  .amplitude-engagement-cta-button__primary {
  width: 100%;
}
/* Style checklist progress bars */
.amplitude-engagement-checklist-progress {
  background-color: #f5f5f5;
}

중요한 고려 사항

사용자 지정 CSS를 구현할 때 다음 고려 사항에 유의하십시오.

특이성

기본 스타일을 재지정하려면 !important을 사용해야 할 수도 있습니다.

css

.amplitude-engagement-banner-container {
  background-color: #custom-color !important;
}

선택기 안정성

다음이 아닌 문서화된 CSS 클래스를 대상으로 삼습니다.

내부적으로 생성된 클래스 이름
변경될 수 있는 요소 구조
문서화되지 않은 클래스 또는 속성

이 내용이 도움이 되었나요?