카테고리
기존 폼 연동하기
자체 구축 사이트
설치 전에 꼭 확인하세요! 1. 리캐치를 연동하실 폼의 버튼 type 을 submit 으로 설정해주세요. 1. 폼 제출 시 submit 이벤트가 발생하면 됩니다. 2. 예약페이지 또는 리드 라우터 설치 시<form class>를 꼭 동일하게 설정해주세요. 1. <form class>를 찾는 방법은여기(클릭)를 참고해주세요! 예약페이지나 워크플로우를 아직 생성하지 않으셨나요? 설치할 예약페이지나 워크플로우를 생성해주신 후 설치 페이지로 돌아와주세요. 예약페이지나 워크플로우 생성에 대해 자세히 알고 싶으시다면 여기를 클릭해주세요. - 예약페이지(클릭) (예약페이지 링크 연결) - 워크플로우(클릭) (워크플로우-폼 만들기 링크 연결) 우측 상단에 있는 [공유하기]를 클릭한 후 [웹사이트에 설치]를 눌러주세요 1. 리캐치 설치 코드를 통해 더 포괄적인 데이터 수집을 원하신다면 (예: 웹사이트 유입량 전환율) 설치 웹사이트 데이터 수집 동의 토글을 클릭하세요. 2. 복사하기 버튼을 통해 리캐webflow / 웹플로우
설치 전에 꼭 확인하세요! 1. 리드 라우터를 아직 생성하지 않으셨나요? 리드 라우터를 생성해주신 후 설치 페이지로 돌아와주세요. 2. 리캐치를 연동하실 폼의 버튼 type 을 submit 으로 설정해주세요. 1. 폼 제출 시 submit 이벤트가 발생하면 됩니다. 3. 예약페이지 또는 리드 라우터 설치 시<form class>를 꼭 동일하게 설정해주세요. 1. <form class>를 찾는 방법은여기(클릭)를 참고해주세요! <head>에 커스텀 코드 삽입 1. 웹플로우로 생성하신 페이지의 설정 페이지로 진입해 <head>에 복사하신 리캐치 설치 코드를 삽입하세요. 2. 사용한 form class 이름을 기억하세요! 위 예시에서 사용된 form class 는 my-form 입니다. 도움말: 위 이미지에서 붉은색 줄로 밑줄친 부분입니다. Form Block 추가하기 이미 사용 중인 form이 있다면 이 단계는 건너 뛰고 진행해 주세요. 1. Add 탭을 클릭해서 Forms 섹션을 찾습Hubspot / 허브스팟 (페이지 / 폼)
1. API 커스텀하기 SDK mode를 활성화 한 뒤, HubSpot의 global form events를 listen 할 수 있도록 설정합니다. - 더 자세히 알고싶으시다면 여기(클릭)를 참고해주세요 - 해당 listener에서 window.recatch.open 을 사용하여 리캐치 모달을 띄우는 코드를 작성합니다. - 적용한 예시는 아래와 같습니다. 2. 리디렉션 비활성화 폼 제출 후 정상적으로 리캐치를 활성화하기 위해 HubSpot에서 페이지 리디렉션을 비활성화해야 합니다. 리디렉션 설정은 리캐치 내에서 추가할 수 있습니다. Hubspot 랜딩페이지 또는 폼 사용 시, 아래 예시와 같이 리디렉션 설정을 비활성화 해주세요. Hubspot 랜딩페이지 예시 Hubspot 폼 예시Framer / 프레이머
설치 전에 꼭 확인하세요! 1. 리드 라우터를 아직 생성하지 않으셨나요? 리드 라우터를 생성해주신 후 설치 페이지로 돌아와주세요. 2. 리캐치를 연동하실 폼의 버튼 type 을 submit 으로 설정해주세요. * 폼 제출 시 submit 이벤트가 발생하면 됩니다. 1. 예약페이지 또는 리드 라우터 설치 시<form class>를 꼭 동일하게 설정해주세요. 1. <form class>를 찾는 방법은여기(클릭)를 참고해주세요! Custom Form Code 생성 및 삽입 1. Assets 탭을 선택하세요. 2. Code 섹션의 + 버튼을 클릭하세요. 3. Create Code File 모달 창에서 이름을 입력하세요. (ex: MyForm) 4. New Component 옵션을 선택하세요. 5. Create 버튼을 클릭하세요. 1. 기본 생성된 코드에서 태그 네임을 div에서 form으로 변경하세요. 2. 사용할 className을 삽입하세요. (ex: my-form) 3. form 태그Other (Embed SDK)
1. SDK모드 활성화 <!-- Re:catch embedding code --> <script> (function (r, e, c, a, t, ch) { var h=r.getElementsByTagName(e)[0],i=r.createElement(c); i.async=true; i.id='recatch-embed-script'; i.src='https://cdn.recatch.cc/recatch-embed.iife.js?t='+a[0]+'&b='+a[1]+'&c='+t+'&th='+ch; h.appendChild(i); })(document,'head','script',['<<Team Slug>>','<<예약페이지 or 라우터 ID>>'],'<<Form class>>','<<Theme>>'); </script> <!-- End Re:catch embedding code --> 위와 같은 head 코드의 i.src 끝에 '&mode=sdk'를 붙여줍니다. 예를 들어, 위 코드를 수