가입 양식에서 사용자 정의 HTML 블록을 사용하는 방법

학습 내용

양식 편집기에서 제공되는 블록 외에도, 사용자 지정 HTML 블록을 사용해 Klaviyo 가입 양식에 원하는 마크업을 추가하는 방법을 알아보세요. HTML 블록을 사용하면 사용자 지정 제목, 서식 있는 텍스트, 목록, 표, 이미지, 링크 등 콘텐츠와 레이아웃을 세밀하게 제어할 수 있어 양식을 브랜드와 메시징에 정확히 맞출 수 있어요.

보안을 위해 HTML 블록은 특정 태그와 속성 세트만 지원해요. 지원되지 않는 HTML이 있으면 변경 사항이 저장되지 않고, 편집기에서 무엇을 수정해야 하는지 설명하는 오류가 표시돼요. 아래 섹션에는 지원되는 태그와 속성, 그리고 허용되지 않는 일반적인 예시가 나열되어 있어요.

시작하기 전에 알아야 할 것

맞춤 HTML을 사용하기 전에 다음 사항을 확인해 주세요.

• 맞춤 HTML 블록은 유료 Klaviyo 요금제에서만 사용할 수 있어요.
• HTML은 저장하기 전에 보안을 위해 검사돼요. 스크립트와 이벤트 핸들러를 포함한 지원되지 않는 태그 및 속성 때문에 변경 사항이 저장되지 않아요. 이러한 제한은 악성 코드로부터 사이트 방문자를 보호해요. 아래에서 지원되는 태그와 속성을 확인하고, 편집기에 표시되는 오류를 수정해 주세요.
• 맞춤 HTML 블록은 새 콘텐츠만 추가해요. HTML 블록을 사용하면 양식에 자체 요소를 추가할 수 있어요. 이 블록으로는 양식의 기존 블록 HTML을 수정할 수 없어요.
• Klaviyo 지원팀은 사용자 지정 코드를 문제 해결할 수 없어요. 사용자 지정 HTML(예: 레이아웃 깨짐, 콘텐츠가 렌더링되지 않음, 스타일링 문제)로 인해 발생한 문제는 직접 디버그하고 수정해야 해요. 사용자 지정 HTML이 포함된 양식이 올바르게 표시되거나 동작하지 않으면, 먼저 HTML 블록을 제거해서 코드가 원인인지 확인해 보세요.
• 게시하기 전에 테스트하세요. 맞춤 HTML은 양식의 레이아웃과 사용성에 영향을 줄 수 있어요. 게시하기 전에 데스크톱과 모바일에서 모두 양식을 항상 미리 보고 테스트해 보세요.

양식에 HTML 블록 추가

양식에 맞춤 HTML을 추가하려면:

1. 가입 양식 으로 이동한 다음, 편집기에서 양식을 여세요.
2. 블록 추가를 선택하고 HTML 블록을 찾은 다음, 사용자 지정 콘텐츠가 표시되길 원하는 양식 위치로 드래그해 주세요.

3. HTML 블록을 선택해 설정을 여세요. 코드 편집기가 블록의 사이드바에 표시돼요.

HTML 블록은 양식 편집기의 다른 블록과 동일하게 작동해요. 블록을 2개 이상 추가하고, 위치를 변경하고, 삭제할 수 있어요. 맞춤 HTML은 해당 블록 안에 포함되므로, 양식 나머지 구조에는 영향을 주지 않아요.

HTML 작성

코드 편집기에서 자리표시자 HTML을 지원되는 태그와 속성만 사용해 자체 HTML로 바꿔 주세요. 변경 사항은 자동으로 저장돼요. 편집기에 오류가 표시되면 계속 진행하기 전에 지원되지 않는 콘텐츠를 수정해 주세요.

예시

<h2 class="promo-heading">Join our list</h2>
<p>Sign up for <strong>15% off</strong> your first order, plus:</p>
<ul>
  <li>Early access to new drops</li>
  <li>Members-only offers</li>
</ul>
<p><a href="https://www.example.com/terms" target="_blank" rel="noopener noreferrer">See terms and conditions</a></p>

