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