카테고리
[워크플로우 폼] - 기존 폼 연동/설치하기
기존 폼 연동을 통해 워크플로우 생성하기
워크플로우를 활용하여 잠재 고객을 획득하고 정해진 기준에 따라 분류하여 그에 맞는 담당자를 배정할 수 있어요. 리캐치에서 제공하는 템플릿을 활용하거나 직접 워크플로우를 만들어보세요.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모드 활성화 ion (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'를 붙여줍니다. 예를 들어, 위 코드를 수정하면 아래와 같이 됩니다. <!-- Re:catch embedding code -->