인라인 style 속성과 <style> 태그는 지원되지 않아요. HTML에 스타일을 적용하려면 요소에 자체 class 이름을 추가하고 사용자 지정 CSS로 이를 대상으로 지정하세요. 예를 들어, 제목에 class="promo-heading"을(를) 설정한 다음 사용자 지정 CSS 편집기에서 .promo-heading의 스타일을 지정해 주세요. 맞춤 CSS를 활성화하고 작성하는 방법은 가입 양식에서 맞춤 CSS를 사용하는 방법에서 확인해 보세요.

지원되는 HTML 태그 및 속성

보안을 위해 HTML 블록은 다음 태그 및 속성을 지원해요. 이 목록에 없는 태그 또는 속성이 있으면 변경 사항이 저장되지 않아요.

전역 속성 ― 지원되는 모든 태그에서 허용됩니다: id, class, dir, lang, role, aria-* (접근성 속성).

아래 표에는 위의 전역 속성 외에도 특정 태그에서 허용되는 추가 속성이 나열되어 있어요.

텍스트 및 서식

제목

목록

표

미디어 및 링크

허용되는 URL 스킴

링크(href) 및 이미지 소스(src)는 다음 URL 스킴( http, https, mailto, tel)과 상대 경로 또는 #fragment 앵커만 사용할 수 있어요. 다른 스킴(javascript: 또는 data: 등)을 사용하는 URL은 변경 사항이 저장되지 않도록 해요. 링크에서 target="_blank"을(를) 사용하는 경우, 링크를 안전하게 유지하려면 rel="noopener noreferrer"을(를) 추가해 주세요.

지원되지 않는 HTML 태그 및 속성

악성 코드로부터 사이트 방문자를 보호하기 위해, HTML 블록은 저장할 때 지원되지 않는 태그, 속성 및 URL을 거부해요. 다음 항목은 HTML에서 흔히 사용되더라도 허용되지 않아요:

• 스크립트: <script> 및 <noscript>
• 양식 컨트롤: <form>, <input>, <button>, <select> 및 <textarea>. 편집기의 표준 입력 및 버튼 블록을 사용해 가입 신청을 수집하세요.
• 이벤트 핸들러 속성: 이름이 on 로 시작하는 모든 속성(예: onclick, onload, onerror, onmouseover)
• 프레임 및 임베드: <iframe>, <frame>, <frameset>, <object>, <embed>, <applet>, <portal>
• 벡터 및 마크업 언어 태그: <svg>, <math>
• 문서 및 리소스 태그: <base>, <meta>, <link> 및 <style> 태그
• 링크 또는 소스의 위험한 URL 스키마: javascript:, vbscript:, data:, filesystem:
• 양식 제출 재정의 속성: formaction, formmethod, formtarget, formenctype
• 레거시 또는 사용 중단된 태그: <marquee>, <bgsound>, <keygen>, <isindex>, <xmp>, <listing>, <plaintext>, <template>, <noembed>

변경사항을 저장할 수 없는 경우, 오류 메시지를 사용해 지원되지 않는 태그, 속성 또는 URL을 찾아 제거하거나 교체해 주세요. 계속하기 전에 위의 지원 목록을 기준으로 코드를 확인해 주세요.

미리 보고 게시하기

HTML을 작성한 후:

1. 편집기 미리 보기를 사용해 양식의 표시 상태를 확인해 보세요.
2. 사용자 지정 HTML은 데스크톱과 모바일에 서로 다르게 영향을 줄 수 있으므로, 두 환경에서 모두 양식을 확인해 보세요.
3. URL 타겟팅이 설정된 양식은 게시하기 전에 테스트 페이지로 제한해 주세요. 타겟팅 및 표시 행동 > 타겟팅을(를) 여세요. URL에서 특정 URL에서만 표시를 켠 다음 정확히 일치를 선택하고, 기존에 허용된 URL이 있다면 모두 테스트 페이지의 전체 URL로 바꾸세요.
4. 사이트에서 어떻게 표시되는지 확인할 수 있도록 양식을 공개되지 않는 페이지에 게시하세요. 게시 또는 예약을 클릭하고 지금 게시를 선택한 다음 지금 게시를 클릭하세요. 게시하기 전에 모든 차단 알림을 해결하세요.
5. 게시한 양식에서 테스트 가입을 제출해 모든 입력과 버튼이 여전히 작동하는지 확인해 주세요.
6. 원래 의도한 타겟팅 설정을 복원한 다음 게시 또는 예약과 지금 게시를 사용해 대상 고객에게 양식을 게시해 주세요.

