튜토리얼 실행

코드로 튜토리얼 가이드 실행을 제어하고, 다양한 환경에서 독립적으로 테스트할 수 있습니다.

지원 함수

startGuide({guideId}, guide option object) 함수를 호출해, 익스텐션으로 생성한 튜토리얼 가이드를 실행할 수 있습니다.

StepBy.startGuide("{guideId}", {
    // Guide Option Parameters
    version: "{versionName}",
    isOnce: true | false,
    logging: true | false,
    nextGuides: "{nextGuidesArray}"
})

StepBy Admin 내 튜토리얼 상세 페이지에서 '실행 코드 복사' 버튼을 클릭해 가이드 별 실행 코드를 복사할 수 있습니다.

Parameters

Guide Option Parameters를 통해 가이드 실행 시 원하는 옵션을 적용할 수 있습니다.

Guide Option Parameters

key	type	desc	required	default
version	string	실행할 가이드 버전		해당 가이드의 최신 버전
	boolean	사용자 별 가이드 1회 실행 여부		false
logging	boolean	가이드 통계 수집 여부		true
	array	가이드가 종료된 이후 이어서 실행될 가이드 목록		None

예시 코드 (React.js)

// App.jsx
const App = () => {
  const handleStart = () => {
    // 튜토리얼 가이드 실행 시점을 직접 제어
    StepBy.startGuide("example-guide-id", {
      version: process.env.NODE_ENV === "development" ? "version-2" : "version-1", // 개발 환경에서만 version-2 가이드 실행 
      isOnce: true,
      logging: isInternalUser ? false : true // 내부 사용자인 경우, 통계 미수집
      nextGuides: [{ guideId: "example-guide-id-2" }] // 튜토리얼 가이드 완료 시, 다른 가이드 이어서 실행
    })
  }
  return <button onClick={handleStart}>let's start!</button>
}