고객에게 정보를 제공하는 홈페이지 팝업 창 만들고 추가하는 방법

|

홈페이지 방문자의 시선을 사로잡는 방법에는 여러가지가 있습니다. 그중에서 가장 보편적으로 사용하는 방식이 바로 팝업 창입니다. 방문자에게 중요한 정보를 제공하는 목적으로 많이 사용하는데요. 메이크나우에서도 팝업 창을 만들고 홈페이지에 연동할 수 있습니다. 그 방법을 알려드리죠.

팝업 창의 종류

메이크나우에서 사용할 수 있는 팝업 창은 2가지 종류입니다.

하나는 홈페이지 방문시 조건에 따라 자동으로 나타나도록 하는 팝업 창입니다. 공지사항을 알릴 때 많이 사용하죠.

또 하나는 링크나, 버튼을 클릭했을 때 나타나는 팝업 창입니다. 고객의 정보를 받는 입력 양식을 포함시킨 팝업 창이 대부분입니다.

방문 시 나타나는 팝업 창 설정

먼저 고객이 방문 시 나타나는 팝업 창을 만들려면 관리자 화면에서 makenow 메뉴의 하위에 있는 popups 로 들어갑니다.

상단에 있는 Add New 버튼을 누르면 익숙한 화면이 나옵니다. 페이지를 만드는 것과 유사한 방식인데요. 제목을 추가하고 edit with makenow 버튼을 눌러 팝업 창 만들기를 시작합니다.

화면에 나타나는 팝업 만들기를 클릭하면 다양한 팝업 템플릿이 나타납니다. 그 중 원하는 디자인을 선택하여 편집하면 쉽습니다. 물론 create your own 을 눌러 처음부터 디자인을 원하는 대로 할 수도 있습니다. 페이지를 편집하는 방식과 유사합니다.

팝업창 만들기
팝업창 템플릿 리스트

원하는 팝업 창 템플릿을 선택했으면 내부의 디자인과 문구는 변경하면 됩니다. 중요한 부분은 팝업 창에 대한 프로그램적 설정을 하는 부분입니다. 아래 그림과 같이 팝업 창 설정용 아이콘을 클릭합니다. 여러가지 옵션들이 나타납니다.

나타난 옵션 중 맨 앞의 아이콘을 클릭하고 그림과 같이 디스플레이 조건을 선택해줍니다. 다른 부분들은 기본 값을 그대로 두고 사용하시면 됩니다. 이 디스플레이 조건에서 팝업창이 어디에 나타나는지 어떤 조건에서 나타나는지를 지정해줍니다.

Trigger 메뉴가 팝업창이 나타나는 조건을 정하는 것입니다. 브라우저에서 이탈하는 행위를 할 때, 스크롤을 내렸을 때 등 다양한 설정을 할 수 있는데요. 복잡하게 할 것 없이 방문자가 홈페이지에 들어온 뒤 일정시간이 지나면 팝업이 뜨도록 설정하는 게 가장 좋습니다. 그림과 같이 on page load 를 선택하고 after 에 초단위의 시간을 써주면 됩니다.

2초로 지정하면 방문자가 페이지에 방문해서 페이지 로딩이 끝난 2초 뒤에 팝업창이 나타나게 됩니다.

트리거 옆의 condition 항목은 팝업 창이 어디에 나타날지를 지정하는 부분입니다. 보통 홈페이지에 많이 지정을 하기 때문에 메이크나우에서는 페이지로 해놓고, 프론트페이지 를 지정해주면 되겠습니다. 그러면 홈 화면에서 팝업 창이 뜹니다.

다른 글이나 다른 페이지에서 팝업창이 뜨길 원한다면 그 페이지나 글을 지정해주면 됩니다. 여러개의 페이지에 동일한 팝업창이 뜨도록 설정할 수도 있습니다. 아래쪽의 add new display condition 버튼을 누르면 됩니다.

클릭하면 나타나는 팝업 창 만들기

다음은 클릭하면 나타나는 팝업창입니다. 클릭을 한다는 것은 링크를 클릭하는 것을 의미합니다. 버튼이나 문구를 선택하고 메뉴항목에서 링크를 선택해보면 링크대상에 popup 이 있는 것을 보실 수 있습니다.

링크를 클릭하고 popup 을 선택하면 팝업창 지정 화면이 나옵니다. 클릭하면 앞서 설명한 것과 같은 팝업창 만들기 화면이 뜹니다. 템플릿을 선택하면 아래와 같이 popup이 지정됩니다.

이 다음 할일은 내가 선택한 popup을 원하는대로 수정하는 것입니다. 팝업 썸네일을 클릭하면 팝업창을 디자인 할 수 있는 메이크나우 편집기가 열립니다. 이 편집기에서 원하는 대로 디자인을 하고 방문 시 팝업 창과 마찬가지로 팝업창 설정을 해주면 됩니다.

이상 포스팅을 통해 팝업창 만드는 법을 설명했는데요. 추후 영상 가이드를 추가하겠습니다.