동의 페이지를 사용자 지정 코딩하는 방법
학습 내용
나만의 환경설정 페이지, 구독 페이지, 구독 취소 페이지를 사용자 지정 코딩할 수 있는 클라비요의 호스팅 페이지 기능을 활성화하고 사용하는 방법을 알아보세요.
이 문서는 개발자를 위한 문서로, 현재 클라비요는 사용자 지정 코드를 작성하는 데 도움이 되는 서비스를 제공하지 않으며 사용자 지정 코드 문제 해결을 위한 지원도 제공하지 않습니다. 기본 제공되는 앱 동의 페이지에 대해 자세히 알아보려면 동의 페이지 시작하기 문서를 참조하세요.
시작하기 전 안내 사항
호스팅된 페이지를 구성하기 전에 이 기능을 활성화하세요:
- 설정 > 기타로 이동합니다.
- 드롭다운에서 동의 페이지를 선택합니다.
- 사용자 정의 호스팅 페이지에서 호스팅 페이지에 사용자 정의 전용 도메인 사용으로 전환을 클릭합니다.
계정 인증을 통과한 유료 요금제를 사용하는 계정만 이 설정에 액세스할 수 있습니다.
사용자 지정 동의 페이지 만들기
- 설정 > 기타로 이동합니다.
- 호스팅된 페이지를 클릭합니다.
- 페이지 옆의 + 기호를 클릭하여 새 페이지를 추가합니다.
- 이 페이지의 이름을 지정합니다(예: unsubscribe.tmpl); 동의 페이지에 사용할 수 있지만 원하는 경우 1개 이상의 페이지를 만들 수 있습니다.
호스팅된 페이지 이름에 공백을 포함하면 오류가 발생하므로 공백을 포함할 수 없습니다. 공백을 피하거나 밑줄을 사용하여 제목을 구분하세요.
- 원하는 필드와 기능이 포함된 HTML 페이지를 디자인합니다. 사용자 지정 동의 페이지에 삽입할 수 있는 필드의 예는 다음과 같습니다:
- 이메일 빈도를 선택할 수 있습니다:
- 구독 취소 옵션
- 모든 이메일 수신 옵션
- 일간, 주간, 월간 등 뉴스레터 발행 빈도 옵션
- 타겟팅 및 세그먼트에 사용할 수 있는 정보입니다:
- 사용자가 세일 공지를 원하는지 여부를 나타내는 확인란입니다.
- 사용자가 제품 알림을 원하는지 여부를 나타내는 확인란입니다.
- 사용자가 블로그 업데이트를 원하는지 여부를 나타내는 확인란입니다.
- 사용자가 가입할 수 있는 기타 목록
- 이메일 빈도를 선택할 수 있습니다:
동의 페이지의 HTML 코드 예시
이메일 유형 및 빈도 기본 설정이 포함된 완전한 기능의 동의 페이지를 얻으려면 이 코드를 수신거부.tmpl에 사용하면 됩니다:
<메타 문자셋="utf-8"> <메타 http-equiv="X-UA 호환" content="IE=edge"> <메타 이름="뷰포트" content="width=device-width, initial-scale=1"> rel="스타일시트" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <스타일 유형="text/css"> /* 콘텐츠에 약간의 공백 */ body { padding-top: 20px; padding-bottom: 20px; } form { margin-bottom: 18px; } /* 사용자 정의 페이지 헤더 */ .header { border-bottom: 1px solid #e5e5e5; margin-bottom: 10px; } .header h1 { margin: 10px 0; } .required-fields { text-align: right; } .required-fields span { color: #a94442; font-weight: bold; } .list-group-item label { font-weight: normal; margin-top: 17px; } .list-group-item 레이블 입력[유형="체크박스"] { margin-right: 4px; } .form-group span.required { position: absolute; top: 0; right: 0; font-size: 20px; color: #a94442; font-weight: bold; user-select: none; } label.error { color: #a94442; font-weight: bold; margin-top: 4px; } .form-actions { margin: 25px 0; } .form-control+.form-control { margin-top: 6px; } .panel-group .panel-title .closed-icon, .panel-group .panel-title .open-icon { margin-right: 0.5em; top: 2px; } .panel-group .panel-title a:hover, .panel-group .panel-title a:active { text-decoration: none; } .panel-group .panel-title a:hover .text, .panel-group .panel-title a:active .text { text-decoration: underline; } .panel-group .panel-title .closed-icon { display: none; } .panel-group.closed .panel-title .open-icon { display: none; } .panel-group.closed .panel-title .closed-icon { display: inline; } /* 사용자 정의 페이지 바닥글 */ .footer { padding-top: 18px; border-top: 1px solid #e5e5e5; } /* 컨테이너 사용자 지정 */ @media (최소 너비: 768px) { .container { max-width: 730px; } }