1. 위젯이 무엇인가요

위젯은 화면에 고정된 작은 버튼입니다. 글을 아래로 내려도 따라 내려가지 않고 같은 자리에 떠 있습니다. 그래서 어느 페이지를 보고 있든 한 번에 누를 수 있습니다.

놓을 수 있는 자리는 세 곳입니다. ① PC 화면 왼쪽, ② PC 화면 오른쪽, ③ 휴대폰 화면 오른쪽 아래.
PC와 휴대폰은 따로 정합니다. PC 자리에 넣은 버튼은 휴대폰에서 안 보이고, 모바일 자리에 넣은 버튼은 PC에서 안 보입니다.

예를 들면 이렇습니다. 한결 공방은 PC 오른쪽에 카카오톡 상담과 오시는 길을, 휴대폰에는 전화 상담과 카카오톡 상담을 답니다.
전화 버튼을 휴대폰에만 다는 데는 이유가 있습니다. 전화 버튼은 누르면 전화 앱을 여는 버튼인데, PC에서는 눌러도 전화를 걸 수 없는 경우가 대부분이기 때문입니다.

켜는 방법은 지난 글의 팝업·배너와 같습니다.
‘사이트 설정’ → ‘확장 기능’에서 ‘위젯’에 체크하고 ‘저장’, 그다음 왼쪽 메뉴에 생긴 ‘위젯 관리’를 열어 ‘지금 설치하기’를 한 번 눌러 주세요.

2. 버튼 그림 준비하기

위젯은 글자 없이 그림만 나옵니다. 그래서 그림만 보고도 무슨 버튼인지 알 수 있어야 합니다. 등록하기 전에 그림부터 준비하겠습니다.

그림은 이렇게 만들어 주세요.
정사각형으로 만듭니다. 버튼 자리가 정사각형이라 가로세로가 다르면 가장자리가 잘립니다.
동그라미 바깥은 투명하게 둡니다. 배경이 흰색인 그림을 올리면 홈페이지 사진 위에 흰 네모가 같이 떠 보입니다. 그래서 파일은 투명을 담을 수 있는 PNG로 저장합니다.
크기는 200×200 정도면 충분합니다. 화면에는 50~60픽셀로 작게 나오기 때문입니다.

그림 안에 ‘전화’ ‘카톡’처럼 짧은 글자를 같이 넣어 두면 더 알아보기 쉽습니다. 다만 화면에서는 아주 작게 나오니 두세 글자를 넘기지 마세요.

카카오톡 버튼에 걸 주소도 미리 챙겨 둡니다.
카카오톡 채널을 만들면 채팅 주소가 나옵니다. https://pf.kakao.com/_채널아이디/chat 모양입니다. 이 주소를 4단계에서 씁니다.

3. 버튼이 놓일 자리 켜기

‘위젯 관리’를 열면 맨 위에 카드 세 장이 있습니다. 앞에서 본 세 자리입니다. 처음에는 셋 다 꺼져 있습니다.

① PC 우측 위젯과 ② 모바일 위젯의 스위치를 켭니다. PC 좌측은 쓰지 않으니 그대로 둡니다.
③ 크기는 버튼 하나의 가로세로 길이입니다. 기본값은 PC 50, 모바일 40인데 조금 작아 보여서 PC 60, 모바일 48로 키웠습니다.
④ 바꿨으면 반드시 아래 ‘설정 저장’을 눌러 주세요.

이 스위치가 자리 전체의 전원입니다. 버튼을 아무리 등록해도 그 자리의 스위치가 꺼져 있으면 홈페이지에 나오지 않습니다.
실제로 스위치를 켜기 전에 버튼부터 넣어 봤는데 화면에 아무것도 나오지 않았습니다.

반대로, 나중에 버튼을 잠깐 다 내리고 싶을 때는 이 스위치 하나만 끄면 됩니다. 등록해 둔 버튼은 지워지지 않고 그대로 남습니다.

4. 버튼 등록하기

이제 자리에 넣을 버튼을 만듭니다. 오른쪽 위 ‘위젯 추가’를 누르면 창이 뜹니다. 먼저 PC에 달 카카오톡 버튼입니다.

제목은 버튼 이름입니다. 화면에 글자로 나오지는 않지만 목록에서 구분할 때 씁니다.
① 위치는 ‘PC 우측’, ② 유형은 ‘링크’를 고릅니다.
③ 아이콘 이미지에서 준비한 그림을 고르면 아래에 동그란 미리보기가 나옵니다.
④ 링크 URL에 카카오톡 채널의 채팅 주소를 넣습니다.
⑤ 링크 대상은 ‘새 창’으로 합니다. 상담 창이 따로 열려야 보던 홈페이지가 그대로 남습니다.

