튜토리얼 제작하기

제품 내에서 동작하는 튜토리얼 가이드로 고객을 아하모먼트까지 안내하세요.

1. 시작하기

[익스텐션 설치하기] 버튼을 통해 StepBy 익스텐션을 설치하세요.

🎁 TIP! 익스텐션 고정하기

StepBy 익스텐션을 브라우저에 고정해두면 편리하게 사용할 수 있어요.

2. 튜토리얼 생성하기

튜토리얼 가이드를 생성할 서비스로 이동해서 StepBy 익스텐션을 실행하세요.

[가이드 만들기] 버튼을 누르면 제작이 시작돼요.

3. 튜토리얼 초안 만들기

고객에게 안내할 요소를 순서대로 선택하고 [완료]를 눌러주세요.

StepBy가 선택한 요소를 감지해서 튜토리얼 가이드 초안을 만들어요.

4. 튜토리얼 제작하기

생성된 초안을 자유롭게 수정해서 튜토리얼 가이드를 제작해보세요.

1. 튜토리얼 가이드 이름을 설정할 수 있어요.

2. 각 스텝을 눌러 수정할 수 있어요.

1. 스텝 이름을 수정할 수 있어요

2. 툴팁 내용을 에디터를 활용해서 자유롭게 수정할 수 있어요

3. 툴팁 위치를 수정할 수 있어요

4. 타겟 요소 강조(테두리) 유무를 선택할 수 있어요

5. 타겟 요소를 다시 선택할 수 있어요

6. 툴팁 템플릿을 선택할 수 있어요

툴팁 색상을 변경하고 싶다면, 워크스페이스의 설정 탭에서 원하는 색상을 지정할 수 있어요.

5. 튜토리얼 미리보기

[미리보기] 버튼을 눌러 생성한 튜토리얼 가이드를 체험할 수 있어요.

6. 튜토리얼 저장하기

StepBy는 튜토리얼 가이드의 버전 관리를 지원해요.

원하는 버전 이름을 등록하고, 필요하다면 변경 내용을 기록하세요.

1. (필수) 버전 이름을 입력하세요

2. (선택) 변경 사항을 기록할 수 있어요

7. 튜토리얼 실행 코드 전달하기

워크스페이스에 돌아가서 생성한 튜토리얼 가이드를 선택하세요.

제작한 튜토리얼 가이드의 실행 코드를 개발팀에 전달해서 자유롭게 활용할 수 있어요.

8. 튜토리얼 이탈률 확인하기

인사이트 탭에서 튜토리얼 가이드의 통계를 확인할 수 있어요.

단계 별 노출 수와 이탈률을 확인하고, 지속적으로 개선해보세요!

9. 튜토리얼 수정하기

[익스텐션에서 수정] 버튼을 눌러 튜토리얼 가이드를 수정할 수 있어요.

수정한 뒤 새로운 버전으로 저장하거나 현재 버전에 덮어쓸 수 있어요.

🎁 StepBy 튜토리얼 200% 활용 방법

StepBy의 튜토리얼 가이드는 코드 기반으로 동작하기 때문에 자유롭게 노출 조건을 설정할 수 있어요. (물론 개발 팀에서요! 😏)

고객 별 상황에 맞는 튜토리얼 가이드를 노출시키고, 인사이트(통계)를 통해 A/B 테스트 해보는 건 어떨까요?

더 많은 고객을 아하모먼트로 안내할 수 있을거에요!