Hubspot / 허브스팟 (페이지 / 폼)

1. API 커스텀하기

를 참고하여 SDK mode를 활성화 한 뒤, HubSpot의 global form events를 listen 할 수 있도록 설정합니다. 해당 listener에서 window.recatch.open 을 사용하여 리캐치 모달을 띄우는 코드를 작성합니다. 적용한 예시는 아래와 같으며, window.recatch.open 의 시그니처는 에서 확인할 수 있습니다.

window.addEventListener('message', (event) => {
  if (event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmitted') {
    const { name, email, phone } = event.data.submissionValues;
    window.recatch.open({
      initialFormValues: {
        name,
        email,
        phone: {
          phoneNumber: phone,
          dialCode: '+82'
        },
      },
      formAnswers: {
        name,
        email,
        phone,
      },
      onBookingComplete: () => console.log('complete'),
      onCloseByUser: () => console.log('closed by user')
    });
  }
});

2. 리디렉션 비활성화

폼 제출 후 정상적으로 리캐치를 활성화하기 위해 HubSpot에서 페이지 리디렉션을 비활성화해야 합니다. 리디렉션 설정은 리캐치 내에서 추가할 수 있습니다. Hubspot 랜딩페이지 또는 폼 사용 시, 아래 예시와 같이 리디렉션 설정을 비활성화 해주세요.

Hubspot 랜딩페이지 예시

Hubspot 랜딩페이지 리디렉션 비활성화

Hubspot 폼 예시

Hubspot 폼 리디렉션 비활성화