사진에서는 예시 주소를 사용하고 있지만, 여러분은 직접 만든 채널의 채팅 주소를 넣어 주세요.

‘저장’을 누르고, 같은 방법으로 ‘오시는 길’도 등록합니다.
위치는 PC 우측, 유형은 링크, 링크 대상은 ‘현재 창’입니다. 링크 URL에는 회사소개 페이지 주소 /p/about 을 넣었습니다. 홈페이지에서 회사소개 메뉴를 눌렀을 때 주소창에 나오는 주소입니다.

정렬 순서는 숫자가 작은 버튼이 위에 옵니다. 카카오톡에 1, 오시는 길에 2를 넣었습니다.

다음은 휴대폰에 달 전화 버튼입니다.

① 위치를 ‘모바일’로, ② 유형을 ‘전화’로 바꿉니다.
③ 유형이 전화일 때는 링크 URL 칸에 전화번호를 적습니다. 칸 이름은 그대로 ‘링크 URL’이지만 주소가 아니라 번호를 넣는 자리입니다. 031-000-0000 처럼 줄표를 넣어도 됩니다.

휴대폰에도 카카오톡 버튼이 있어야 하니 ‘카카오톡 상담’을 한 번 더 등록합니다. 이번에는 위치를 ‘모바일’로 합니다.
버튼 하나는 한 자리에만 들어갑니다. PC와 휴대폰 양쪽에 보이게 하려면 이렇게 자리마다 따로 등록해야 합니다.

네 개가 등록됐습니다. 위치 칸의 우측·모바일 표시로 어느 자리에 들어간 버튼인지, 유형 칸으로 링크인지 전화인지 구분됩니다.

5. 홈에서 확인하기

홈페이지를 열어 봅니다.

화면 오른쪽 가운데에 버튼 두 개가 떴습니다. 위가 카카오톡, 아래가 오시는 길입니다.

아래로 내려 봐도 같은 자리에 그대로 있습니다. 문의 안내가 맨 아래에 있어도 손님은 어디서든 버튼을 누를 수 있습니다.

눌러 보며 확인한 것을 적어 둡니다.
위젯은 홈뿐 아니라 모든 페이지에 나옵니다. 공지사항, 회사소개, 로그인 화면에서도 같은 자리에 있습니다. 홈에서만 뜨는 팝업과 다른 점입니다.
‘오시는 길’을 누르면 회사소개 페이지로 이동하고, 카카오톡 버튼은 새 창으로 열립니다.

이번에는 휴대폰입니다.

오른쪽 아래에 전화와 카카오톡 버튼이 떴습니다. PC에 달았던 ‘오시는 길’은 여기에 없습니다.
전화 버튼에는 넣어 둔 번호가 걸려 있어서, 누르면 휴대폰의 전화 앱으로 넘어갑니다.

PC와 휴대폰은 화면 너비로 가릅니다. PC에서도 브라우저 창을 좁게 줄이면 휴대폰용 버튼으로 바뀝니다.

6. 다듬기와 내리기

쓰다 보면 손볼 일이 생깁니다. 자주 쓰는 것 세 가지입니다.

순서 바꾸기. 목록에서 ‘수정’을 눌러 정렬 순서 숫자를 바꿉니다. ‘오시는 길’을 0으로 바꿔 보니 카카오톡 위로 올라갔습니다.

크기 바꾸기. 3단계의 크기 칸을 고치고 ‘설정 저장’을 누릅니다. 그 자리의 버튼이 모두 같은 크기로 바뀝니다. 버튼마다 따로 정할 수는 없습니다.

버튼 내리기. 여기는 주의가 필요합니다.
버튼 수정 창에 ‘사용’ 스위치가 있지만, 지금 버전(위젯 1.0.0)에서는 꺼서 저장해도 꺼지지 않았습니다. 다시 열어 보면 켜진 채로 돌아와 있습니다.
버튼 하나를 내리려면 목록의 ‘삭제’를 쓰고, 한 자리의 버튼을 잠깐 다 내리려면 3단계의 자리 스위치를 끄는 쪽이 확실합니다. 두 방법 모두 직접 해 보고 확인했습니다.

끝으로, 지난 글의 팝업과 같이 쓸 때 알아 둘 것이 하나 있습니다.
팝업이 떠 있는 동안에는 위젯도 눌리지 않습니다. 팝업이 화면 전체를 덮기 때문입니다. 팝업을 닫으면 바로 눌립니다.
팝업을 걸어 둔 동안에는 홈에 들어온 손님이 팝업부터 닫아야 상담 버튼을 누를 수 있다는 점만 기억해 주세요.