카테고리
활용팁
[코드활용팁] 상단 이동 스크롤 버튼 만들기 (탑버튼)
[코드활용팁] 상단 이동 스크롤 버튼 만들기 (탑버튼) 방문자가 다시 웹페이지 상단으로 올라가고자 할 때, 웹페이지가 길어지면 마우스 스크롤을 몇 번이나 반복해야 하기 때문에 번거로울 수 있습니다. 그 번거로움을 원클릭으로 해결할 수 있는 상단 스크롤 이동 버튼, 일명 '탑버튼' 제작팁을 소개드립니다. 기능 미리보기 1) 탑버튼 예시 보기에 접속하여, 페이지를 아래로 내린 뒤에 오른쪽 아래에 있는 화살표 아이콘을 눌러보세요. 2) 같은 페이지의 윗부분으로 화면이 이동하는 것을 확인할 수 있습니다. 1단계, 소스 코드 다운로드 및 복사하기 아래 소스 코드를 마우스로 드래그하여, 복사(단축키 : Ctrl + C)합니다. <!-- 상단으로 이동하기 버튼 --> <a href="#" class="btn_gotop"> <span class="glyphicon glyphicon-chevron-up"> </span> </a> <style> .btn_gotop { display:none; posi[코드활용팁] 플로팅 액션 버튼 만들기(고급)
[코드활용팁] 플로팅 액션 버튼 만들기(고급) 캠페이너스는 코드를 쓰지 않아도 다양한 웹사이트, 쇼핑몰을 제작할 수 있도록 고안될 웹 제작 도구입니다. 그렇다고 코드를 완전히 사용하지 못하는 건 아닙니다. 코드를 사용하면 더 다양한 디자인이 가능하며, 아래 그림과 같은 플로팅 액션 버튼을 추가할 수도 있습니다. 이번 도움말에서는 코드를 활용해 플로팅 버튼(퀵바, 퀵메뉴)을 만드는 방법을 알아봅니다. 주의 : 도움말에서 제공하는 소스 코드를 사용자가 임의로 변경한 부분에 대해 기술 및 고객지원은 불가합니다. - 사이트에서 플로팅 버튼 적용 사례 살펴보기 > 파일 다운받기 (67KB) 샘플 플로팅 배너 이미지를 다운로드해 사용할 수 있습니다. 이미지 크기 및 위치 변경은 아래 소스 코드 주석을 참조하세요. 참고 본 도움말에 사용된 코드 및 샘플 배너 이미지를 있는 그대로 사용하려면 본문폭(가로폭)을 1200px로 권장드립니다. 설정방법 : 디자인 모드 > 관리자 모드 > 공통디자인 설정채널톡 연동 방법(실시간 채팅상담)
채널톡 연동 방법(실시간 채팅상담) 채널톡은 채팅상담부터, CRM, 마케팅까지 하나의 툴에서 모두 관리할 수 있는 '채팅 CRM 솔루션'입니다. 온라인 사이트의 작은 채팅 버튼을 클릭하면 바로 대화를 시작할 수 있어요. 사이트에 방문하는 모든 고객과.채팅상담부터 푸시메시지, 전환까지 채널톡으로 해결할 수 있습니다. 번거로운 전화 상담 대신 간편하게 채팅으로 질문을 받고 답변해보세요. 이 도움말은 채널톡에 가입하고, 캠페이너스 사이트와 연동하는 방법을 설명합니다. 참고 지금 캠페이너스 사이트에 채널톡을 연결하시면 6개월 무료 이용 혜택을 받으실 수 있습니다. *채팅 CRM 통합 솔루션 채널톡을 소개합니다. 설정방법 1단계: 채널톡 가입하기 1. 채널톡에 접속하여 오른쪽 윗부분의 시작하기 버튼을 클릭하여 신청을 시작합니다. 2. 회원가입 및 채널생성 절차를 모두 완료하고 채널톡 시작하기를 클릭합니다. 2단계: 채널톡 플러그인 키, 액세스 시크릿 복사하기 1. 왼쪽 하단의 채널 설정을 클모달창 띄우기
모달창(Modal Window) 모달 기능을 활용해 페이지 위에 새로운 창을 띄워 콘텐츠를 보여줄 수 있습니다. 별도의 페이지 로드 없이 제품의 상세 스펙을 보여주거나, 목록을 보여줄 때 유용합니다. 모달은 일반 팝업 창과 다르게 방문자가 버튼 또는 링크를 클릭했을 때만 동작합니다. 모달은 여러 위젯을 사용해 꾸밀 수 있지만 게시판, 캘린더, 지도 게시판, 쇼핑과 같은 일부 DB 위젯은 사용할 수 없습니다. 사용방법 PART 1. 모달 메뉴 만들기 모달 기능을 활용하려면 앞서 띄울 모달 페이지를 만들어야 합니다. 1단계, 관리자 모드에서 디자인 모드를 접속합니다. 2단계, 왼쪽 윗부분의 ≡ 버튼을 눌러 메뉴 관리를 열고 모달 오른쪽 ⊕ 를 클릭합니다. 3단계, 모달 메뉴명을 입력하고 확인을 누릅니다. 4단계, 빈 모달 메뉴에 위젯을 추가하거나 섹션을 나누어 디자인할 수 있습니다. 5단계, (필요한 경우) 모달 메뉴 설정을 열고, 모달 제목, 모달 넓기, 배경색 등 설정을 변경합니다.구글 폰트 사용하기(부분 적용하기)
특정 페이지 전체 또는 특정 문구에만 구글 폰트를 적용할 수 있습니다. 주의 : 구글 웹 폰트 사용에는 HTML 및 CSS에 대한 이해가 필요합니다. 또한 제공되는 소스 코드 및 도움말 외 추가적인 기술 및 고객지원은 제공하지 않습니다. 1단계: Google Fonts에서 글꼴 찾기 1. Google Fonts 에 접속합니다. 2. 왼쪽 상단의 검색 필드에 원하는 글꼴명을 영문으로 작성합니다. 3. 마음에 드는 글꼴이 나오면 마우스로 클릭합니다. 4. 웹사이트에 사용할 글꼴의 + Select this style을 클릭합니다. 주의 : 검색한 글꼴의 한글 지원 여부를 확인해 주세요. 영문만 지원하는 글꼴을 선택하는 경우, 한글은 시스템 기본 글꼴 또는 캠페이너스에서 설정한 글꼴로 표시될 수 있습니다. 5. 아래 그림과 같이 브라우저 오른쪽에서, 선택한 글꼴의 HTML 코드와 CSS 코드가 생성됩니다. 2단계: 폰트 파일 불러오기 위 1단계에서 선택한 폰트 파일을 내 사이트로 불러옵니다카카오싱크 연동하기 (카카오 로그인)
카카오싱크란? 카카오싱크(KakaoSync)는 사이트 방문자가 회원가입 시 약관 동의를 한 번에 진행하여 더 빠르게 가입할 수 있게 도와주는 카카오의 간편가입 서비스입니다. 또한, 카카오톡 채널 추가를 유도해 회원가입과 동시에 채널 친구를 늘리고 카카오가 제공하는 광고 및 마케팅에 활용할 수 있습니다. 시작에 앞서 카카오싱크를 설정하기에 앞서, 사용자는 아래 항목들을 확인하고 모두 설정 완료해야 합니다 1. 사이트 정보 입력 : 내 사이트 관리자 페이지의 [환경설정 > 기본 설정]에서 상점/사이트 정보를 모두 입력합니다. 2. 패비콘 추가 : 내 사이트 관리자 페이지의 [환경설정 > 기본설정]에서 패비콘 이미지를 추가합니다. 3. 가입 항목으로 이메일 주소 설정 : 내 사이트 관리자 페이지의 [환경설정 > 가입 및 그룹 설정]에서 공통 항목에 이메일 주소를 가입 항목으로 선택하고, 필수로 선택합니다. 4. 가입 항목으로 이름 항목명을 '이름'으로 설정: 내 사이트 관리자 페이지의 [텍스트 링크 클릭 시 모달창 띄우기 (코드)
링크 클릭 시 페이지 전체를 로드하지 않고 독립적인 창을 띄우는 형식의 모달을 만들 수 있습니다. 이 도움말에서는 코드를 사용해 텍스트 링크 클릭 시 모달 창을 띄우는 방법을 설명합니다. 기본 링크 형식을 사용해 모달창을 띄우려면 다음 모달창 띄우기 도움말을 확인하세요. 참고사항 이 도움말의 코드는 텍스트 에디터(게시판, 텍스트 위젯, 상품 요약설명, 상품 상세설명 등)에서 동작하지 않습니다. 또한, 제공되는 소스 코드 및 도움말 외 추가적인 기술 및 고객지원은 제공하지 않습니다. 1단계: 모달 메뉴 만들기 페이지에 띄울 모달 페이지를 제작합니다. 1. 디자인 모드에 접속합니다. 2. 왼쪽 윗부분 메뉴 관리를 클릭해 메뉴 관리 창을 열고, 맨 아래 부분 모달의 오른쪽 ⊕ 아이콘을 클릭합니다. 3. 모달 메뉴명을 입력하고 확인을 누릅니다. 4. 빈 모달 메뉴에 위젯을 추가하거나 섹션을 나누어 디자인합니다. 5. (선택 사항) 모달 메뉴의 메뉴 설정을 열어, 모달 제목, 모달 넓기, 배[코드활용팁] 입력폼에 개인정보 수집 및 이용 약관을 간단하게 나타내고 싶어요.
캠페이너스에서 입력폼을 이용할 때 개인정보수집 및 이용 동의 약관을 노출할 수 있습니다. 코드를 조금 활용할 수 있다면, 이용약관을 클릭했을 때 약관의 세부내용이 나타나도록(모달창) 이용할 수도 있습니다. 1. 클릭만으로 이용할 수 있는 방법 입력폼 설정에서 개인정보수집 동의 또는 정보 제3자 제공동의를 클릭하여 바로 이용할 수 있습니다. 설정방법 - 디자인 모드 > 입력폼 우클릭 > 입력폼 설정 > 개인정보수집 동의 클릭 또는 정보 제3자 제공 동의 - 동의의 설정을 눌러 약관의 세부 내용을 변경할 수 있습니다. 개인정보수집 동의를 선택하면 사이트에는 다음과 같이 나타납니다. 2. 코드를 활용하여 세부내용을 모달창으로 나타나게 하는 방법 약간의 코드를 활용하여 '개인정보 수집 및 이용'부분을 클릭했을 때, 약관의 세부내용이 나타나도록(모달창) 할 수 있습니다. 샘플페이지보기 설정방법 - 다음 박스 안의 코드를 그대로 드래그하여 복사(ctrl+c)합니다. <!-- 세부내용을 모달창으모바일에서는 동영상 자동재생기능이 반영되지 않습니다.
동영상 자동재생기능이란, 추가로 재생버튼을 누르거나 화면을 터치하는 작동없이 동영상이 자동으로 재생되는 기능을 말합니다. 디자인모드에서 섹션의 배경으로 동영상을 삽입하고, 자동재생을 설정하면, PC상에서 동영상이 별도의 클릭 없이 자동재생되도록 이용할 수 있습니다. 하지만 이러한 동영상 자동재생 기능은 PCWindows 또는 MacOS 등의 PC(데스크톱) 환경에서는 가능하나, 모바일에서는 자동재생 되지 않습니다. 이유는 모바일 기기(운영체제 또는 웹브라우저) 차원에서 동영상을 비롯한 음원 등의 멀티 미디어를 자동으로 재생하지 못하도록 제한했기 때문입니다. 캠페이너스에서는 이를 Google이나 Apple 등 모바일 운영체제 제작사에서 시스템 및 네트워크 자원을 절감하기 위한 강제사항으로 판단하고 있습니다. 웹에서는 아직 위의 규칙을 무시하는 방법이 존재하지 않습니다. 또한 모바일의 경우 보안 기능이 강화되어 별도의 코드를 활용하시더라고 코드 적용이 어려울 수 있습니다. 따라서 모바일비영리 단체 채널톡 이용 혜택 적용 방법
이 도움말은 캠페이너스를 이용하는 비영리 단체가 캠페이너스 사이트에 채널톡을 연결하고 무료 또는 할인 지원을 받기 위한 절차를 안내드립니다. 앞서 완료해야 할 사항 비영리 지원을 받으시려면 앞서 채널톡 가입을 완료하고, 캠페이너스 사이트에 연결을 완료해야 합니다. 아직 채널톡을 사이트에 연동하지 않았다면, 다음 도움말 링크를 참고해 연동을 완료해 주세요. 채널톡 가입 및 연동방법(내 사이트에 실시간 채팅상담창 설치하기) 비영리단체 캠페이너스 고객 채널톡 무료 혜택 💜 - 웹사이트 월 방문자 수 2만명 이하 : “미디엄 이하 플랜 + 부가서비스” 모두 전액 무료 - 웹사이트 월 방문자 수 2만명 초과 : “라지 이상 플랜 + 부가서비스” 모두 50% 할인 ※ 지원은 1년간 적용됩니다. ※ 자세한 가격 플랜은 채널톡 홈페이지를 통해 확인하실 수 있습니다. 1단계: 결제카드 등록하기 1. 채널톡 관리자 페이지로 이동합니다. 2. 왼쪽 하단의 톱니바퀴 모양 채널 설정 아이콘을 클릭합니다.[코드활용팁] 특정페이지에서 채널톡이 보이지 않게 하려면?
특정 페이지에서는 채널톡 등 다른 요소들의 노출을 가급적 줄여주어야 할 때가 있죠. 이럴 때 캠페이너스 위젯 중 코드위젯을 이용하여 코드를 넣어보세요. 참고사항 이 도움말은 채널톡 채팅창(둥둥 떠있는 말풍선 로고, 둥둥이)을 특정페이지에서 아예 보이지 않도록 하는 내용입니다. 채널톡 채팅창은 그대로 나타나되, (캠페인 설정한)푸시메시지가 특정페이지에서 나타나지 않도록 하기는 캠페인 설정 중 시작이벤트에서 제외 URL을 넣어 이용하실 수 있습니다. 경우1. (모바일, PC 화면 모두에서) 특정 페이지에 채널톡 창이 뜨지 않도록 하기 설정 방법 : 디자인 모드 > 해당 페이지 아랫쪽에 코드위젯 추가 > 코드위젯 우클릭 > 코드 설정 클릭 > 다음의 코드를 복사(ctrl+c)하여 붙여넣기(ctrl+v) 합니다. <script> ChannelIO('shutdown'); </script> 경우2. PC에서는 채널톡이 보이고, 모바일에서만 특정 페이지에 채널톡 창이 뜨지 않도록 하기 설정 방법사이트에 눈 내리기 효과 적용하기
사이트 배경에 눈이 내리는 효과를 적용할 수 있습니다. 눈이 내리는 겨울철에 활용해보세요. 설정방법 따라하기 1. 디자인 모드에 접속합니다. 2. 효과를 적용할 섹션을 찾습니다. 3. 섹션을 우클릭하여 섹션 설정 메뉴로 진입합니다. 4. 설정창 우측의 체크박스 항목 중 '눈내리기 효과'의 체크를 활성화합니다. 5. 저장합니다. 참고사항 - 눈 내리기 효과는 사이트 방문자가 PC로 접속할 때만 보여집니다. 모바일에서는 접속자의 CPU 사용량을 줄이기 위해 동작하지 않습니다. - 눈은 흰색이므로 섹션의 배경색이 흰색 또는 밝은색이라면 표시되지 않는 것처럼 보일 수 있습니다.뉴스레터 구독 신청 위젯 추가하기
스티비, 메일침프 등 이메일 마케팅 서비스를 사용하여 뉴스레터를 발송하고 있는 경우, 사이트 방문자가 이메일 주소를 입력하면 해당 메일 서비스에 바로 등록되는 구독신청 폼을 추가할 수 있습니다. 다음은 캠페이너스의 코드 위젯을 활용하여 이메일 마케팅 서비스와 연동되는 구독신청 폼을 내 사이트에 추가하는 방법입니다. 스티비 연동 구독신청 폼 추가하기 1. 내 스티비 계정에 로그인하고 상단 메뉴에서 주소록 을 누릅니다. 2. 연동할 주소록을 누르고 구독화면 메뉴를 누릅니다. 3. 스티비 도움말을 참고하여 구독 신청을 받는 방법을 확인합니다. 4. 스티비 화면에서 HTML 코드로 구독 폼 내보내기 과정을 확인하여 코드 내보내기 를 누르고 생성된 코드를 복사합니다. 5. 캠페이너스 디자인모드로 돌아와서 구독 폼을 추가할 위치에 코드 위젯을 추가합니다. 6. 코드 위젯을 우클릭하고 코드 설정 을 누른 후 스티비에서 복사해온 코드를 붙여 넣습니다. 7. 저장하고 사이트에 게시합니다. 메일침프게시판 게시물의 텍스트 줄간격 고급 조절 방법 (행간, 코드)
게시판의 게시물 줄간격은 텍스트 도구에서 줄간격 도구를 사용해 간단하게 조절할 수 있습니다. 그러나 만약 더 세밀한 줄간격 조절이 필요하다면 코드를 사용해 원하는 간격으로 조절할 수 있습니다. 이 도움말에서는 게시물 텍스트 에디터를 코드뷰로 전환하여 CSS 스타일을 추가해 텍스트 간격을 조절하는 방법을 설명합니다. 주의사항 이 도움말에서는 텍스트 에디터에서 줄간격 및 일부 CSS 속성을 추가하는 방법에 관해서만 설명합니다. 그외 사용자가 임의로 편집한 부분에 대해서는 기술 및 고객지원이 불가합니다. 중요: 시작에 앞서 줄간격 속성을 추가하기 전 텍스트의 크기, 색상 등을 변경했다면 줄간격 속성이 정상적으로 작동하지 않습니다. 이 땐 먼저 텍스트에 적용된 스타일을 모두 초기화하고, CSS로 새롭게 스타일을 추가해 주세요. 모든 텍스트를 선택하고, 서식 제거 옵션을 클릭하여 텍스트 스타일을 초기화 할 수 있습니다. 조절방법 1단계: 게시물 텍스트 에디터를 코드뷰로 전환하기 1. 게시판이내가 보유한 폰트를 추가할 수 있나요?
캠페이너스는 공통 디자인 설정 기능을 통해 다양한 글꼴을 제공하고 있으며 지속적으로 새로운 글꼴을 추가하고 있습니다. 만약 공통 디자인 설정에서 제공하지 않는 글꼴을 웹사이트에 사용하려면 두 가지 방법이 있습니다. 1) 고객센터에 글꼴 등록 제안 고객님이 보유한 글꼴을 공통 디자인 설정의 글꼴 목록에 직접 업로드하여 사용할 수 있는 기능은 지원되지 않습니다. 다만 고객센터에 제안해주신다면 상업적으로 누구나 무료로 사용할 수 있는 글꼴에 한해 검토를 거쳐서 등록될 수 있습니다. 2) 코드를 사용하여 내 사이트에 직접 글꼴 적용 내가 보유한 글꼴을 웹폰트로 변환하거나 타사 웹폰트 서비스를 사용하여 내 사이트에 글꼴을 적용할 수 있습니다. 이 때에는 관리자 모드 > 환경설정 > SEO, 헤더설정 에서 웹폰트 적용을 위한 코드를 직접 삽입해야 합니다. 웹폰트 사용방법에 대한 자세한 내용은 생활코딩 웹폰트 페이지를 참고해보시기 바랍니다. 내가 보유한 글꼴을 웹폰트로 사용시 유의사항 내가 보유구글 크롬 시크릿창 활용하기
Google 크롬, Microsoft 엣지, 파이어폭스(Firefox) 등 세계 주요 인터넷 브라우저에는 사용자의 웹 서핑 정보(인터넷 사용 기록, 쿠키 및 사이트 데이터 또는 양식 등)가 저장되지 않는 시크릿 모드라는 기능을 제공합니다. 시크릿 창을 켜면 모든 웹서비스가 로그아웃된 상태로 인터넷에 접속됩니다. 따라서 사이트 설정 변경 후 로그아웃할 필요 없이 시크릿 창만 켜서 간편하게 내 사이트의 로그인 전/후 상태를 확인할 수 있습니다. 참고 : 일부 설정의 경우 게시하기 버튼을 클릭하지 않으면 시크릿 창에서 변경사항이 확인되지 않을 수 있습니다. 이 도움말에서는 Google 크롬에서 시크릿 창을 켜서 로그인 및 비로그인 상태에서의 사이트를 비교, 검토하는 방법을 소개합니다. 활용방법 1. Google 크롬 브라우저가 없는 경우 다운로드 및 설치합니다. 2. PC에 설치된 크롬 아이콘을 클릭해 브라우저를 켭니다. 3. 오른쪽 상단에서 더보기 ⋮ 아이콘을 클릭합니다. 4. 새 시크MRM Web 후원신청 페이지 연동하기
후원관리 솔루션으로 MRM Web을 이용하시는 단체에서는 캠페이너스 사이트에 MRM Web 신청 페이지를 연결하실 수 있습니다. 내 사이트에 방문한 잠재적 후원자가 후원하기 버튼을 클릭하면, 바로 후원 신청 페이지로 이동하여 다음과 같은 MRM Web 후원신청 페이지로 이동하는 것을 확인하실 수 있습니다. 1. MRM Web 관리자 페이지에서 오른쪽 윗부분의 MRM Web URL을 클릭합니다. 2. 팝업으로 뜨는 기본 URL 표에서 원하는 내용의 URL을 드래그하여 복사(ctrl+c)합니다. - 예1) 정기후원의 경우 - 예2) 일시후원의 경우 3. 내 사이트의 디자인 모드에서 클릭시 MRM Web으로 이동할 버튼을 추가하고 복사한 링크를 연결합니다. - 후원하기 버튼 위젯을 우클릭 > 버튼 설정 클릭합니다. - 링크 부분에 MRM Web에서 복사해온 URL을 붙여넣기(ctrl+v)하여 넣습니다. - 게시하기를 눌러 저장을 합니다. 이 도움말은 MRM Web V2 기준으로 작성되었습게시판 글양식 활용하기
사이트 회원 또는 방문자가 게시판에 글을 작성하려고 할 때 미리 준비된 양식을 제공하여 기재가 필요한 항목을 누락 없이 작성하도록 유도할 수 있습니다. 캠페이너스에서는 이를 글양식이라고 부릅니다. 다음은 게시판에서 글양식을 활용하는 예시입니다. - 고객센터 게시판 : 문의 유형, 증상 요약, 사용기기 등 입력 유도 - 회의록 게시판 : 회의명, 회의 일시, 참석자, 안건 등 입력 유도 - 활동일지 게시판 : 활동 내용, 만난 사람, 작성일 등 입력 유도 - 신청 게시판 : 신청자명, 집주소, 전화번호, 이메일 주소 등 입력 유도 - 신고 게시판 : 신고유형, 발생일시, 신고내용 등 입력 유도 - 품의 게시판 : 품목, 품의 사유, 금액 등 입력 유도 참고 게시판 글양식은 입력폼 위젯의 필수항목 기능과 달리 각 항목의 입력 여부를 확인하거나 강제하지 않습니다. 사용자는 게시물 작성시 글양식을 삭제하거나 변경할 수 있습니다. 글양식 설정 방법 1. 디자인 모드에 접속합니다. 2. 글양식아코디언 게시판에서 특정 게시물이 오픈된 채로 링크 만들기
Q. 아코디언 게시판을 이용하면서 특정 게시물이 열린 채로 공유하고 싶다면 어떻게 해야할까요? 아코디언 게시판은 게시판 제목을 클릭하면 그 아래로 본문이 노출되는 형태입니다. QnA 게시판처럼 여러 문항을 동시에 살펴보도록 할 때 활용할 수 있습니다. 이런 아코디언 게시판도 간혹 특정 게시물을 노출하여 페이지 링크를 공유하고 싶을 수 있는데요. 다른 게시판처럼 본문이 별도의 페이지에서 열리는 형태가 아니므로, 제목을 클릭한 것만으로는 게시물 링크를 생성할 수 없습니다. 이 때 최신글 위젯을 활용하여 아코디언 게시판의 특정 게시물을 연 상태로 링크를 만들 수 있습니다. 활용 방법 1. 디자인 모드 > 메뉴 관리에서 메뉴(페이지)를 새로 생성하여 최신글 위젯을 추가합니다. 2. 최신글 위젯을 추가한 메뉴는 메뉴 설정에서 메뉴 숨김 처리를 합니다. 3. 최신글 위젯 설정 > 게시판 연동에서 해당 게시판을 선택합니다. 4. 최신글 위젯이 있는 메뉴의 메뉴 설정에서 URL을 확인하여, 브라우상단/하단 이동 스크롤 버튼 만들기 (코드, 고급)
주의 : 캠페이너스에서 제공하지 않는 기능을 코드로 해결하는 도움말입니다. 사용자가 임의로 변경한 부분에 대해 기술 및 고객지원은 불가하며, 향후 캠페이너스 업데이트에 따라 정상적으로 작동하지 않을 수 있습니다. 캠페이너스는 코드를 쓰지 않아도 다양한 웹사이트, 쇼핑몰을 제작할 수 있도록 고안된 웹 제작 도구입니다. 그렇다고 코드를 완전히 사용하지 못하는 건 아닙니다. HTML, CSS, 자바스크립트를 사용하면 더 다양한 디자인이 가능하며, 아래의 애니메이션과 같은 상단/하단 이동 스크롤 버튼을 만들어 추가할 수도 있습니다. 이 도움말은 코드를 활용한 고급 도움말로 웹사이트 오른쪽 하단에 위로 또는 아래로 스크롤 버튼을 추가하는 방법을 설명합니다. 교육자료 아래의 다운로드 링크에 접속 후 Basic_Up_Down_Button ver 2.0.zip 클릭해 파일을 내려받아 주세요. 압축 프로그램을 사용해 압축을 풀어야 사용할 수 있습니다. 버튼 이미지(PNG)는 있는 그대로 사용해도 되면세상품을 판매할 예정입니다. 어떻게 설정하나요? (과세상품, 면세상품)
캠페이너스 상품 등록 과정은 기본값으로 과세상품을 기준으로 설정되어 있습니다. 만약 판매자가 면세상품을 취급하는 경우 다음 지침에 따라 세금 포함 설정을 해제하여, 면세상품으로 설정할 수 있습니다. 참고 : 배송비의 경우 부가가치세법 제14조와 제26조에 의거하여, 각 상품의 과세/면세여부에 따라 배송비도 함께 과세/면세 처리됩니다. 설정방법 1. 내 사이트 관리자 페이지에 접속합니다. 2. 왼쪽 메뉴에서 [쇼핑 > 상품관리]를 클릭해 이동합니다. 3. 과세상품 또는 면세상품으로 설정할 상품명을 클릭합니다. 4. 가격 항목에서 취급하는 상품에 따라 세금 포함을 선택 또는 선택 해제합니다. - 세금 포함 선택 시 : 과세상품 판매 시 선택합니다. 입력한 상품 가격에 부가세 10%가 포함됩니다. 구매자가 결제 시 부가세가 포함되어 결제됩니다. - 세금 포함 선택 해제 시 : 입력한 상품 가격에 부가세가 제외됩니다. 곡물, 과실, 채소, 육류, 생선과 같은 가공되지 않은 식료품 및 도서나메뉴리스트 위젯을 활용하여 페이지 일부분만 변경하기
시작에 앞서 페이지의 일부분만 하위(서브)메뉴에 따라 변경되도록 사용해야할 경우가 있을 수 있습니다. 이를 위해 메뉴리스트 위젯을 활용하는 방법을 알아보겠습니다. 기능 미리보기 1) 메뉴리스트 이용 예시 보기에 접속하여, 페이지 가운데에 있는 [해석], [권한], [의무] 버튼을 눌러보세요. 2) 페이지 디자인의 대부분은 그대로 있고, [해석], [권한], [의무]의 내용만 바뀌는 것을 확인할 수 있습니다. 하위메뉴에 메뉴리스트 위젯을 활용할 수 있도록 제작방법을 순서대로 알아보겠습니다. 1. 하위메뉴 만들기 - 상위메뉴를 만들고 메뉴 복제를 이용하여 똑같은 디자인의 하위메뉴들을 만듭니다. - 메뉴를 드래그하여 하위메뉴 위치로 옮깁니다. 하위 메뉴 만드는 방법 자세히 알아보기 - 이 때 상위메뉴를 선택하면 하위메뉴가 바로 나타나도록 상위메뉴 설정에서 '접근 시 첫 번째 하위메뉴로 이동'을 선택합니다. 방법 : 디자인 모드 > (왼쪽 윗부분) 삼선 아이콘 클릭 > 상위메뉴 오른쪽 i스마트 단축 URL '매직링크' 사용법
캠페이너스 캠페이너, 프로 요금제(크리에이터 제외)를 사용 중이라면 스마트 단축 URL '매직링크'를 관리자 모드에서 무료로 사용할 수 있습니다. '매직링크'를 활용하면 간결한 단축 URL을 만들 수 있고, 페이스북이나 카카오톡 등 소셜미디어에 공유할 때 나타나는 썸네일을 원하는 이미지로 바꿀 수 있고, 링크를 몇 명이 클릭했고 몇 명이 후원・구매로 이어졌는지 구글 애널리틱스가 자동으로 분석해서 '오늘의리포트'가 알려줄 거에요. '오늘의리포트' 자세히 알아보기 > 매직 링크는 어떻게 쓰나요? 1. 관리자 메뉴 왼쪽 메뉴바에서 '매직 링크' 메뉴를 클릭합니다. 2. 단축하고자 하는 사이트의 URL 입력하고, '단축에 사용할 도메인'을 선택합니다. 3. (선택) 페이스북이나 카카오톡 등 소셜미디어에 공유할 때 나타나는 썸네일 이미지로 사용할 이미지를 권장 이미지 규격(1200 x 630px)에 맞춰 업로드 합니다. 4. (권장) '클릭수 및 유입경로 분석 기능'을 체크박스를 선택하고,PG사 심사가 지연되고 있어요
캠페이너스 스토어 요금제부터는 전자결제(PG) 및 간편결제를 이용하실 수 있습니다. 그런데 혹시 PG사 심사가 지연되고 있나요? 많이 답답하셨을 것 같습니다. 통상적으로 PG 심사가 지연될 경우 PG사에서 지연 사유를 안내드리고자 전화연락을 드립니다. 혹시 PG사에서 온 연락을 받지 못하신 것은 아닐지 확인부탁드립니다. 심사 중 상태임에도 불구하고 연락을 받지 못하셨다면 PG사 측에서 원인 확인이 가능합니다. 아래의 번호로 문의하실 수 있습니다. - 이니시스 : 02-3430-5858 - KCP : 02-1544-8662 - 나이스페이 : 02-1661-7335 참고 - 매달 PG사 프로모션으로 캠페이너스 1년 결제시 가입비 면제를 받을 수 있는 PG사를 안내하고 있으니 캠페이너스 내 다음 페이지를 참고부탁드립니다. + 캠페이너스 스토어 요금제의 매달 PG사 프로모션 보기 > https://campaignus.do/price - 동일 사업자등록번호로 이미 사용하고 계신 PG사가 있다특정 섹션으로 이동하도록 링크 연결이 가능한가요? (앵커, Anchor)
방문자가 버튼 또는 링크 클릭 시 페이지 내 특정 섹션으로 이동하도록 설정할 수 있습니다. 모든 섹션마다 고유의 ID를 가지고 있으며, 링크할 주소 끝에 섹션 ID를 입력하는 것으로 설정이 가능합니다. 설정방법 본 도움말에서는 버튼 위젯을 사용합니다. 버튼 위젯 외에도 링크를 삽입할 수 있는 위젯이라면 모두 사용 가능합니다. 1. 디자인 모드에 접속합니다. 2. 왼쪽 상단의 ＋ 아이콘을 클릭합니다. 3. 버튼 위젯을 클릭합니다. 4. 버튼 위젯 위에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다. 5. 컨텍스트 메뉴가 나오면, 버튼 설정을 클릭합니다. 6. 링크 방식을 링크 또는 코드로 선택합니다. 7. 오른쪽 링크 주소 입력란에 /메뉴URL를 입력하고 #섹션ID를 붙여서 입력합니다. 예시: /about#s201910224dc7406405bc4 --- 섹션 ID는 어떻게 알아내나요? 섹션 ID란 각 섹션이 가진 고유 ID를 가리킵니다. 섹션 ID는 섹션 설정에서 확인할 수게시판 공지글 작성 권한을 다른 운영진에게 부여하고 싶어요.
캠페이너스는 사이트는 담당 운영진에게 공지글 작성 권한을 줄 수 있습니다. 1. 먼저 특정 권한을 제공한 운영진 그룹을 만듭니다. - 관리자 모드 > 사용자 관리 > 사용자 목록 > 새 그룹 만들기 클릭! - 운영진 설정 자세히 알아보기 > 2. 그룹 유형은 운영진 그룹을 선택하고 그룹명 및 부여할 세부 권한을 선택합니다. 공지글 작성 권한의 경우 컨텐츠 관리를 클릭하여, 게시판의 보기 권한을 선택합니다. 3. 권한을 부여할 사용자의 그룹부분을 클릭하여, 권한을 부여한 그룹을 선택합니다. - 관리자 모드 > 사용자 관리 > 사용자 목록 > 권한을 부여할 사용자의 그룹부분을 클릭하여 그룹 선택 - 운영진 설정 자세히 알아보기 > 유의사항 운영진 권한을 가진 사용자는 데이터를 변경 및 삭제할 수 있으므로, 신중하게 권한을 부여하시기 바랍니다. 참고사항 1. 게시물의 상단에 공지를 고정시키기 - 디자인 모드 > 게시물 위젯 우클릭 > 게시물 설정 클릭 > 디자인에서 모든 페이지에 공지 고코드 위젯 활용하기
코드 위젯은 고급 사용자를 위한 기능입니다. 외부 모듈 및 사용자 정의 스타일시트 및 스크립트 등을 캠페이너스 사이트에 삽입하고 싶을 때 사용할 수 있습니다. 시작에 앞서 - HTML, JavaScript, CSS 등 클라이언트 사이드 언어만 지원합니다. - 캠페이너스는 기본적으로 JQuery, Bootstrap 등 JavaScript 및 CSS 파일을 호출하기 때문에 이미 로드한 파일을 중복으로 선언할 필요가 없습니다. - PHP, JSP, ASP 등 서버 사이드 언어는 지원하지 않습니다. - 코드 위젯으로 사용자가 추가한 코드에 관해 캠페이너스는 기술 및 고객지원을 하지 않습니다. - 기본 위젯에 영향을 주는 코드는 캠페이너스 업데이트 이후 정상적으로 작동하지 않을 수 있습니다. - 코드의 오작동을 막기 위해 실제 사이트에는 주석이 제거된 상태로 저장됩니다. 코드 작성하기 1. 디자인 모드에 접속합니다. 2. 왼쪽 상단의 위젯 추가 ＋ 아이콘을 클릭합니다. 3. 코드 위젯을 클릭캠페이너스 고객이라면 '캠페이너스TV' 강의 컨텐츠를 무료로 시청할 수 있습니다
캠페이너스 캠페이너, 프로 요금제(크리에이터 제외)를 사용 중이라면 '캠페이너스TV' 강의 컨텐츠를 관리자 모드에서 무료로 시청할 수 있습니다. 잠재후원자 모금, 데이터 기반 마케팅, 캠페인 사례 등 디지털 전환을 먼저 시도한 조직의 엄선된 강의를 이제 무제한으로 만나보세요. 캠페이너스TV가 무엇인가요? 캠페이너스TV는 온라인 홍보모금의 성장을 돕는 온라인 교육을 수강할 수 있는 서비스입니다. 디지털 모금, 데이터 분석, 온라인 광고 활용 등 캠페이너스TV와 함께 디지털 전환에 도전해보세요. 강의 컨텐츠는 어떻게 볼 수 있나요? 내 사이트 관리자 페이지에 접속해, 왼쪽 메뉴에서 [캠페이너스TV] 메뉴를 클릭해 강의를 제한없이 시청하실 수 있습니다. 신규 강좌가 열려도 혜택이 적용 되나요? 캠페이너스TV에서는 정기적으로 디지털 마케팅, 온라인 모금, 데이터 분석 등의 주제로 신규 강좌가 열릴 예정입니다. 캠페이너스TV에서 신규 강의가 열릴 시 동일하게 할인 혜택이 적용됩니다. 단, 일팝업 추가하기
캠페이너스에서는 팝업/배너를 직접 만들 수 있어요. 영상을 통해 팝업/배너 만드는 방법을 알려드릴게요. 사이트에 팝업을 구현할 경우 팝업의 형태, 크기, 노출할 페이지, 기간, 대상, 기기까지 다양한 옵션을 지원합니다. 중요 : 여러 개의 팝업 노출은 방문자의 사이트 이용에 방해가 될 수 있으므로 꼭 필요한 만큼 추가하실 것을 권장합니다. 팝업 추가방법 1. 내 사이트 관리자 페이지에 접속합니다. 2. 왼쪽 메뉴에서 [환경설정 > 팝업/배너 관리]를 클릭합니다. 3. 팝업 추가 버튼을 클릭합니다. 4. 팝업을 설정합니다. 자세한 설정 옵션은 아래 추가 도움말을 참고해 주세요. 5. 저장 버튼을 클릭합니다. 6. 팝업/배너 관리 페이지 오른쪽 상단의 사이트 확인하기 버튼을 클릭해 정상적으로 표시되는지 확인합니다. 팝업 설정 옵션 - 제목 : 관리자용 팝업 배너 제목을 입력합니다. 회원에겐 표시되지 않습니다. - 기간 : 팝업이 노출되는 기간을 설정합니다. - 대상 기기 : 팝업이 노출익스플로러에서 디자인(이미지)이 깨져요.
익스플로러는 실제로 많은 사용자들에게 보편화 되어있지만 실제로는 호환성이 매우 떨어지는 브라우저이기 때문에 익스플로러보다는 크롬을 많이 이용하는 추세입니다. 그렇기에 캠페이너스 디자인 모드는 익스플로러로 접속할 수 없도록 접근을 막고 있으나 실제 사이트에 접속하는 다수의 회원들까지도 크롬을 권장해드릴 수는 없는 부분입니다. 하지만, 익스플로러가 호환성이 낮다고 해서 캠페이너스 사이트 접속 자체에 문제가 있는 것은 아닙니다. 단, 최신 버전이 아닌 익스플로러의 경우(특히 IE 9버전 이하) 호환성이 매우 떨어지기 때문에 오류나 이미지깨짐 등의 문제가 발생할 수 있으니 익스플로러로 사이트에 접속할때에는 최신 버전으로 업그레이드 후 사용을 권장드립니다.텍스트 위젯을 사용한 카드 디자인
언제 사용하면 좋을까요? - 배경 이미지 가운데 글자 작성하고자 할 때 - 카드 디자인을 색다르게 하고 싶을 때 활용 예시 - 제작 방법 - 텍스트 위젯을 만든다 - 텍스트 위젯 설정에서 높이를 500px 정도로 조정 - 내부 좌우 상하 여백을 30px 정도로 조정 - 테두리를 실선을 지정 - 적절한 배경이미지를 설정 - 가운데 원하는 텍스트나 버튼을 설정하고 디자인 완료유튜브와 비메오 동영상이 재생되지 않아요.
YouTube(유튜브) 또는 Vimeo(비메오)에 올린 동영상을 내 사이트에 삽입했는데 재생되지 않는다면 그 원인은 일반적으로 동영상 공개상태가 비공개로 설정되어 있기 때문입니다. 이 도움말에서는 YouTube와 Vimeo에 올린 동영상이 내 사이트에서 재생되도록 공개상태를 변경하는 방법을 설명합니다. YouTube 공개 상태 설정방법 1단계: 공개 상태 변경하기 YouTube에 올린 동영상의 공개 상태가 비공개로 설정된 경우 소유자만 동영상을 재생할 수 있습니다. 이 도움말에서는 내 사이트에 삽입한 동영상을 누구나 볼 수 있도록 YouTube 동영상의 공개 상태를 변경하는 방법을 설명합니다. 1. YouTube 스튜디오에 접속 후 로그인합니다. 2. 왼쪽 메뉴에서 콘텐츠를 클릭합니다. 3. 업데이트하려는 동영상을 클릭합니다. 4. 공개 상태를 클릭해 공개 또는 일부 공개로 변경합니다. 중요 : 공개로 설정한 경우, YouTube에서 내 동영상을 검색할 수 있습니다. 일부 공개로 설FTP 접속을 지원하나요?
캠페이너스는 FTP 방식을 지원하지 않습니다. 대량의 파일을 올리거나, 올린 파일들을 관리할 때 FTP가 필요할 수 있지만, 캠페이너스의 경우 몇 가지 이유로 FTP를 제공하지 않고 있습니다. 왜 지원하지 않나요? 타사 솔루션들은 웹호스팅 방식의 독립된 공간과 분리된 소스코드로 동작하는 반면, 캠페이너스는 중앙 집중식으로 관리하고 있습니다. 즉, 사이트별로 동일한 소스코드를 사용하여 동일한 기능이 동작되는 셈입니다. FTP를 지원하지 않는 대신 캠페이너스의 업데이트 사항이 사이트별로 자동으로 반영되어, 관리자들이 별도의 조치를 하지 않아도 항상 최신의 상태를 유지할 수 있도록 합니다. 단, 사이트별로 나뉘어진 영역이 존재하지 않기에 FTP를 제공하기 어려운 측면이 있습니다. 대안은 무엇인가요? 대량의 파일 업로드가 필요한 상황은 주로 상품 이미지 등록이나, 타사에서 사용하던 게시물에 연결된 첨부 파일(이미지)이 대부분일 것이며 아래와 같은 대안을 제공하고 있습니다. 1. 상품 이미지네이버 지도가 제대로 표시되지 않아요. (네이버 지도 API)
네이버 지도 API 설정을 완료하였지만, 내 사이트 또는 디자인 모드에서 네이버 지도가 정상 출력되지 않는다면 지도 API 설정 과정에서 Web 서비스 URL을 등록하지 않았거나, 잘못 입력한 경우 발생할 수 있습니다. 네이버 지도 API는 네이버 개발자 센터에 등록한 URL에 한해 동작하기 때문입니다. 예를 들어, http://mysite.com 만 등록한 경우, 같은 사이트라 하더라도 다른 도메인인 https://mysite.campaignus.me사이트에서는 표시되지 않습니다. 따라서 네이버 클라우드 플랫폼에 접속해 모든 Web 서비스 URL을 추가하는 작업이 필요합니다. Web 서비스 URL 추가방법 1. 네이버 클라우드 플랫폼에 접속합니다. 2. 오른쪽 상단의 Console 을 클릭합니다. 3. 왼쪽 메뉴에서 [AI, NAVER API > Application]를 클릭하고, 등록한 지도 App의 변경 버튼을 클릭합니다. 4. 하단의 서비스 환경 등록에서 내 사이트의 모든 도트래픽을 줄이려면 어떻게 해야 하나요?
트래픽이란 서버의 데이터 전송량을 말합니다. 트래픽은 방문자 숫자 및 방문자가 소비하는 콘텐츠의 양이 많을 수록 증가하게 됩니다. 캠페이너스 서비스를 이용하면서 트래픽을 줄이는 가장 확실한 방법은 이미지 용량을 줄이는 것입니다. 이미지 크기 및 용량 최적화하기 디자인 모드에서 이미지 삽입 시, 이미지 용량을 최적화하여 사용합니다. 일평균 방문자 수가 많지 않지만 트래픽은 높은 이유는 일반적으로 원본 이미지를 있는 그대로 사용하기 때문인 경우가 많습니다. 다음 사항들을 참고해 이미지를 최적화 시켜주세요. 1. 이미지 포맷은 PNG, JPG, GIF를 사용합니다. 2. 이미지 원본을 그대로 사용하지 않고, 포토샵, Pixlr(무료), GIMP(무료) 등 그래픽 소프트웨어를 사용해 크기를 적절하게 줄여 사용합니다. 3. 사진 이미지의 경우 JPG 포맷에, 퀄리티는 60~80% 수준으로 저장해 사용합니다. 4. 무료로 제공되는 온라인 이미지 최적화 도구를 사용합니다. (Mac 사용자라면 I상단 배너 추가하기
웹사이트 상단에 디스플레이 배너를 표시할 수 있습니다. 이 도움말에서는 기본적인 형태의 상단 배너를 제작하는 방법에 대해 알아봅니다. 1단계: 상단 배너 이미지 만들기 상단 배너에 추가할 배너 이미지를 준비합니다. 배너 이미지가 이미 준비된 경우 이 단계는 건너뜁니다. 1. 가로 길이는 1280px, 1440px, 1920px, 2560px 정도로 설정하고, 세로는 자유입니다. (참고: 사실 정해진 크기는 없습니다. 사이트의 본문폭 및 콘셉트에 따라 자유롭게 지정해 주세요.) 2. 배너 이미지 제작을 완료하면, 웹용 이미지로 저장합니다. (파일 형식: JPG, JPEG, PNG) 3. 아래 샘플을 참고 부탁드립니다. 2단계: 상단 배너 설정하기 데스크톱(PC) 전용 상단 배너를 설정합니다. 1. 내 사이트 관리자 페이지에 접속합니다. 2. 왼쪽 메뉴에서 [환경설정 > 팝업/배너 관리]를 클릭합니다. 3. 오른쪽 상단의 팝업 추가 버튼을 클릭합니다. 4. 팝업 옵션을 설정합니다. -안드로이드 앱 네이티브 로그인 사용 설정하기 (구글 로그인)
내 Android(안드로이드) 앱 설치자가 로그인을 시도할 때 Google 앱을 통해 로그인 할 수 있도록 허용하려면 Android 네이티브 로그인 사용을 설정해야 합니다. Android 네이티브 로그인 사용 설정을 완료하면 Google 앱에 저장된 사용자의 계정 정보로 더 빠른 로그인이 가능해집니다. 이 도움말에서는 앱 설치자가 Google 앱을 이용해 내 Android 앱에 로그인할 수 있도록 Android 네이티브 로그인 사용을 설정하는 방법을 단계별로 안내합니다. 참고 : 캠페이너스 사용자가 Android 네이티브 로그인 사용을 설정하지 않았거나, 내 Android 앱 설치자의 모바일 기기에 Google 앱이 설치 되어 있지 않으면 웹 기반으로 로그인을 시도하게 됩니다. (브라우저에서 Google 계정 정보를 입력해 로그인) 시작에 앞서 이 도움말을 수행하기 위해선 아래와 같은 작업이 선행되어야 합니다. - Google 소셜 로그인 설정이 완료 되어 있어야 합니다. - 캠페이페이스북 도메인인증
애플의 iOS 14 릴리즈로 인해 페이스북 픽셀이 전환 이벤트를 수신하고 처리하는 데에 영향을 받게 되어, 페이스북은 이에 대응하기 위해 몇 가지 조치를 권장하고 있습니다. 도메인 인증은 그 중 하나이며, 인증 후에는 페이스북의 ‘취합된 이벤트 측정’을 사용해 이벤트를 수집할 수 있습니다. 페이스북 도메인 3가지 인증 방법 중 캠페이너스 관리자 페이지에서 간단하게 할 수 있는 메타 태그 인증 방식을 참고 부탁드립니다. 1. [페이스북 비즈니스] - [비즈니스 설정]으로 이동합니다. 페이스북 비즈니스 홈 좌측하단의 ‘비즈니스 설정’으로 이동 2. 왼쪽 목록 중 [브랜드 가치 보호] - [도메인]으로 이동합니다. 페이스북 도메인 인증탭 선택 3. [추가]를 누르고 나타나는 창에 도메인을 입력한 후 [도메인 추가]를 누르세요. 저는 제 도메인 “hard-carry.com”으로 인증해보겠습니다. 4. 도메인이 리스트에 추가된 것을 확인하고, 도메인 인증 방법 세 가지 중 [메타 태그 인증]구글 로그인 설정하기
중요: 같은 이름(닉네임)으로 중복 가입 방지 옵션을 해제해 주세요. 소셜 로그인 가입자는 대부분 가입된 플랫폼의 이름(닉네임)을 그대로 사용하는 경향이 있으며, 소셜 로그인 플랫폼에서는 동일 이름(닉네임) 사용이 허용하기에, 해당 옵션을 해제해 주셔야 원활한 가입이 진행됩니다. 같은 이름(닉네임)으로 중복 가입 방지 또는 해제하기 이 도움말에서는 방문자가 Google 계정으로 간편하게 내 사이트에 가입하고 로그인 할 수 있도록 설정하는 과정을 설명합니다. 시작에 앞서 이 도움말을 진행하려면 Google 계정이 필요합니다. 아직 Google 계정이 없다면 아래 링크를 통해, 계정 만들기를 클릭하여 새로운 계정을 생성해 주세요. Google 계정 만들기 설정방법 구글 소셜 로그인을 적용하려면 아래의 단계별 방법에 따라 설정합니다. 중요 : 구글 로그인을 사용하기 위해서는 구글의 정책에 따라 도메인에 SSL 보안서버 인증서가 설치되어 있어야 합니다. SSL이 설치되지 않은 사이트는 앱을스티비 HTML 코드를 게시판에 붙여넣으면 깨져요
메일발송 서비스 '스티비'로 작성한 이메일을 캠페이너스 사이트에서 만든 게시판에 게시물로 올리고 싶다면 스티비에서 HTML 코드를 복사하여 캠페이너스에 게시할 수 있습니다. 다만 코드를 복사할때 웹게시용으로 복사하여 사용하여 주세요. 이메일 발송용을 사용할 경우 정상적으로 표시되지 않을 수 있습니다.네이버톡톡 설정하기
네이버 톡톡이란? PC, 모바일 어디서나 친구 추가 없이 고객과 실시간으로 상담을 할 수 있습니다. 네이버 앱이나 SMS를 통해 모바일로도 알림을 받을 수 있습니다. 1단계: 네이버 톡톡 사용신청 1. 네이버 톡톡 파트너센터에 접속 후 네이버 계정으로 로그인합니다. 2. 서비스 약관에 동의하고 가입을 진행합니다. 3. 아래와 같이 가입이 완료되면 톡톡 계정 만들기를 클릭합니다. 4. 서비스 연결하기는 차후에 설정하셔도 됩니다. 서비스 연결 나중에 하기 버튼을 클릭합니다. 5. 계정 대표 정보를 입력합니다. 본인이 해당하는 계정의 유형을 선택하여 진행합니다. 6. 대표 이미지, 프로필명, 휴대폰번호(인증과정 필요) 등을 입력합니다. 네이버측에서 검수하기 때문에 허위정보를 기재할 경우 심사에 탈락할 수 있으니 주의가 필요합니다. 7. 사용신청 버튼을 클릭하면 네이버톡톡 파트너앱을 설치하라는 내용이 나타납니다. 추후 네이버 톡톡 관리를 위해 설치하시는 것을 권장합니다. 8. 제출 버튼을[코드활용팁] 게시판에도 코드를 적용할 수 있나요?
캠페이너스는 게시판에도 일부의 코드를 추가하여 이용하실 수 있습니다. 설정방법 - 디자인 모드 > 게시판 위젯 우클릭 > 게시판 설정 선택 > 글양식 에디터 툴 바 내 </> 클릭 또는 게시물 본문 상단 코드 또는 게시물 본문 하단 코드 사용함 선택 후 코드 삽입 다만 다음과 같은 태그들은 이용하실 수 없으니 확인부탁드립니다. - 게시판에 쓸 수 없는 태그(코드)들 - alert, applet, basefont, base, behavior, bgsound, body, expression, form, frameset, frame, head, html, ilayer, input, isindex, layer, link, meta, plaintext, script, textarea, title, xml, xss - 쓸 수 없는 이유 - 사용자가 게시판에 게시물 작성 시 보안 이슈가 생기는 것을 방지하기 위해, 사이트 보안에 영향을 줄 수 있는 태그는 작성 시 태그를 해제하고 있음 - 쓸 수[코드활용팁] 사이트에 공통으로 CSS, javascript를 삽입하고 싶어요.
캠페이너스는 기본적으로 코딩을 몰라도 적절한 사이트 구성을 할 수 있도록 합니다. 하지만 캠페이너스에서 제공하지 않는 레이아웃이나 기능구현을 위해서는 코드를 사용해야 할 상황도 있습니다. 코드를 삽입할 때 디자인모드의 코드 위젯은 페이지마다 삽입해야 하는 불편함이 있습니다. 또한 수정사항이 발생하면 삽입한 모든 코드위젯을 수정해야 할 필요가 있습니다. 따라서 페이지마다 필요한 코드위젯에는 최소한의 코드로 HTML 정도만 선언하시는 것이 좋으며, 공통으로 사용할 CSS나 JavaScript는 공통으로 호출하는 부분에 삽입하는 것이 좋습니다. 내 사이트에 공통으로 코드 적용하기 1. 내 사이트의 관리자 모드에 접속합니다. 2. 환경설정의 SEO, 해더설정을 누릅니다. 3. Header 부분에 공통으로 삽입될 CSS나 JavaScript를 삽입합니다. (필요에 따라 Footer에 삽입하셔도 됩니다.) 4. 사이트에 적용하기 위해 저장 버튼을 누릅니다. 참고사항 - Header Code 에이미지에 움직이는 GIF를 넣고 싶어요 (애니메이션 GIF)
GIF 이미지는 프레임 애니메이션으로 표현할 수 있기 때문에 인터넷에서 널리 사용되는 이미지 형식 중 하나입니다. 캠페이너스에서도 페이지를 꾸미거나 상품 이미지를 올릴 때 GIF 이미지를 사용할 수 있습니다. 그러나 GIF 파일의 용량이 지나치게 높다면, 시스템이 빠른 페이지 로딩을 위해 GIF 애니메이션 동작을 강제로 제한할 수 있습니다. 만약 GIF를 사용할 예정이라면 파일 용량을 3MB (해상도 750px X 750px 이하로 권장) 이하로 저장해 사용해 주세요. 중요: 3MB 이상의 GIF 이미지는 PC 버전에서 정상적으로 애니메이션이 동작해도 모바일에서는 제한될 수 있습니다. 주의사항 - 움직이는 GIF는 일반적으로 용량이 크기 때문에 상품 목록 등에서 여러 GIF 이미지가 동시에 표현될 경우 방문자의 사이트 로드 속도에 악영향을 줄 수 있습니다. - 네이버 쇼핑 등 외부 서비스와 연동시 움직이는 GIF는 해당 서비스 정책에 위반될 수 있습니다. - 과도한 애니메이션 효과는타사에서 제작한 사이트를 캠페이너스로 이전하기 (사이트 이전)
타사에서 제작한 사이트 캠페이너스로 이전하는 경우, 아래의 6단계 과정을 따르면 더 원활한 데이터 이전이 가능합니다. 1단계: 사이트 개설 및 디자인하기 캠페이너스로 사이트를 개설하고, 최소한의 디자인을 완료합니다. 2단계: 기존 사이트 데이터 백업하기 캠페이너스로 이전할 데이터(DB)를 기존 사이트의 웹마스터 또는 고객센터에 문의하여 엑셀 형식(.xlsx, .csv)으로 백업합니다. 백업받은 데이터는 캠페이너스 일괄 추가 기능을 사용해 업로드할 수 있습니다. 일괄 추가 가능한 데이터의 종류는 다음과 같습니다. - 회원 데이터 - 게시판별 게시물 데이터 - 상품 데이터 - 구매평 데이터 기존 사이트의 데이터를 백업받는 방법은 사이트 및 업체마다 상이합니다. 기존 사이트의 웹마스터 또는 고객센터에 문의해 주세요. 3단계: 이전할 데이터 편집하기 위 2단계에서 내려받은 데이터를 캠페이너스에 맞게 편집합니다. 항목별로 샘플 엑셀 파일을 다운로드할 수 있습니다. 샘플 엑셀 파일과 기존 데이호환되는 브라우저 및 운영체제
캠페이너스는 특정 브라우저 및 운영체제에 최적화 되어있습니다. 모든 브라우저에서 캠페이너스의 모든 기능이 작동되는 것은 아닙니다. 중요 : Microsoft 인터넷 익스플로러(IE, Internet Explorer)는 호환성 문제로 웹사이트 제작 중 오류가 발생하는 경우가 많으므로 다른 브라우저를 사용하실 것을 권장해 드립니다. 디자인 모드 - Google Chrome (Windows, Linux, Mac OSX) - Mozilla Firefox 3.6+ (Windows, Linux, Mac OSX 10.4+) - Safari 4+ (Mac OSX) 관리자페이지(환경설정) - Google Chrome (Windows, Linux, Mac OSX) - Mozilla Firefox 3.6+ (Windows, Linux, Mac OSX 10.4+) - Safari 4+ (Mac OSX) - Microsoft Edge (Windows, Mac OS X) 캠페이너스로 제작한 사이트 - Goo욕설이나 비방글/댓글을 차단할 수 있나요?
욕설이나 비방글 자동차단기능은 지원하고 있지 않습니다. 욕설 필터 등에 대해서는 정량화된 데이터베이스가 없기 때문에 개발이 다소 어렵습니다. 자동차단기능은 없지만, 사용자들로부터 신고접수를 받는 기능은 제공하고 있습니다. 신고기능 사용 방법 - 관리자 모드 > 컨텐츠 관리 > 신고 관리 > 신고기능 사용 체크하시면, 게시물 등에서 삭제 버튼 옆에 신고 버튼이 활성화됩니다. - 신고가 접수되면 신고 관리 페이지에 해당 컨텐츠가 표시됩니다. 접수된 사항에 따라 운영자는 컨텐츠를 삭제할 수도 있습니다. 참고로 관리자가 작성한 게시물이나 댓글엔 신고할 수 없으며, 비회원은 신고 기능을 사용할 수 없습니다. iOS 앱을 이용하시면서 게시판이나 댓글 기능을 사용시 신고 기능을 사용하지 않으면 심사 거절 사유가 될 수 있습니다.이미지카카오톡 채널 1:1 채팅 상담 버튼 이미지 (PSD, PNG)
카카오톡 채널 상담 이미지 버튼으로 사용할 수 있습니다. 파일정보 - 파일 이름: Button_KakaoTalkChat_88.zip - 파일 크기 및 형식: 8KB, PNG / 19KB, ZIP 압축 - 파일 구성: PSD, PNG 사용방법 아래 이미지에 마우스 오른쪽 버튼을 클릭해 내려받거나, 첨부파일을 내려받아 사용하세요. 참고: PSD 파일은 Adobe 포토샵 전용 파일입니다. - Button_KakaoTalkChat.zip 24KB - Code-Kakao-chat-button.txt 1KB[코드활용팁] 모바일에서 게시판 글쓰기 버튼을 한 개만 나타나도록 하기
모바일 게시판에서는 게시글이 있을 때 글쓰기 버튼이 게시물의 위, 아래로 두 개가 나타납니다. 이는 게시글 목록이 길어질 경우를 대비하여 제공됩니다. 하지만 경우에 따라 두 개의 글쓰기 버튼이 불필요할 수 있습니다. 이 경우에 다음 코드를 활용하실 수 있습니다. 설정방법 관리자 모드 > 환경설정 > SEO, 해더설정 > 공통 코드 삽입 > Header Code에 다음 코드를 삽입해 주시면 해당 버튼을 숨김처리 하실 수 있습니다. <!-- 모바일에 나타나는 글쓰기 버튼 2개 중 하나 제거하기 --> <style> .board-head .btn-write { display: none; } </style>캐시와 쿠키 삭제하기
내가 방문한 웹사이트에서 만든 파일인 쿠키와 페이지 로드를 빠르게 해 주는 브라우저 캐시가 있으면 인터넷 사용이 편리해 집니다. 브라우저 캐시 및 쿠키를 삭제하면 사용자 이름, 비밀번호 등 웹사이트 설정이 삭제됩니다. 또한 이미지를 모두 다시 로드해야 하기 때문에 어떤 사이트는 조금 느려진 것 처럼 보일 수 있습니다. 각 브라우저별로 다음과 같은 방법을 통해 쿠키 및 캐시를 삭제할 수 있습니다. - Google Chrome - Windows Internet Explorer - Mozilla Firefox - Apple Safari - Opera 모바일 캐시 삭제 - iOS 모바일 크롬 캐시삭제 [링크] - iOS 모바일 사파리 캐시 삭제 [링크] - Android 모바일 크롬 캐시 삭제 [링크] 또한, 사이트 내 로드 속도 향상을 위해 컨텐츠의 용량을 최소화 하거나, 한 페이지에 적용이 되어있는 컨텐츠의 양을 줄이는 방법을 사용해 보시는 것도 권장드립니다. 관련 내용은 아래 가이드를대량 게시물 업로드 방법 (일괄추가)
게시판에 게시물을 대량으로 추가할 수 있습니다. 기존 사이트에서 게시판 데이터 이전 시 사용할 수 있습니다. 추가방법 1단계: 샘플 파일 다운로드 1. 관리자 모드에 접속합니다. 2. 왼쪽 메뉴에서 [컨텐츠 관리 > 게시물 관리]를 클릭해 이동합니다. 3. 게시물 목록에서 일괄 추가할 게시판을 선택합니다. 참고: 디자인 모드에서 추가한 게시판 위젯 개수에 따라 게시판 목록은 달라집니다. 4. 오른쪽 상단의 가져오기 버튼을 클릭합니다. 5. 다운로드를 클릭해 양식(파일명 : board_sample.xlsx)을 내려 받습니다. 2단계: 샘플 게시물 파일 수정하기 샘플 엑셀 파일 내 주석을 참고해 샘플 게시물 파일을 수정합니다. 1. 다운로드한 파일(파일명: board_sample.xlsx)을 클릭해 엽니다. 2. 엑셀 파일 내 설명에 맞춰 게시물 내용을 수정합니다. 제목, 내용, 작성자, 작성시각은 필수 항목입니다. 참고: 카테고리ID는 디자인 모드 내 게시판에 카테고리 사용 시 입력합카카오톡 채널 커스텀 채팅 버튼 추가하기 (코드, 고급)
내 사이트에 카카오톡 채널 1:1 채팅 버튼(구.플러스친구)을 추가할 수 있습니다. 이 도움말에서는 사용자가 직접 디자인한 버튼 이미지를 사용해 카카오톡 채널 채팅 버튼을 추가하는 방법을 설명합니다. 참고 : 카카오에서 공식 제공하는 채팅 버튼 이미지를 사용하려는 경우, 카카오톡 채널 1:1 채팅 버튼 추가하기 도움말을 확인해 주세요. 교육자료 다운로드 샘플 카카오톡 채널 버튼 이미지를 내려받을 수 있습니다. 내려받은 파일은 압축을 풀어 이용해 주세요. - 파일크기 및 형식 : 20KB, ZIP 압축 - Button_KakaoTalkChat.zip 24KB - Code-Kakao-chat-button.txt 1KB - 파일 구성 : PSD, PNG 1단계: 카카오 API키 발급 및 적용하기 카카오톡 채널 채팅 버튼을 사용하려면, 카카오 API키가 필요합니다. 아래 도움말 링크를 참고해 카카오 API키를 발급받고 사이트에 적용해 주세요. 카카오 API키 발급 및 적용방법 참고 : 기존파비콘 (패비콘)
파비콘은 웹브라우저의 주소창이나 즐겨찾기 등에 표시되는 아이콘입니다. 패비콘으로 불리기도 합니다. 브라우저나 운영체제별로 지원하는 파비콘의 종류가 상이합니다만 ico 형식이 대부분의 브라우저에서 잘 나타납니다. 이미지 파일을 ico 형식으로 변환해 주는 사이트도 있습니다. 캠페이너스에서는 모던 브라우저 및 모바일 기기를 위한 PNG 파비콘과 Internet Explorer 이전 버전을 위한 ICO 형식 모두를 지원하고 있습니다. 모든 환경에서 파비콘을 표현하고 싶다면 PNG 및 ICO 형식을 모두 업로드 해주셔야 합니다. 파비콘 설정방법 1. 캠페이너스에 로그인하여 관리자 모드로 이동합니다. 2. 환경설정 > 기본설정 메뉴를 클릭합니다. 3. 패비콘 항목에서 미리 만들어둔 파비콘 파일을 업로드 합니다. 4. 변경사항 저장 버튼을 눌러 완료합니다. 브라우저별 파비콘 형식 지원 상황 브라우저 ico png gif jpg Internet Explorer 5.0 11.0 11.0 미지원 G실수로 지웠는데, 사이트 백업이나 복원은 어떻게 하나요?
캠페이너스는 자체 시스템에 의해 대부분의 정보를 일정 시간 간격으로 보존하고 있습니다. 이는 캠페이너스 시스템 차원에서 발생하는 문제 등 만일의 사태를 대비한 것이지만, 모든 사용자들에게 백업 및 복원 기능을 제공하진 않고 있습니다. 아래와 같이 제한된 영역에서만 제한된 사항의 백업 및 복원이 가능합니다. 따라서 실수에 의해 삭제된 데이터는 복원이 불가할 수 있으니 관리자 계정과 운영진 설정, 그리고 조심스러운 관리가 필요합니다. 캠페이너스는 추후 사용자들께서 데이터를 더욱 안전하게 관리하고 보존할 수 있도록 기능을 개선할 예정입니다. 디자인 모드 백업 및 복원 - 디자인 모드는 마지막으로 게시한 시점으로만 복원이 가능합니다. 현재 게시완료된 상태라면 이전 단계로 복원은 불가합니다. - 디자인 모드에서 게시판, 지도 게시판, 입력폼, 쇼핑 위젯을 삭제하더라도 실제 데이터(게시물, 응답, 상품 등)는 사라지지 않습니다. 컨텐츠 관리 및 쇼핑 > 상품 관리 등에서 확인 가능하며, 언제든입력폼 버튼 크기 변경하기 (코드)
코드 위젯을 사용하면 입력폼의 버튼 및 버튼 텍스트의 크기를 변경할 수 있습니다. 설정방법 1. 디자인 모드에 접속합니다. 2. 입력폼 위젯을 추가한 메뉴로 이동합니다. 3. 왼쪽 상단의 위젯 추가 ＋ 아이콘을 클릭하고, 코드 위젯을 클릭합니다. 4. 코드 위젯을 마우스로 클릭 후 드래그하여 적당한 위치로 이동시킵니다. 참고: 코드 위젯은 실제 웹사이트에서는 노출되지 않습니다. 차후 코드 관리를 위해 관련된 위젯 근처에 배치해 주시길 바랍니다. 5. 코드 위젯에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다. 6. 컨텍스트 메뉴가 나오면 코드 설정을 클릭합니다. 7. 코드 설정 빈 칸에 아래의 코드를 복사해 붙여넣습니다. <style> /* 입력폼 버튼 및 텍스트 크기 */ #섹션ID div.form .btn-primary { width: 180px !important; /* 버튼 가로 크기 */ height: 64px !important; /* 버튼 세로 크기 */ fo[코드활용팁] 비주얼 섹션 내 버튼의 테두리 선두께를 조절하고 싶어요
비주얼 섹션 내 버튼의 경우 디자인 모드 > 해당 비주얼 섹션 우클릭 > 비주얼 설정 > 디자인에서 설정할 수 있습니다. 그러나 해당 위치에서 버튼의 테두리 두께 설정 옵션이 없기 때문에 다음과 같은 코드를 삽입하여 해결하실 수 있습니다. - 코드 삽입 위치 : 관리자 모드 > 환경설정 > SEO, 헤더설정 > Header Code에 삽입 - 다음 코드의 5px 부분의 숫자5를 조절하여 원하는 테두리 두께를 설정하실 수 있습니다. <!-- 비주얼 섹션 내 버튼의 테두리 두께 조절하기 --> <style> .visual_section .header-content .text a.btn { border: 5px solid #009ff4 !important; } </style> 관련 도움말 - 비주얼섹션 풀페이지 사용시 배경 이미지의 최적 해상도는?[코드활용팁] 뉴스레터 게시물에 테두리가 나타난다면?
이메일 뉴스레터 글을 가져와 게시물에 붙여넣었는데 테두리가 나타난다면? 일단 이메일 자체가 표로 만들어져 있고, 사용하는 툴마다 기본 스타일(CSS 코드)이 다르기 때문에 게시물에 옮겨와 붙이는 순간 이메일에서는 보이지 않던 테두리가 보일 수 있어요. 이럴 때 간단한 코드를 활용하여 게시물들의 테두리가 나타나지 않도록 이용하실 수 있습니다. 참고 : 도움말에서 제공하는 소스 코드를 사용자가 임의로 변경한 부분에 대해 기술 및 고객지원은 불가합니다. 유의사항 : 다음에 안내드릴 코드는 게시물 영역 안에 있는 모든 표의 테두리를 없애는 코드입니다. 뉴스레터 표만 테두리를 없애도록 적용할 수 는 없는 점 양해부탁드립니다. 설정방법 1. 디자인 모드 > 해당 게시판이 있는 메뉴(페이지) 열기 > 게시판 위젯 우클릭 > 게시판 설정 > 게시물 본문 상단 코드 (오른쪽) 사용함 체크박스 클릭합니다. 그러면 다음 그림과 같은 코드를 넣을 영역이 생깁니다. 2. 다음의 상자 안 코드를 드래그 하여[코드활용팁] 게시판 카테고리와 제목 사이 줄바꿈을 하고 싶어요
게시판 기본 디자인에 따라 카테고리와 제목 사이에 줄바꿈이 적용되도록 이용하고 싶으실 수 있습니다. 이럴 때 다음 코드를 활용하실 수 있습니다. 다음 코드를 관리자 모드 > 환경설정 > Header Code에 삽입하여 조치하실 수 있습니다. <!-- 게시판 카테고리와 제목 줄바꿈 적용하기--> <style> .type_grid.grid_02 .title em { display: table; } .list-group .icons { display: inline-block; } </style>게시판을 이미지 자료실로 활용하기
게시판을 웹디자인에 사용할 이미지의 자료실로 활용할 수 있습니다. 사용자는 게시물 본문에 이미지를 삽입할 수 있으며, 삽입한 이미지의 주소(URL)를 획득하여 페이지 디자인에 활용할 수 있습니다. 이 도움말에서는 이미지 자료실로 사용할 게시판을 만들고, 게시판 설정 후 이미지 주소를 획득하는 방법까지 안내합니다. 1단계: 게시판 만들기 이미지 자료실로 사용할 새로운 메뉴를 생성하고, 게시판을 추가합니다. 1. 디자인 모드에 접속합니다. 2. 왼쪽 상단의 메뉴 관리 ≡ 아이콘을 클릭합니다. 3. 상단 메뉴 항목의 오른쪽 끝에 위치한 ⊕ 아이콘을 클릭합니다. 4. 메뉴명(예: 이미지 자료실)을 작성하고, 확인 버튼을 클릭합니다. 5. 빈 메뉴가 생성되면 왼쪽 상단의 위젯 추가 ＋ 아이콘을 클릭하고, 게시판 위젯을 클릭합니다. 6. 이미지 자료실로 사용할 게시판이 추가됩니다. 2단계: 게시판 메뉴 숨기기 이미지 자료실 게시판은 방문자에게 보여줄 필요가 없으므로, 게시판 메뉴가 노출되지 않추가 사이트를 개설할 때 기존 사이트 디자인을 복제할 수 있나요?
캠페이너스를 통해 제작한 내 사이트의 디자인을 그대로 복제하여 추가 사이트를 개설할 수 있습니다. 복수의 사이트 제작이 필요한 경우 한 사이트의 디자인을 먼저 완료한 후, 추가 사이트는 디자인 복제를 통해 개설 후 수정하면 디자인 작업의 중복을 피할 수 있어 편리합니다. 신청 방법 복제 개설을 원할 경우, 새 사이트 개설을 신청할 때 고객센터 문의하기를 통해 복제할 사이트를 알려주시면 지원해드립니다. 참고 사이트 복제는 디자인만 복제되며, 각종 환경설정과 DB(사용자, 게시물, 입력폼 등) 요소는 복제되지 않습니다. DB 요소 복제를 원할 경우 기존 사이트에서 엑셀 다운로드 후 새 사이트에 직접 업로드 하는 방법으로 이전이 가능합니다. DB 엑셀 다운로드 방법 관련 도움말 - 사이트에 등록된 게시물을 엑셀(CSV)로 받고 싶어요.[보안]캠페이너스는 외부의 공격으로부터 안전합니다.
캠페이너스는 아마존웹서비스(AWS)의 웹애플리케이션방화벽(WAF) 및 DB 종류는 Amazon Aurora를 활용한 보안 시스템을 구축, 운영하고 있으며, 다양한 공격에 대응해오며 축적한 안정적인 운영 노하우를 보유하고 있습니다. #클라우드형 서비스 캠페이너스는 여러 물리 서버로 구성되지만, 내부적으로는 더 많은 논리 서버로 구성되고 방문자나 사이트의 사용량에 따라 유연하게 자원을 할당하는 클라우드 서비스입니다. 보통은 서버가 100대가 있다고 할 때 100대를 일일이 업데이트 해주고 관리해 주어야 하지만, 캠페이너스는 클라우드 방식이기 때문에 항상 최신 OS와 서버 프로그램을 유지 관리 할 수 있습니다. #다중화 구성 여러 서버 중 하나의 서버에 문제가 발생했을 때 우회하여 서비스가 제공될 수 있도록 다중화가 구성되어 있습니다. 타사의 경우 특정 서버에 문제가 생기면 해당 서버에 입주해 있는 사이트는 서비스가 불가합니다. #물리적으로 분산된 백업 그래도 만일의 일이 발생했을 때를상품 상세페이지에서 이미지 간격 없애기 (행간, 줄간격, 코드)
캠페이너스에선 상품 상세설명에 삽입한 이미지의 구분을 위해 약간의 간격을 두게끔 설정되어 있습니다. 하지만 연관된 이미지를 연속으로 배치하는 경우, 이 간격이 문제가 될 수 있습니다. 이 도움말에서는 간단한 CSS 스타일 속성을 사용해 상품 상세설명에 삽입한 이미지간의 간격을 없애는 방법을 설명합니다. 적용방법 1단계: 상품 상세페이지에 코드 추가하기 1. 디자인 모드에 접속합니다. 2. 왼쪽 상단의 메뉴 관리 ≡ 아이콘을 클릭합니다. 3. 글로벌 메뉴 항목에서 상품 상세페이지 메뉴를 클릭해 이동합니다. 4. 왼쪽 상단의 위젯 추가 ＋ 아이콘을 클릭합니다. 5. 코드 위젯을 클릭합니다. (코드 위젯은 실제 방문자는 볼 수 없기 때문에 어느 곳에 있어도 무방합니다.) 6. 코드 위젯에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다. 7. 컨텍스트 메뉴가 나오면 코드 설정을 클릭합니다. 8. 아래의 코드를 복사합니다. (단축키: CTRL + C) <style> .fr-view브라우저 캐시 비우기 및 강력 새로고침 활용하기
디자인 모드에서 사이트 편집 후 변경사항을 게시했으나 적용되지 않는 때가 있습니다. 위 문제는 대개 웹 캐시로 인해 생기는 문제로, 사용 중인 웹 브라우저의 캐시를 초기화 하는 것으로 해결할 수 있습니다. 단, 일반 캐시 초기화 방법의 경우 웹 브라우저에 저장된 계정 정보, 비밀번호 등 웹사이트 설정도 함께 삭제될 수 있어, 사용자에 따라 매우 곤란해질 수 있습니다. 만약 Google 크롬 브라우저를 사용하는 경우 캐시 비우기 및 강력 새로고침을 사용해 볼 수 있습니다. 이 기능은 웹 브라우저 전체 설정을 삭제하지 않고, 원하는 페이지의 캐시만 간편하게 초기화하는 것이 가능합니다. 사용방법 1. 내 PC에서 Google 크롬 브라우저를 켭니다. 2. 디자인 모드에서 게시해도, 작업사항이 반영되지 않는 메뉴(페이지)에 접속합니다. 3. 크롬 브라우저 오른쪽 상단 더보기 아이콘을 클릭합니다. 4. [도구 더보기 > 개발자 도구]를 클릭해 개발자 도구를 열어줍니다. 또는 아래의 단축키를통합 검색 시 이미지(썸네일)가 나타나지 않는다면?
통합검색 시 썸네일이 제대로 표시되지 않는 경우가 있습니다. 게시물 내 이미지가 외부 서버에 있는 경우 등에서 발견됩니다. 해당 현상은 최초로 검색 되었을 때 등 쿠키가 쌓여있지 않은 경우에 발생하기 때문에 새로고침 시에는 정상 표시될 수 있습니다. 이는 전체적인 검색 시스템을 개편해야 개선 가능한 것으로 확인하고 개선하고자 합니다. 다만 개발이 바로 적용되지 않을 수 있어 개선까지 시일이 소요될 수 있는 점 양해부탁드리며, 차안을 안내드립니다. 아래 코드를 디자인 모드 > 메뉴 관리 > 통합검색 > 위젯 추가 > 코드 위젯 내 삽입하시면 통합검색에서 썸네일 영역을 숨김처리 하실 수 있으니 참고부탁드립니다. <style> .view_box .repeat_area > div.box_thumb { display: none; } </style>서명 참여 현황판을 넣고 싶다면? (캠페인즈)
실시간 연동되는 서명 참여 현황판을 홈페이지에서 구현하고 싶을 경우, 캠페이너스 코드 위젯에 캠페인즈에서 진행하는캠페인을 임베드하여 보여 줄 수 있습니다. 💡 현재는 캠페인즈의 서명과 촉구 캠페인만 임베드 할 수 있습니다. 캠페인즈는? 사람들의 다양한 목소리를 모으고 토론하고 싶을 때, 재미있고 일상적인 액션을 벌이고 싶을 때 더 많은 사람들에게 이슈를 알리고 공론화 하고 싶을 때, 세상을 바꾸는 시민들의 힘이 필요할 때 활용 할 수 있는 캠페인즈는, 더 나은 사회를 함께 만들어가고자 하는 모든 시민들을 위한 캠페인 플랫폼입니다. 캠페인즈 임베드 예시 - 서명 캠페인 : 2022 페미니스트 주권자 행동 10만 서명 캠페인 (홈페이지 링크) - 촉구 캠페인 : 청소년기후행동 ‘21대 국회의원님들, 2030년에도 미래가 있나요?’ (홈페이지 링크) 캠페이너스 사이트에 임베드하는 방법 - 캠페인즈에 업로드되어있는 캠페인의 번호를 확인합니다. - https://campaigns.kr/cam입력폼 제출을 추적하고 싶어요 (광고 스크립트 삽입 또는 자사 시스템 연동)
광고 추적, 웹분석, 또는 자사 시스템과 연동을 위해서 웹사이트 방문자가 입력폼을 제출할 때 원하는 스크립트를 실행하고 싶다면, 입력폼 추적 API를 활용하세요. 💡프로 요금제에서 제공되는 기능입니다. 💡 잠깐! 캠페이너스는 광고스크립트 자동연동 기능을 제공하고 있습니다. 관리자모드 > 마케팅 관리 > 전환추적/리타게팅 관리 에 접속해서 자동연동 기능으로 해결되는지 먼저 확인해보세요. 입력폼 추적 API 기본 활용법 입력폼이 존재하는 캠페이너스 페이지에 코드 위젯을 추가하고 다음 코드를 입력하세요. <script> campaignus.event('submit_form', function(eventData){ // 광고, 웹분석 또는 자사 시스템 스크립트를 여기에 삽입하세요. }); </script> 고급 활용(1) : 특정 입력폼만 추적하기 한 페이지에 입력폼이 여러 개 존재한다면 모든 입력폼에 대해서 스크립트가 실행되게 됩니다. 특정한 입력폼 제출시에만 스크립트가 실행되길 원한다면카카오톡 상담톡 설정하기
카카오톡 상담톡 설정하기 카카오톡 채널 상담 버튼을 아래 그림과 같이 내 사이트에 추가해 보세요. PC, 모바일 어디서나 친구추가 과정 없이 고객과 실시간으로 채팅이 가능해집니다. 또한, 방문자는 간편하게 내 카카오톡 채널 친구 추가 페이지로 이동할 수 있도록 연결 페이지를 제공합니다. 카카오톡 채널 상담 버튼을 내 사이트에 추가하기 위해서는 채널의 홈 ID와 카카오 API 키가 필요하며, 자세한 절차는 아래의 도움말을 참고할 수 있습니다. 참고 : 이 도움말에서는 카카오톡 채널 공식 상담 버튼 이미지를 사용합니다. 만약 나만의 버튼 이미지를 사용하려는 경우, 카카오톡 채널 1:1 채팅 커스텀 버튼 이미지 추가하기 도움말 링크를 참고해 주세요. 1단계: 카카오톡 채널 홈 ID 알아내기 내 카카오톡 채널의 홈 ID를 확인하는 방법을 설명합니다. 1. 카카오톡 채널 ID 알아내기 1. 카카오 비즈니스 파트너에 접속합니다. 2. 내 채널을 선택합니다. (채널이 없는 경우 새 카카오톡 채널이미지에 대체 텍스트(alt 속성) 추가하기
검색엔진최적화, 웹 접근성 개선을 위해 이미지에 alt 속성(대체 텍스트)을 추가할 수 있습니다. 방법 1: 이미지 위젯을 사용한 경우 1. 이미지 위젯을 추가합니다. 2. 이미지 위젯에 마우스 오른쪽 버튼을 클릭하여 이미지 설정을 켭니다. 3. 설명 항목에서 감추기를 선택하고, 대체 텍스트를 입력합니다. 방법 2: 텍스트 위젯의 이미지 첨부를 사용한 경우 1. 텍스트 위젯을 추가합니다. 2. 텍스트 위젯을 마우스로 더블-클릭합니다. 3. 이미지 첨부 아이콘을 클릭하고, PC에서 이미지를 올립니다. 4. 삽입한 이미지를 마우스로 클릭합니다. 5. 옵션 메뉴가 나오면 대체 텍스트 아이콘을 클릭하여 텍스트를 입력합니다. 6. 해당 이미지에 대체 텍스트가 적용됩니다.요소에 링크 추가하기
우스로 메뉴 또는 버튼을 클릭하면 다른 페이지로 이동하도록 요소에 링크를 삽입할 수 있습니다. 이 도움말에서는 상단 메뉴와 하단 메뉴, 위젯에 링크를 삽입하는 방법을 설명합니다. 설정방법 상단하단 메뉴에 링크 삽입하기 상단 메뉴와 하단 메뉴는 본래 마우스 클릭 시 해당 메뉴로 이동하지만, 필요에 따라 전혀 다른 페이지로 이동하도록 링크를 삽입할 수 있습니다. 1. 새로운 메뉴를 생성합니다. 2. 추가한 메뉴의 오른쪽 끝에 위치한 ⓘ 아이콘을 클릭해 메뉴 설정을 켭니다. 3. 메뉴 링크 항목에서 링크 타입을 링크로 선택합니다. 4. 오른쪽 빈 칸을 마우스로 클릭합니다. 5. 아래 두 가지 방법 중 하나를 선택하여 링크를 걸어줍니다. 참고: 메뉴 링크를 설정하면 해당 메뉴의 편집이 제한됩니다. 메뉴를 클릭하면 선택한 메뉴 또는 입력한 URL로 이동하기 때문에 더 이상 편집할 필요가 없어지기 때문입니다. - 메뉴 연결하기: 기존에 생성한 메뉴 중 하나를 선택해 연결합니다. - 직접 링크사업자정보조회 확인 링크 추가하기
온라인 쇼핑몰을 운영하려면 필수로 사업자정보 및 통신판매업신고가 필요하며, 고객이 신고여부를 확인할 수 있도록 링크를 제공해야 합니다. 이 도움말에서는 방문자가 쇼핑몰 운영자의 사업자정보 및 통신판매업신고 정보를 확인할 수 있도록 웹사이트 하단에 사업자정보조회 링크를 추가하는 방법을 설명합니다. 추가방법 사업자정보조회 링크를 삽입하는 방법은 두 가지가 있습니다. 간단 버전(단순 새창 링크) 1. 디자인 모드에 접속합니다. 2. 아래의 URL 주소를 복사합니다. <code>http://www.ftc.go.kr/bizCommPop.do?wrkr_no=사업자등록번호(숫자만) 3. 위 2번 과정에서 복사한 URL 주소를 버튼이나 메뉴 등에 링크로 걸어줍니다. (링크를 거는 방법은 요소에 링크 추가하기 도움말을 참고 부탁드립니다.) 4. 붙여넣은 URL 주소에서 사업자등록번호(숫자만)이라고 작성된 부분을 삭제하고, 본인의 사업자등록번호를 입력합니다. 하이픈(-)은 제외하고 숫자만 입력해 주세실시간 채팅 설치하기
실시간 채팅 기능을 활용해 내 사이트의 방문자 및 회원을 대상으로 실시간 채팅 상담이 가능합니다. 캠페이너스는 채널톡, 네이버톡톡, 카카오톡 채널을 지원합니다. 설정방법 아래 목록 중 선호하는 실시간 채팅 도구를 선택해 내 사이트에 설치해 보세요. 채널톡 채널톡은 고객상담, 마케팅, 팀 메신저가 결합된 올인원 비즈니스 메신저입니다. 사이트 방문자와의 실시간 상담부터 첫구매, 재구매까지 채널톡 하나로 해결할 수 있습니다. 중요 : 현재 캠페이너스 사용자의 경우 신규로 채널톡 계정을 생성하신 분을 대상으로 6개월 무료 이용 혜택 을 드리고 있습니다. 채널톡 설치하기 (실시간 채팅 상담) 네이버톡톡 PC나 모바일 어디서나 친구 추가 없이 고객과 실시간으로 상담을 할 수 있습니다. 네이버 앱이나 SMS를 통해 모바일로도 알림을 받을 수 있습니다. 네이버톡톡 설정하기 (실시간 채팅) 카카오톡 채널 카카오톡으로 PC, 모바일 어디서나 친구 추가 없이 고객과 실시간으로 채팅 상담이 가능합니다.섹션 배경 이미지 고정하기
섹션에 배경 이미지를 삽입하고 "배경 이미지 고정" 효과를 적용하면 마우스 휠을 스크롤 하더라도 배경 이미지가 해당 섹션에 고정되어 표시됩니다. 방문자의 눈길을 사로잡는 시각적 효과를 간편하게 적용할 수 있어, 비주얼 중심의 웹 페이지 디자인에 효과적입니다. 참고: 모바일 브라우저에서는 지원하지 않습니다. 이 효과는 이미지에만 적용되므로 동영상의 경우 동작하지 않습니다. 설정방법 1. 디자인 모드에 접속합니다. 2. 왼쪽 상단의 메뉴 관리 아이콘 ≡ 을 클릭하고, 배경 이미지 고정 효과를 적용할 메뉴를 클릭해 이동합니다. 3. 배경 이미지 고정 효과를 적용하기 위한 새로운 빈 섹션을 추가합니다. 4. 빈 섹션에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다. 5. 컨텍스트 메뉴가 나오면 섹션 설정을 클릭합니다. 6. 이미지 업로드 영역에 마우스 포인터를 올리면, 이미지 업로드 옵션이 표시됩니다. 이미지 찾기를 클릭해 내 PC에서 이미지를 선택해 올려줍니다. 참고: 배경에카카오 API키 발급 및 적용방법
방문자는 공유하기 아이콘을 클릭해, 내 사이트의 콘텐츠(상품, 게시물 등)를 간편하게 메신저, SNS에 공유할 수 있습니다. 이 도움말에서는 카카오톡 공유 및 카카오 스토리 공유를 위한 카카오 API키 발급 및 적용방법을 설명합니다. 중요: 2018년 6월 1일부로 카카오 링크 2.0 정책 변경으로 인해 카카오톡, 카카오 스토리에 공유 기능을 사용하기 위해선 카카오 개발자센터에서 API 키를 발급받아 내 사이트에 적용해야 합니다. 카카오 개발자센터 공지 확인하기 1단계: 카카오 개발자 페이지 접속하기 1. 카카오 디벨로퍼스에 접속합니다. 2. 오른쪽 상단의 로그인 버튼을 클릭해 카카오 계정으로 로그인 합니다. *카카오 계정이 없는 경우 새롭게 계정을 생성합니다. 2단계: 내 애플리케이션 만들기 1. 상단 메뉴에서 내 애플리케이션을 클릭합니다. 2. 서비스 이용 동의 페이지가 나타나는 경우 필수 항목에 동의하고, 개발자 이름을 입력한 다음 회원가입 버튼을 클릭해 다음 단계로 넘어갑니다카카오 페이구매 반품/교환처리 지원 안내🎄
이제 카카오 페이구매 주문도 반품/교환 처리가 가능해요! 📦 간편결제 서비스 '카카오 페이구매' 사용하고 계신가요? 캠페이너스에서 카카오 페이구매를 선보인지도 어느새 1년이 넘게 흘렀습니다. 그동안 반품/교환 처리시 카카오 페이구매 관리자 센터로 한번 더 접속하여 환불, 재발송 처리를 하셔야 해서 불편하셨을 텐데요. 이번 업데이트를 통해 카카오 페이구매 주문을 선택하여 취소/반품/교환 관련 주문 처리를 지원하게 되었습니다! - 주문관리 내 클레임상태 변경 (판매취소, 반품처리, 교환처리) - 반품관리 내 주문상태 변경 (반품완료 처리, 반품 거부(철회), 반품보류) - 교환관리 내 주문상태 변경 (교환 재발송, 교환 거부(철회), 교환보류) 카카오 페이구매 더 궁금하다면? 카카오 공식 소개 페이지와 가이드 또는 [쇼핑 > 쇼핑환경설정 > 전자결제(PG)설정]에서 확인하세요!사운드 클라우드 음원 페이지에 삽입하기
사운드 클라우드에 올린 음악을 내 사이트로 불러와 방문자가 재생할 수 있도록 삽입할 수 있습니다. 디지털 음원 판매하기 위해 미리듣기를 제공하거나, 기타 이유로 음원 재생이 필요할 때 사용할 수 있습니다. 이 도움말에서는 사운드 클라우드에 올린 음원 트랙의 Embed(임베드, 삽입) 코드를 가져와 내 사이트에 삽입하는 방법을 설명합니다. 삽입방법 1단계: 사운드 클라우드 Embed 코드 생성하기 1. 사운드 클라우드에 접속 후 로그인합니다. 2. 오른쪽 상단의 프로필을 클릭하고, Tracks 를 클릭합니다. 3. 내 사이트에 삽입하려는 트랙 위에 마우스 포인터를 올리면 숨겨진 메뉴가 나타납니다. 여기서 더보기 ⋯ 아이콘을 클릭합니다. 4. 더보기 메뉴가 나오면 Share 를 클릭합니다. 5. Embed 탭을 클릭합니다. 아래 그림과 설명을 참고해 사운드 클라우드 오디오 플레이어의 모양 및 색상, 옵션을 설정합니다. - 오디오 플레이어: 오디오 플레이어의 모양을 선택합니다. - Col2차 도메인을 특정 URL 로 연결하고 싶어요.
2차 도메인을 특정 캠페인 URL 로 연결하고 싶을 경우 아래와 같은 방법을 사용하실 수 있어요. (안내드리는 방법은 나만의 도메인을 캠페이너스 네임서버로 연결하여 사용할 때 가능합니다.) 먼저 2차 도메인을 캠페이너스 사이트에 연결합니다. (도메인 연결방법) 이후 2차 도메인으로 접속하면 원하는 캠페인 URL 로 리다이렉트 되도록 사이트 헤더 설정에서 메타코드 영역에 아래의 자바스크립트를 삽입합니다. <script> // 접속할 URL const fromDomain = '이차도메인'; // http 부분은 빼고 기입 // 이동시킬 URL const toURL = '캠페인URL'; //http 부분 포함하여 기입 if ( window.location.hostname === fromDomain ) { window.location.replace(toURL); } </script>PDF iframe 코드 생성 방법
참고 블로그 글iframe 임베드 허용
- iframe 작성 제한 및 사이트 보안 설정 추가 - iframe 태그를 게시판에 적용하기 위해서는 관리자 모드 > 환경설정 > 보안 및 개인정보 보호 설정에서 'iframe 허용 가능 도메인'에 해당 링크 주소 추가 후 확인 부탁드립니다. - 게시글 iframe 생성을 제한 캠페이너스에서는 사이트 외부 방문자에 의한 XSS 공격을 방지하고자, HTML 에디터 작성을 통한 iframe 생성을 제한하고 있습니다. - 적용일: 2021년 10월 5일(화) - 적용대상: 캠페이너스 전체 사이트 - 적용위치: 게시물 작성, 문의 작성, 캘린더 일정 작성 (HTML 에디터) HTML 에디터를 통해 신규 글을 작성하는 경우에만 iframe 태그 작성 완료 시 일반 텍스트로 변환됩니다.