코드 및 위젯: 사용자 지정 CSS 및 스크립트
설정의 "코드 및 위젯" 섹션에서는 카운터, 광고 픽셀, 채팅 위젯, 쿠키 배너와 같은 사용자 지정 코드는 물론, 웹사이트의 모양을 세밀하게 조정하기 위한 CSS 코드도 삽입할 수 있습니다.
헤드와 바디에 코드#
- 헤더 코드 - 각 웹사이트 페이지의
<head>에 삽입됩니다. Google Analytics, Meta Pixel 및 검증 메타 태그에 사용됩니다. - 본문 끝의 코드는
</body>앞에 삽입됩니다. 채팅 위젯, 쿠키 배너 및 페이지 로드가 필요한 스크립트에 사용됩니다.
서비스에서 제공하는 전체 코드를 붙여넣고 "저장"을 클릭하세요. 필드당 문자 제한은 20,000자입니다. 이 코드는 공개 웹사이트에서만 작동하며, 사용자 계정에서는 사용할 수 없습니다.
예시:
- Google Analytics 4 - 헤더에
gtag.js조각 삽입. - 메타 픽셀은 헤드에 있는 픽셀의 일부 조각입니다.
- 채팅 위젯(Tawk, Crisp, JivoChat) - 본문 내 스크립트.
- Google/Bing/Yandex 권한 확인은 SEO 블록 → "권한 확인"을 통해 더욱 편리하게 진행할 수 있습니다.
사용자 지정 CSS#
사용자 지정 CSS는 AI 비서 또는 연결된 AI 챗봇을 통해 추가할 수 있습니다. 예를 들어 "CSS 추가: 버튼을 완전히 둥글게 만들어 주세요."라고 입력하면 비서가 코드를 확인하고 사이트에 적용합니다. 더욱 세밀한 사용자 지정을 위해서는 카드에는 [data-asd="card"], 헤더에는 [data-asd="header"], 히어로 블록에는 [data-asd="block-hero"] 와 같은 사이트 요소 속성을 사용하세요. 비서가 관련 속성 목록을 제안해 줄 것입니다.
사용자가 작성한 CSS는 카탈로그의 CSS 스타일과 별도로 저장됩니다. 따라서 스타일을 변경하면 수정 사항이 그대로 유지됩니다.
제한 사항 및 안전#
- CSS에서
<style>,<script>,@import태그 및 표현식은 사용이 금지되어 있으며 유효성 검사 과정에서 제거됩니다. - 헤더와 본문에 있는 스크립트는 방문자의 브라우저에서 실행됩니다. 신뢰할 수 있는 서비스의 코드만 삽입하세요.
- 붙여넣기 후 사이트가 깨져 보이는 경우, 해당 필드를 지우고 저장하면 사이트가 정상적으로 표시됩니다.
질문과 답변#
카운터는 세지 않습니다#
코드를 헤더에 붙여넣고 저장한 다음, 사이트가 공개 주소(내 계정이 아닌)에 열려 있는지 확인하세요. 광고 차단 프로그램이 인증에 문제를 일으킬 수 있습니다.
지도나 양식을 삽입할 수 있나요?#
네, AI 도우미를 통해 페이지의 "사용자 지정 HTML" 블록으로 추가할 수 있습니다. 홈 및 메뉴를 참조하세요.