Other (Embed SDK)
위와 같은 head 코드의 i.src 끝에 '&mode=sdk'를 붙여줍니다. 예를 들어, 위 코드를 수정하면 아래와 같이 됩니다.
SDK 모드가 정상적으로 활성화 됐다면, 개발자 도구의 console 에서 window.recatch 객체를 확인할 수 있습니다.
주의: SDK 모드를 활성화하면 form class를 통한 submit interceptor는 작동하지 않습니다.
주의: Team Slug, 예약페이지 or 라우터 ID, Form class, Theme은 적절한 값으로 대체 해야 합니다. 대체할 때, 꺽쇠 괄호(<<, >>)는 지워주세요.
2-1. SDK 모드가 활성화 됐는지 확인하기
정상적으로 SDK 모드가 활성화 되면 window.recatch 객체 내부에 open 메소드가 존재합니다. window.recatch.open() 와 같이 함수를 호출하여 리캐치 모달이 잘 뜨는지 확인합니다.
2-2. 커스터마이징
open 메소드의 시그니처는 아래와 같습니다. 문법은 TypeScript 문법입니다.
각 option에 대한 설명은 아래와 같습니다.
initialFormValues: 고객이 리캐치 모달에서 미팅 시간을 선택했을 때 나타나는 form의 default value입니다.
key는
name,email,phone,additional로 각각 이름, 이메일, 전화번호, 전달 사항을 의미합니다.
위 이미지는 initialFormValues를 아래와 같이 설정했을 때 나타나는 모습입니다.
formAnswers: 리드 라우터를 사용할때만 활용할 수 있는 option입니다. 리드 라우터 생성시 작성한
폼연동의 name들과 매칭할 form answer를 object 형태로 전달합니다.key로 name을, value로 form answer를 넣어줘야 합니다. 예를 들어, 위와 같은 리드 라우터가 설정되어 있는 상황에서 고객이 입력한 답변이
이름: 이캐치, 이메일: catch.lee@recatch.cc라고 가정하면{ name: '이캐치', email: 'catch.lee@recatch.cc' }가 됩니다.onBookingComplete: 예약이 확정됐을 때 호출되는 콜백함수입니다.
onCloseByUser: 고객이 X버튼을 눌러 리캐치 모달을 껐을 때 호출되는 콜백함수입니다.
커스터마이징을 적용한 최종 예시코드는 아래와 같습니다.
window.recatch.open 함수에서 제공 하는 callback 함수 뿐만 아닌 다음과 같은 트리거에 대해서 이벤트 메세지를 postMessage를 통해 제공 합니다.
[이용 방법]
다음과 같이 메세지에 대한 이벤트 리스너를 생성하여 필요한 이벤트를 필터해서 사용 하실 수 있습니다.
[이벤트 목록]
bookingComplete (미팅 일정 예약이 완료 되었을 때)
제공 되는 event data
routerId: 워크플로우 및 예약페이지 ID
fieldAnswers: 유저가 입력한 폼의 값
closeModal (모달이 닫혔을 때)
제공 되는 event data
routerId: 워크플로우 및 예약페이지 ID
type: 'byUser' | 'bookingComplete' | 'disqualified'
byUser : 유저가 직접 모달창을 닫았을 때
bookingComplete: 미팅 예약 후 닫혔을 때
disqualified: 라우팅 조건에 따라 미팅 미배정으로 처리되었을 때
disqualified (라우팅 조건에 따라 미팅 미배정 되었을 때)
제공 되는 event data
routerId: 워크플로우 및 예약페이지 ID
fieldAnsers: 유저가 입력한 폼의 값
formReady (폼 로딩이 완료 되었을 때)
제공 되는 event data
workflowId: 워크플로우 및 예약페이지 ID
openRecatchModal (폼 제출 후 리캐치 모달창이 열렸을 때)
제공 되는 event data
routerId: 워크플로우 및 예약페이지 ID
formValues: 유저가 입력한 폼의 값