버튼을 클릭할 때 가입 양식을 표시하도록 트리거하는 방법

예상 3 읽은 시간(분)

업데이트 2024년 9월 18일 오후 9:55 EST

방문자가 특정 버튼을 클릭하면 웹사이트에 가입 양식이 표시되도록 트리거하는 방법을 알아보세요. 이 가이드에서는 사용자 지정 트리거에 표시되도록 양식을 조정하고, 새 버튼을 만들어 사이트에 추가하고, 버튼을 클릭하면 가입 양식이 트리거되도록 짧은 코드 스니펫을 사이트의 HTML에 붙여넣는 방법을 안내합니다.

개발자로서 가입 양식의 트리거를 사용자 지정 코딩하려는 경우 팝업 또는 플라이아웃 양식을 사용자 지정 트리거하는 방법에 대한 개발자 리소스를 참조하세요.

이 코드를 붙여넣으려면 사이트의 HTML 및 전자상거래 플랫폼에 액세스해야 하므로 지원팀에서 실무적인 지원을 제공할 수 없습니다. 팀에 개발자가 없고 직접 코드를 추가하는 데 익숙하지 않다면 클라비요 파트너에게 도움을 요청하세요.

새 버튼 만들기

먼저 웹사이트에 새 버튼을 만들어 클릭하면 가입 양식이 표시되도록 합니다. 사이트에 버튼을 추가하기 전에 클라비요에서 가입 양식이 올바르게 설정되어 있는지 확인해야 합니다. 그렇게 하려면

버튼을 클릭할 때 표시할 새 가입 양식을 만들거나 이미 만든 양식을 선택합니다.
스타일 탭에서 양식 유형을 팝업, 플라이아웃 또는 전체 페이지로 설정해야 합니다. 내장된 양식은 버튼을 클릭해도 트리거할 수 없습니다.
타겟팅 & 동작 탭의 타이밍 아래에서 사용자 지정 트리거에만 표시를 선택합니다.
양식의 디자인과 콘텐츠가 만족스러우면 게시를 클릭 합니다.
그런 다음 양식 편집기를 열고 다음 설정을 선택합니다.

아래 코드를 복사하세요:

<button class="klaviyo_form_trigger"> 여기를 클릭하세요</button>

버튼을 표시할 웹사이트 페이지의 HTML에 코드를 붙여넣습니다. 이 버튼은 사이트 템플릿의 기본 스타일을 사용합니다. 버튼의 모양을 추가로 사용자 지정하려면 개발자 또는 클라비요 파트너에게 문의하세요.

사이트에 각각 다른 가입 양식을 트리거하는 여러 개의 버튼을 추가하는 경우 고유한 이름을 사용하여 각 버튼을 분류해야 합니다(예: klaviyo_form_trigger1, klaviyo_form_trigger2).

가입 양식을 트리거하는 버튼을 설정합니다.

웹사이트에 새 버튼을 추가했으니 이제 버튼을 클릭할 때 가입 양식이 표시되도록 트리거를 설정해야 합니다. 사이트에 작은 사용자 정의 자바스크립트 스니펫을 추가하여 트리거를 설정하세요:

아래 코드 스니펫을 복사하세요:

<스크립트 유형="텍스트/자바스크립트">
	document.querySelector('.klaviyo_form_trigger').addEventListener('click', function (){
		window._klOnsite = window._klOnsite || []; 
		window._klOnsite.push(['openForm', 'FORM_ID']);
	});
</script>

마지막 섹션에서 사이트에 추가한 버튼 코드 바로 아래에 코드 스니펫을 붙여넣습니다.
방금 붙여넣은 코드조각에서 FORM_ID를 가입 양식의 ID로 바꿉니다.
- 양식 ID를 찾으려면 클라비요로 돌아가서 가입 양식의 양식 편집기를 엽니다. 코드 스니펫에 추가할 URL 끝에 있는 6자리 코드를 복사합니다(이것이 양식 ID입니다).
완성된 코드에는 새 버튼 코드와 고유 양식 ID가 포함된 가입 양식 트리거가 포함되어야 합니다. 버튼 코드를 추가한 모든 페이지에 이 코드를 붙여넣어야 합니다.
- 다음은 Shopify 페이지 편집기에서 완성된 코드의 예입니다:
  
  마지막 단계에서 버튼의 클래스를 조정한 경우(즉, klaviyo_form_trigger를 다른 텍스트로 바꾸거나 숫자를 추가한 경우) 사용한 텍스트로 이 코드를 업데이트해야 합니다.
변경 사항을 저장합니다.