개인화 체크리스트 실행
코드로 개인화 체크리스트 실행 및 사용자 진행 상태를 관리할 수 있습니다.
지원 함수
startPersonalizedChecklist({checklistId}) 함수를 호출하면, 생성된 설문이 표시되고 사용자의 답변에 따라 맞춤형 체크리스트가 제공됩니다.
StepBy.startPersonalizedChecklist("{checklistId}")개인화 체크리스트 > 코드 추출 페이지 에서 실행 코드를 복사할 수 있습니다.
동작 방식
1. 진행 단계
개인화 체크리스트는 아래 세 가지 단계로 구성됩니다.
1) 설문 수집 단계
startPersonalizedChecklist() 함수 최초 호출 시, 설문 수집 단계가 진행됩니다.
사용자는 관심있는 설문 항목들을 선택할 수 있으며, 시작 버튼 클릭 시 체크리스트 체험 단계로 이동합니다.
2) 체크리스트 체험 단계
사용자가 선택한 설문 항목에 해당하는 개인화 체크리스트가 나타납니다.
사용자는 각 항목을 클릭해 맞춤 가이드를 체험할 수 있습니다.
3) 가이드 종료 단계
체크리스트 내 가이드 종료 버튼 클릭 시, 가이드 종료 단계로 이동합니다.
가이드 종료 단계에 해당하는 사용자는, startPersonalizedChecklist() 함수를 호출해도 아무 것도 동작하지 않습니다.
웹페이지에 개인화 체크리스트 위젯 을 추가하거나, restartPersonalizedChecklist() 함수를 호출해, 사용자를 다시 설문 수집 단계로 이동시킬 수 있습니다.
2. 사용자 설정
startPersonalizedChecklist() 호출 시, 사용자의 진행 단계에 해당하는 온보딩 요소가 나타납니다.
예를 들어 설문 수집 단계를 완료한 후 다시 웹페이지에 접속한 사용자에게는, 체크리스트 체험 단계의 온보딩 요소가 보입니다.
이때 사용자 고유 식별자는 브라우저 로컬 스토리지에 저장됩니다. 따라서 사용자의 진행 단계는 접속한 브라우저에 따라 달라집니다.
startPersonalizedChecklist() 호출 전 사용자 설정 함수를 호출해, 브라우저가 아닌 입력받은 사용자 정보를 기준으로 진행 단계를 유지할 수 있습니다.
// 1) 사용자 설정 함수를 호출합니다.
StepBy.setUser("example-user-id", {
created_at: "2025-01-01"
})
// 2) 개인화 체크리스트 실행 함수를 호출합니다.
StepBy.startPersonalizedChecklist("{checklistId}")이를 통해 사용자가 시크릿 모드나 다른 브라우저를 통해 접속해도, 진행 중인 단계가 동일하게 유지됩니다.
진행 단계 초기화하기
restartPersonalizedChecklist() 함수를 실행하면, 사용자가 다시 설문 수집 단계로 돌아갑니다.
StepBy.restartPersonalizedChecklist("{checklistId}")웹페이지에 해당 함수를 실행하는 버튼을 추가해, 사용자가 기존 체크리스트 상태를 초기화하고 새롭게 체크리스트 체험을 시작하도록 할 수 있습니다.
사용자 정보 변경 대응하기
사용자가 체크리스트 체험 단계에 있는 경우, 따로 함수를 호출하지 않아도 체크리스트가 화면에 뜨게 됩니다.
이는 체크리스트 체험 단계 정보가 브라우저 로컬 스토리지에 저장되기 때문이며,
따라서 서비스 내 사용자 정보가 완전히 달라질 경우, clearPersonalizedChecklist()함수를 실행해 체험 정보를 브라우저에서 삭제해야합니다.
StepBy.clearPersonalizedChecklist()일반적으로는 서비스 로그아웃이 발생할 때 위 함수를 호출해, 체크리스트 정보를 정상적으로 삭제할 수 있습니다.
위젯 사용하기
개인화 체크리스트 위젯을 통해, 현재 사용자의 진행 상태를 시각적으로 보여줄 수 있습니다.
<div
id="stepby-widget"
data-stepby-onboarding-id="${checklistId}"
/>개인화 체크리스트 > 코드 추출 페이지에서 위젯 코드를 복사할 수 있습니다.
웹페이지 내 원하는 위치에 해당 코드를 추가한 뒤, 초기화 함수를 호출하면 위젯이 화면에 표시됩니다.
각 속성의 의미는 아래와 같습니다.
id: 위젯 div의 식별자입니다. 웹페이지에 해당 id 요소가 고유해야하며, 변경되어서도 안됩니다.data-stepby-onboarding-id: 생성한 체크리스트의 id입니다. 변경사항을 저장할 때마다 새로생성됩니다.
커스텀 CSS 적용하기
모든 요소의 스타일 속성을 외부 CSS 파일로 오버라이딩 할 수 있습니다.
대표적인 속성은 아래와 같습니다.
// 체크리스트 체험 단계의 체크리스트 위치 변경
.stepby-checklist-container.created {
left: 320px !important;
}
// 위젯 크기 변경
.stepby-widget-container {
width: 500px !important;
max-width: none !important;
}브라우저 개발자 도구에서 각 항목의 클래스 이름(class name)을 확인할 수 있습니다.
Last updated