맞춤 HTML 편집 또는 삭제

HTML을 편집하려면 HTML 블록을 선택한 다음, 설정에서 코드를 업데이트해 주세요. 변경 사항을 미리보기로 확인한 다음 게시하여 라이브 양식을 업데이트해 주세요.

맞춤 HTML을 제거하려면 HTML 블록을 선택한 다음 삭제해 주세요. 이렇게 하면 양식에서 해당 블록과 그 콘텐츠가 제거되고, 양식의 나머지 부분에는 영향을 주지 않아요. 블록을 제거하는 것은 표시 문제가 맞춤 코드 때문에 발생했는지 확인하는 가장 빠른 방법이기도 해요. 변경사항을 게시하여 라이브 폼에서 블록을 제거해 주세요.

문제 해결

HTML 변경 사항이 저장되지 않아요.
HTML 블록 설정에서 오류를 확인해 주세요. 지원되지 않는 태그, 속성 또는 URL을 삭제하거나 바꾼 다음, 오류가 사라졌는지 확인해 주세요. 오류 메시지에서 허용되는 태그에 대해 자세히 알아보기를 선택해 지원 목록을 확인해 주세요.

내 양식이 깨져 보여요.
닫히지 않았거나 서로 맞지 않는 태그, 그리고 다른 블록의 위치를 옮기거나 겹치게 만드는 레이아웃 규칙이 있는지 HTML을 검토해 주세요. 코드가 자체 블록에 들어 있으므로 HTML 블록을 삭제해 원인인지 확인한 다음, 다시 추가하고 더 작은 변경 사항으로 테스트해 볼 수 있어요.

HTML에 스타일이 적용되지 않아요.
HTML의 class 이름이 사용자 지정 CSS의 선택자와 일치하는지, 사용자 지정 CSS가 켜져 있는지, 그리고 양식의 최신 버전을 게시했는지 확인해 주세요. 가입 양식에서 사용자 정의 CSS를 사용하는 방법을(를) 참조하세요.

HTML 블록이 보이지 않아요.
맞춤 HTML은 유료 Klaviyo 요금제에서 사용할 수 있어요. 계정에 유료 요금제가 있는지 확인한 다음, 양식 편집기에서 블록 추가 아래에 있는 HTML을 찾아보세요.

자주 묻는 질문

폼의 기존 블록 HTML을 편집할 수 있나요?
아니요. HTML 블록을 사용하면 폼에 새로운 맞춤 콘텐츠를 추가할 수 있어요. 이는 폼의 기존 블록 HTML을 변경하지 않아요.

지원되지 않는 HTML은 왜 저장할 수 없나요?
Klaviyo는 악성 코드로부터 사이트 방문자를 보호하기 위해 지원되지 않는 HTML을 거부해요. 계속하기 전에 스크립트 및 이벤트 핸들러 같은 지원되지 않는 태그와 속성을 제거하고, 안전하지 않은 URL을 교체해 주세요. 위의 지원되지 않는 HTML 예시를 확인해 주세요.

양식에 <script> 또는 기타 JavaScript를 추가할 수 있나요?
아니요. 스크립트 및 이벤트 핸들러 속성은 허용되지 않으며, 이러한 항목이 포함된 HTML은 저장할 수 없어요. 이 제한은 사이트 방문자를 보호하기 위한 것이며, 해제할 수 없어요.

HTML 블록에 스타일을 적용할 수 있나요?
예, 그렇습니다. HTML 요소에 자체 class 이름을 추가하고 사용자 지정 CSS로 이를 타겟팅하세요. 가입 양식에서 사용자 정의 CSS를 사용하는 방법을 참조하세요.

Klaviyo Support에서 HTML을 작성하거나 수정하는 데 도움을 받을 수 있나요?
아니요. Klaviyo Support는 커스텀 코드를 작성, 검토, 또는 문제 해결해 드릴 수 없어요. 커스텀 HTML이 포함된 양식에 문제가 있으면, Support에서 추가로 조사하기 전에 원인을 배제하기 위해 HTML 블록을 제거해 달라는 요청을 받게 돼요.