헤이보드는 플로팅 버튼과 해당 버튼 클릭 시 노출되는 카드 콘텐츠가 각각 1개 이상으로 구성된 위젯이에요.
내가 관리하는 홈페이지(쇼핑몰)에 헤이데어 전용 위젯을 설치하여 고객에게 원하는 콘텐츠를 노출하거나 고객 관리를 할 수 있어요.
카드 콘텐츠란?
웹페이지에서 고객에게 주요 이벤트, SNS, 고객지원 등 다양한 정보를 알리기 위해 사용하는 카드 형식의 콘텐츠에요.
예시: 인스타그램 피드 노출, 홍보 배너, 해피톡(고객지원 채팅) 연결 등
1. 헤이보드 관리
•
내가 만든 [헤이보드] 리스트를 확인할 수 있어요.
•
현재 홈페이지(쇼핑몰)에 등록되어 사용 중인 항목과 임시 저장된 헤이보드로 구분돼요.
•
좌측 리스트에서 헤이보드를 선택하면 우측 미리보기에서 실제 노출되는 모습을 확인할 수 있어요.
•
리스트에서는 [에디터 열기, 복사, 삭제] 버튼이 노출돼요.
◦
에디터 열기: 편집창이 열리며, 헤이보드의 헤이버튼과 카드를 편집할 수 있어요.
◦
복사: 복사본이 생성되며, 원하는 스타일로 변경 가능해요.
◦
삭제: 사용 중인 에디터는 삭제 버튼이 비노출되며, 미사용 헤이보드만 삭제 버튼이 노출돼요.
삭제 시 헤이보드에 적용된 모든 콘텐츠가 삭제돼요..
2. 헤이보드 만들기
이제 헤이보드를 만들어볼까요?
헤이보드는 [버튼]과 [카드]가 최소 각각 1개씩 존재해야 돼요.
즉, 버튼 1개 이상과 카드 1개 이상이 만들어져야 하나의 [헤이보드]가 완성되는 거죠.
2-1. 헤이보드 화면 구성
•
상단영역
◦
헤이보드명 입력: 만들고 싶은 헤이보드명을 입력해주세요.
◦
사용여부: 헤이보드의 사용여부를 ON/OFF할 수 있어요. (기본 OFF상태)
◦
미리보기: [미리보기]를 통해 만들어진 헤이보드가 홈페이지(쇼핑몰)에 실제 노출되는 화면을 확인 가능해요.
◦
임시저장: 작업 시간이 부족하거나 일시 중단이 필요할 경우 [임시저장]을 통해 지금까지 만든 헤이보드를 보관하고, 추후에 완성할 수 있어요.
◦
저장: 헤이버튼과 카드가 완성되었다면 [저장하기]를 통해 헤이보드를 완성해보세요.
•
하단 - 좌측(버튼/카드 구성 & 노출 설정)
◦
[버튼/카드 구성]과 [노출 설정]을 할 수 있어요.
◦
[버튼/카드 구성]은 원하는 카드와 버튼을 [추가/편집/삭제] 할 수 있어요.
◦
만들어진 버튼과 카드는 메뉴트리 구조로 직관적으로 UI를 개선해서 어떤 버튼에 어떤 카드 콘텐츠가 있는지 한 눈에 확인 가능해요.
◦
원하는 [버튼/카드]의 순서를 자유롭게 [드래그 앤 드롭]으로 변경 가능해요.
•
하단 - 가운데(콘텐츠 설정)
◦
버튼/카드 유형에 맞는 콘텐츠 설정 화면이 노출돼요.
▪
각 유형별 콘텐츠 설정 화면은 아래 내용을 참고해주세요.
•
하단 - 우측(미리보기)
◦
선택된 버튼 또는 카드의 미리보기가 가능해요.
◦
미리보기에서 선택한 [버튼]과 [카드]의 콘텐츠 설정이 활성화되어 바로 편집할 수 있어요.
2-2. 버튼 만들기
버튼 추가 화면
기존 버튼 불러오기 화면
위치변경/복제/삭제 기능
•
버튼 추가
◦
버튼을 복수로 만들 수 있어요.(최소 1개 / 최대 5개)
◦
[기본버튼] 또는 [라벨버튼]을 만들 수 있어요.
◦
[기존 버튼 불러오기]를 통해 이전에 작업한 버튼을 쉽게 재사용할 수 있어요.
◦
버튼 영역 마우스 호버 시 ‘위치변경(드래그 앤 드롭), 복제, 삭제’버튼이 노출되요.
버튼 유형별 설정 화면
기본버튼 화면
라벨버튼 화면
•
버튼 유형: [기본버튼]과 [라벨버튼] 중 하나를 선택할 수 있어요.
◦
기본버튼: 아이콘
▪
헤이버튼명 입력:최대 30자까지 입력 가능해요.
▪
헤이버튼 모양: [원형, 네모, 둥근 네모, 투명]의 4가지 모양 타입을 선택할 수 있어요.
▪
버튼 컬러: 원하는 버튼 컬러를 직접 설정할 수 있어요.
▪
헤이버튼 이미지 설정: 9개의 기본 이미지를 제공하며, 사용자가 직접 이미지를 업로드하여 직접 원하는 버튼을 추가할 수 있어요.
◦
라벨버튼: 아이콘+타이틀+서브타이틀
▪
헤이버튼명 입력:최대 30자까지 입력 가능해요.
▪
타이틀, 서브타이틀: 입력된 내용이 버튼 아이콘과 함께 노출돼요.
▪
로고 모양: [원형, 네모, 둥근 네모, 투명]의 4가지 모양 타입을 선택할 수 있어요.
▪
로고 배경 컬러: 원하시는 버튼 컬러를 직접 설정 가능해요.
▪
로고이미지 설정(선택): 기본 이미지는 제공하지 않으며, 사용자가 원하는 이미지로 업로드가능해요.
•
업로드 이미지가 없을 경우 타이틀 제일 첫 글자가 로고로 지정돼요.
2-3. 카드 만들기
카드 추가 화면
기존 카드 불러오기 화면
위치변경/복제/삭제 기능
•
카드 추가
◦
카드를 복수로 만들 수 있어요.
◦
[기존 카드 불러오기]를 하거나, 카드 유형을 선택하여 원하는 카드를 만들 수 있어요.
◦
[기존 카드 불러오기]를 통해 이전에 작업한 카드를 쉽게 재사용할 수 있어요.
◦
카드 유형은 총 7가지가 있어요.
▪
브랜드 카드: 브랜드 이미지, 슬로건, 소개 문구를 활용해 브랜드를 소개할 수 있어요.
▪
기본 카드: 브랜드 로고 노출과 간단한 문장을 노출할 수 있어요.
▪
고객지원 카드: 고객 문의 및 CS를 받을 수 있어요. 카카오채널, 네이버톡톡, 해피톡의 상담 채널을 연결해 빠르고 편리한 고객 지원이 가능해요.
▪
홍보 카드: 캐러셀 형태의 카드를 활용해 고객들을 직접 이벤트 페이지로 연결할 수 있어요.
▪
URL 카드: 버튼을 통해 프로모션, 이벤트 등 특정 페이지로 직접 연결할 수 있어요.
▪
유튜브 카드: 유튜브 영상 URL을 입력하여 동영상을 노출할 수 있어요.
▪
인스타그램 카드: [서비스 연동]을 통해 인스타그램을 연동하면 새롭게 올라오는 피드를 노출할 수 있어요.
◦
카드 영역 마우스 호버 시 ‘위치변경(드래그 앤 드롭), 복제, 삭제’버튼이 노출되요.
▪
단, [브랜드 카드]는 제일 첫번째로 고정되어서 위치변경 불가능해요.
카드 유형별 설정 화면
아래 7가지의 카드 타입별 원하는 정보를 입력해보세요.
타입1. 브랜드 카드
•
카드명: 관리자가 카드를 구분하기 위해 입력하는 항목으로, 30자 이내로 입력 가능해요.
•
브랜드명: 카드에 노출되는 브랜드명(대타이틀) 영역으로 15자 이내로 입력 가능하고, 정렬도 가능해요.
•
설명: 브랜드명 하단에 노출되는 내용 영역으로 최대 58자까지 작성할 수 있어요.
•
배경 컬러: 원하는 버튼 컬러를 직접 설정할 수 있어요.
•
배경이미지 사용 여부: 기본 OFF되어 있으며, ON 선택 시 원하는 카드배경 이미지를 등록할 수 있어요.
◦
배경 이미지 등록: 기본 제공 이미지(5가지)가 있고, 직접 등록도 가능해요.
타입2. 기본 카드
•
카드명: 관리자가 카드를 구분하기 위해 입력하는 항목으로 30자 이내로 입력 가능해요.
•
로고 이미지 등록: 기본 이미지는 제공하지 않으며, 원하는 이미지를 등록할 수 있어요.
(권장 해상도 46X46, (이미지 비율 1:1), (JPG, PNG,GIF) 파일 사이즈 5MB 이하)
◦
업로드 이미지가 없을 경우 타이틀 제일 첫 글자가 로고로 지정돼요.
•
로고 배경 컬러: 원하시는 버튼 컬러를 직접 설정 가능해요.
•
메인 타이틀/서브 타이틀/설명 입력: 내용 입력 시 입력된 내용은 카드 영역에 바로 노출돼요.
타입3. 고객지원 카드
•
카드명: 관리자가 카드를 구분하기 위해 입력하는 항목으로 30자 이내로 입력 가능해요.
•
메인 타이틀/서브 타이틀: 내용 입력 시 입력된 내용은 카드 영역에 바로 노출돼요.
•
서비스 목록: 다양한 CS채널을 추가할 수 있어요.
◦
전화번호: 전화번호 입력
◦
이메일: 이메일 주소 입력
◦
문의사항 접수 페이지: 문의접수 URL 입력
◦
◦
◦
타입4. 홍보 카드
•
카드명: 관리자가 카드를 구분하기 위해 입력하는 항목으로 30자 이내로 입력 가능해요.
•
캐로셀 카드 추가: 여러 카드가 롤링되는 캐로셀을 만들 수 있어요.
◦
캐로셀 카드 정보
▪
이미지 업로드: 카드 상단에 노출되는 이미지를 업로드할 수 있어요.
•
권장 해상도 360 x 240, (이미지 비율 3:2) JPG, PNG, GIF) 파일 사이즈 5MB 이하
▪
메인 타이틀/문구: 내용 입력 시 입력된 내용은 카드 영역에 바로 노출돼요.
•
버튼: 기본적으로 [버튼 사용]이 선택되어 있고, [버튼 사용안함] 가능해요.
◦
버튼 사용 시에 [버튼명, 버튼URL, 버튼 컬러]를 설정할 수 있어요.
타입5. URL 카드
•
카드명: 관리자가 카드를 구분하기 위해 입력하는 항목으로 30자 이내로 입력 가능해요.
•
메인 타이틀/문구: 내용 입력 시 입력된 내용은 카드 영역에 바로 노출돼요.
•
버튼명, 버튼URL, 버튼 컬러: 입력 시 입력된 내용은 버튼 영역에 노출돼요.
타입6. 유튜브 카드
•
카드명: 관리자가 카드를 구분하기 위해 입력하는 항목으로 30자 이내로 입력 가능해요.
•
유튜브 영상 URL: 원하는 유튜브 영상 URL을 입력하고 해당 유튜브를 노출할 수 있어요.
◦
이때 [자동 재생] 기능을 사용하여 고객의 시선을 집중시켜 보세요.
타입7. 인스타그램 카드
•
카드명: 관리자가 카드를 구분하기 위해 입력하는 항목으로 30자 이내로 입력 가능해요.
•
인스타그램 피드 유형: [최신순]으로 전체 피드를 노출하거나, 특정 선택된 게시물만 노출할 수 있어요.
2-3. 헤이보드 완성
이제 거의 다 오셨네요.
[버튼]과 [카드]를 구성하셨다면 이제 마지막으로 [노출 설정]을 진행해주세요.
노출 설정 완료 후 [저장하기]버튼을 클릭하면 나만의 멋진 [헤이보드]가 완성돼요. 노출 설정
•
디바이스별 설정: [PC/모바일] 일괄 설정 또는 개별 설정이 가능해요.
•
화면 위치
◦
[좌측]이나 [우측]으로 선택 가능해요.
◦
여백 조정은 기본 가로X세로 32px로 잡혀요.
◦
[커스텀] 체크 시 가로/세로 위치를 자유롭게 설정할 수 있어요.
•
특정 페이지 적용: 만들어진 헤이데어 버튼이 노출되는 위치 URL주소를 넣어주세요.
특정 별도 페이지를 추가하지 않을 경우, 스크립트가 설치된 전체 페이지에 기본적으로 적용돼요.
◦
[+]버튼을 꼭 눌러주세요.
•
특정 페이지 제외: 특정 페이지에는 노출 안되게 제외 처리할 수 있어요.
◦
[+]버튼을 꼭 눌러주세요.
