튜토리얼 제작하기
제품 내에서 동작하는 튜토리얼 가이드로 고객을 아하모먼트까지 안내하세요.
1. 시작하기
[익스텐션 설치하기] 버튼을 통해 StepBy 익스텐션을 설치하세요.
🎁 TIP! 익스텐션 고정하기
StepBy 익스텐션을 브라우저에 고정해두면 편리하게 사용할 수 있어요.
2. 튜토리얼 생성하기
튜토리얼 가이드를 생성할 서비스로 이동해서 StepBy 익스텐션을 실행하세요.
[가이드 만들기] 버튼을 누르면 제작이 시작돼요.
3. 튜토리얼 초안 만들기
고객에게 안내할 요소를 순서대로 선택하고 [완료]를 눌러주세요.
StepBy가 선택한 요소를 감지해서 튜토리얼 가이드 초안을 만들어요.
4. 튜토리얼 제작하기
생성된 초안을 자유롭게 수정해서 튜토리얼 가이드를 제작해보세요.
튜토리얼 가이드 이름을 설정할 수 있어요.
각 스텝을 눌러 수정할 수 있어요.
스텝 이름을 수정할 수 있어요
툴팁 내용을 에디터를 활용해서 자유롭게 수정할 수 있어요
툴팁 위치를 수정할 수 있어요
타겟 요소 강조(테두리) 유무를 선택할 수 있어요
타겟 요소를 다시 선택할 수 있어요
툴팁 템플릿을 선택할 수 있어요
툴팁 색상을 변경하고 싶다면, 워크스페이스의 설정 탭에서 원하는 색상을 지정할 수 있어요.
5. 튜토리얼 미리보기
[미리보기] 버튼을 눌러 생성한 튜토리얼 가이드를 체험할 수 있어요.
6. 튜토리얼 저장하기
StepBy는 튜토리얼 가이드의 버전 관리를 지원해요.
원하는 버전 이름을 등록하고, 필요하다면 변경 내용을 기록하세요.
(필수) 버전 이름을 입력하세요
(선택) 변경 사항을 기록할 수 있어요
7. 튜토리얼 실행 코드 전달하기
워크스페이스에 돌아가서 생성한 튜토리얼 가이드를 선택하세요.
제작한 튜토리얼 가이드의 실행 코드를 개발팀에 전달해서 자유롭게 활용할 수 있어요.
8. 튜토리얼 이탈률 확인하기
인사이트 탭에서 튜토리얼 가이드의 통계를 확인할 수 있어요.
단계 별 노출 수와 이탈률을 확인하고, 지속적으로 개선해보세요!
9. 튜토리얼 수정하기
[익스텐션에서 수정] 버튼을 눌러 튜토리얼 가이드를 수정할 수 있어요.
수정한 뒤 새로운 버전으로 저장하거나 현재 버전에 덮어쓸 수 있어요.
🎁 StepBy 튜토리얼 200% 활용 방법
StepBy의 튜토리얼 가이드는 코드 기반으로 동작하기 때문에 자유롭게 노출 조건을 설정할 수 있어요. (물론 개발 팀에서요! 😏)
고객 별 상황에 맞는 튜토리얼 가이드를 노출시키고, 인사이트(통계)를 통해 A/B 테스트 해보는 건 어떨까요?
더 많은 고객을 아하모먼트로 안내할 수 있을거에요!
Last updated