쉽고 간편한 팝업 추가 방법을 알려드려요. 천천히 따라와 보세요!
① 팝업 추가하기
팝업 리스트에서 [팝업 추가] 버튼을 클릭하면 팝업 템플릿을 선택하는 화면으로 이동해요.
② 템플릿 선택하기
팝업의 다양한 템플릿을 선택하는 단계에요. 스타일과 디자인 템플릿 중에서 선택할 수 있어요.
❶ 팝업명
팝업명에 커서를 올리거나, 클릭하여 팝업명을 수정할 수 있어요.
❷ 디바이스 선택
•
모바일 팝업과 피시 팝업을 구분하여 설정할 수 있는 버튼이에요.
❸ 팝업의 단계 버튼
•
팝업을 꾸미는 각 단계로 이동할 수 있는 버튼이에요.
•
팝업의 다양한 템플릿을 선택하는 템플릿, 원하는 목적에 따라 팝업을 꾸밀 수 있는 꾸미기, 원하는 위치와
시간을 설정할 수 있는 노출 설정, 팝업을 노출시킬 수 있는 스크립트 추가의 단계가 있어요.
❹ 카테고리 선택
•
스타일 선택과 디자인 템플릿 선택으로 나누어져 있어요.
•
스타일 선택은 이미지, 로고, 텍스트 등의 스타일 조합을 선택할 수 있고, 디자인 템플릿 선택은 각 카테고리 주제에 맞는 디자인 된 팝업을 선택할 수 있는 것이에요.
③ 꾸미기
선택한 팝업 템플릿을 원하는 목적에 맞게 꾸미는 단계에요.
❶ 모드 선택
•
기본 모드 : 쉽고 간편하게 수정할 수 있는 모드에요.
•
고급 모드 : 원하는 컨셉과 방향에 맞게 디자인, 레이아웃 등을 수정할 수 있는 모드에요.
❷ 수정 화면
•
클릭 및 드래그하여 팝업을 수정할 수 있어요.
④ 노출 설정
꾸며놓은 템플릿의 원하는 위치와 시간을 설정할 수 있는 단계에요. 필수 단계는 아니에요.
❶ 노출 정보
•
배경 레이어, 노출 위치, 애니메이션 등 팝업이 어떻게 노출될지를 설정할 수 있어요.
❷ 스케줄 설정
•
바로 공개할지, 예약 공개를 할지 설정할 수 있어요.
❸ 노출 대상
•
특정 도메인과 페이지에 노출할 수 있도록 설정할 수 있어요.
•
특정 브라우저로 접속한 사용자에게만 캠페인을 비공개할 수 있어요.
⑤ 스크립트 추가
스크립트를 추가해야 사이트에 팝업을 노출할 수 있어요.
*이미 추가 완료하셨다면 바로 오른쪽 상단 [등록] 버튼을 클릭하세요.
❶ 코드앤버터 스크립트 설치 방법
방법 1. HTML 방식을 사용할 수 있는 경우
<script>
(function (co,de,n,but,t,e,r){!n[co]&&(n[co]=function(){ (n[co].q=n[co].q||[]).push(arguments);});e=t.createElement(but); e.async=true;e.src=de;r=t.getElementsByTagName(but)[0]; r.parentNode.insertBefore(e, r); })("CodenButter", "https://buttr.dev/butter.js", window, "script", document); window.CodenButter("boot", { siteId: "litysesthx", auto: true }); window.CodenButter("mount");
</script>
HTML
복사
1.
HTML 코드에서 <HEAD> 태그를 찾아요.
2.
위의 코드앤버터 스크립트를 복사하고 <HEAD> 태그 사이에 붙여 넣으세요.
(<HEAD>와 </HEAD> 사이)
3.
수정한 사항을 저장해요.
4.
이제 웹사이트를 새로고침하면 팝업이 노출된 것을 확인할 수 있어요.
❷ 다른 방법은 없나요?
방법 2. HTML 방식을 사용할 수 없는 경우 (SCRIPT 방식)
(function (co,de,n,but,t,e,r){!n[co]&&(n[co]=function(){
(n[co].q=n[co].q||[]).push(arguments);});e=t.createElement(but);
e.async=true;e.src=de;r=t.getElementsByTagName(but)[0];
r.parentNode.insertBefore(e, r);
})("CodenButter", "https://buttr.dev/butter.js", window, "script", document);
window.CodenButter("boot", { siteId: "litysesthx", auto: true});
window.CodenButter("mount");
JavaScript
복사
1.
위의 코드를 복사하고 사용중인 스크립트 코드에 추가하거나 <SCRIPT> 태그 사이에 붙여 넣으세요.
(<SCRIPT>와 </SCRIPT> 사이)
⑥ 팝업 공개하기
❶ 팝업 등록 후 돌아온 리스트 화면에서, 등록한 팝업의 [공개] 버튼을 클릭해 주세요.
•
리스트에서 공개 상태여야 팝업이 정상적으로 노출돼요.
관련 가이드
[마케팅 레시피] 팝업 기능을 200% 활용하고 싶다면?
