워크플로우를 아직 생성하지 않으셨나요?
워크플로우를 먼저 생성해주신 후 이곳으로 돌아와주세요. 반드시 리캐치폼을 사용해 워크플로우를 생성해야 합니다!
리캐치 폼 생성에 대해 더 자세히 알고싶으시다면 여기(클릭)를 참고해주세요
우측 상단에 있는 [공유하기]를 클릭한 후 [웹사이트에 설치]를 눌러주세요
리캐치 설치 코드를 통해 더 포괄적인 데이터 수집을 원하신다면 (예: 웹사이트 유입량 전환율) 설치 웹사이트 데이터 수집 동의 토글을 클릭하세요.
사진에 있는 영역인 <script> ~ </script> 내에 있는 코드를 드래그하여 복사하세요.
<script> ~ </ script> 영역 코드
제일 간단한 설치법이며 모든 폼의 Script를 General Header에 입력하는 방식입니다.
설치할 폼이 많지 않을 때 (10개 이내의 폼을 설치하는 경우) 위 방법을 권장드립니다.
General Header 방식으로 스크립트를 일괄 삽입할 경우, 정상적으로 작동하나 페이지별로 필요 없는 스크립트도 모두 실행되어 네트워크·메모리 리소스 사용량이 많아집니다.
환경에 따라 초기 페이지 로드시 전체적으로 느려질 가능성이 있습니다.
하지만, 폼(iframe)의 표시 속도는 꼭 스크립트 실행 뿐만이 아닌 폼 서비스 서버 응답 등 다양한 요소에 의해 결정됩니다.
Site Settings의 General Settings 에 접근하세요.
Custom Code 섹션에, 리캐치에서 복사한 코드를 Start of <head> tag 부분에 붙여넣으세요.
피그마 Page Settings의 Custom Code 섹션 (3,4)
다시 리캐치 웹사이트 설치 모달로 돌아가 <iframe> ~ </iframe> 코드를 복사해주세요.
원하는 곳에 붙여둘 폼 코드 (5)
폼 설치를 원하는 공간에 HTML 선택지로 복사한 코드를 추가해주세요.
모달 형식으로 리캐치를 설치하고 싶다면, 버튼 생성 → Overlay → Embed → HTML에 삽입합니다.
Page별 Header에 설치할 경우에는 페이지 이동시, 정책상 Header의 변경이 이루어지지 않습니다. 따라서 스크립트와 아이프레임이 매칭되지 않아 폼이 호출되지 않습니다.
Framer로 만든 웹사이트는 Single Page Application(SPA) 방식으로 동작합니다.
SPA 구조에서는 전체 사이트의 Layout(Header, Footer)은 한 번만 렌더링되고, 페이지 이동 시 페이지 전환 시 Body만 교체되어 각 Page별 독립적인 Head 관리가 불가능합니다.