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'를 붙여줍니다. 예를 들어, 위 코드를 수정하면 아래와 같이 됩니다.

<!-- 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+'&mode=sdk';
   h.appendChild(i);
 })(document,'head','script',['<<Team Slug>>','<<예약페이지 or 라우터 ID>>'],'<<Form class>>','<<Theme>>');
</script>
<!-- End Re:catch embedding code -->

SDK 모드가 정상적으로 활성화 됐다면, 개발자 도구의 console 에서 window.recatch 객체를 확인할 수 있습니다.

주의: SDK 모드를 활성화하면 form class를 통한 submit interceptor는 작동하지 않습니다. 주의: Team Slug, 예약페이지 or 라우터 ID, Form class, Theme은 적절한 값으로 대체 해야 합니다. 대체할 때, 꺽쇠 괄호(<<, >>)는 지워주세요.

2. 리캐치 모달 띄우기

2-1. SDK 모드가 활성화 됐는지 확인하기

정상적으로 SDK 모드가 활성화 되면 window.recatch 객체 내부에 open 메소드가 존재합니다. window.recatch.open() 와 같이 함수를 호출하여 리캐치 모달이 잘 뜨는지 확인합니다.

2-2. 커스터마이징

open 메소드의 시그니처는 아래와 같습니다. 문법은 TypeScript 문법입니다.

open(options?: {
  initialFormValues?: {
    name: string
    email: string
    phone?: { phoneNumber: string; dialCode: string }
    additional?: string
  };
  formAnswers?: Record<string, string>;
  onBookingComplete?: (fieldAnswers: Record<string, any>) => void;
  onDateSelect?: (dateRange: { start: Date; end: Date }) => void;
  onCloseByUser?: () => void;
}): void

각 option에 대한 설명은 아래와 같습니다.

• initialFormValues: 고객이 리캐치 모달에서 미팅 시간을 선택했을 때 나타나는 form의 default value입니다. key는 name, email, phone, additional 로 각각 이름, 이메일, 전화번호, 전달 사항을 의미합니다.

위 이미지는 initialFormValues를 아래와 같이 설정했을 때 나타나는 모습입니다.

{
   name: '이캐치',
   email: '[e-mail]',
   phone: {
     phoneNumber: '01012345678',
     dialCode: '+82'
   }
}

• formAnswers: 리드 라우터를 사용할때만 활용할 수 있는 option입니다. 리드 라우터 생성시 작성한 폼연동 의 name들과 매칭할 form answer를 object 형태로 전달합니다. key로 name을, value로 form answer를 넣어줘야 합니다. 예를 들어, 위와 같은 리드 라우터가 설정되어 있는 상황에서 고객이 입력한 답변이 이름: 이캐치, 이메일: [e-mail] 라고 가정하면 { name: '이캐치', email: '[e-mail]' } 가 됩니다.
• onBookingComplete: 예약이 확정됐을 때 호출되는 콜백함수입니다.

• onCloseByUser: 고객이 X버튼을 눌러 리캐치 모달을 껐을 때 호출되는 콜백함수입니다.

커스터마이징을 적용한 최종 예시코드는 아래와 같습니다.

window.recatch.open({
  initialFormValues: {
     name: '이캐치',
     email: '[e-mail]',
     phone: {
       phoneNumber: '01012345678',
       dialCode: '+82'
     }
  },
  formAnswers: {
     name: '이캐치',
     email: '[e-mail]',
  },
  onBookingComplete: () => console.log('complete'),
  onDateSelect: () => console.log('date selected'),
  onCloseByUser: () => console.log('closed by user')
});