개발자 소식으로 돌아가기

WhatsApp Business 플랫폼과 HubSpot 통합

2023년 3월 13일제작:Rashed Talukder

HubSpot은 고객 관계 관리(CRM) 플랫폼으로, 조직에서 자사 제품이나 서비스를 더 효과적으로 마케팅, 판매 및 지원하도록 해줍니다.

WhatsApp Business 플랫폼을 사용하는 비즈니스는 Meta가 호스팅하는 클라우드 API를 사용하여 WhatsApp 통합을 통해 CRM에서 고객과 바로 소통할 수 있습니다. 이를 통해 메시지 전송 기능에 쉽게 액세스할 수 있고 대부분의 기존 기술 스택과 직접 통합할 수 있습니다.

여기에서는 이런 종류의 HubSpot 통합을 설정하는 방법을 살펴보고 HubSpot 플랫폼의 이벤트와 맞춤 규칙에 따라 WhatsApp에서 메시지에 자동으로 답장하는 워크플로를 CRM 내에 만들어보겠습니다.

필수 조건

이 튜토리얼을 완료하려면 다음이 필요합니다.

  • WhatsApp Business 계정

  • Meta for Developers 계정

  • HubSpot 앱 개발자 계정(새로운 계정을 만들 경우 앱 개발자 선택). Hubspot 앱 개발자 계정은 CRM API에 대한 액세스 권한 부여 및 앱을 만들 수 있는 기능 등, 이용약관에 나와 있는 기능과 서비스를 제공합니다.

  • WhatsApp Business Messenger로부터 메시지를 수신하기 위한 이 샘플 Glitch 앱의 실행 중인 인스턴스를 가리키는 URL

이 아티클에서는 여러분이 WhatsApp Business 플랫폼, Meta for Developers, HubSpot에 대해 잘 알고 있는 것으로 가정합니다.

메시지 보내기

첫 단계는 계정을 설정하는 것입니다. 다음 단계를 따르세요.

  1. Facebook 개발자 계정을 만들거나 계정이 있다면 로그인합니다.

  2. 공식 시작하기 문서에서 '개발자 자산 및 플랫폼 액세스 설정' 단계를 완료하고 테스트 메시지를 전송합니다.

  3. 클라우드 API 앱 구성에 전화번호를 추가합니다.

샘플 앱으로 메시지 받기

Webhooks를 테스트하기 위한 엔드포인트로 Webhooks와 Webhooks 구독자 URL을 설정해야 합니다. 이를 위해 위에서 언급한 샘플 앱을 사용할 것입니다.

오른쪽 상단에 있는 리믹스하여 편집하기 버튼을 클릭하면 구성 상세 정보를 편집할 수 있습니다.

.env 파일을 열고 클라우드 API 액세스 토큰을 WHATSAPP_TOKEN 필드에 붙여넣습니다. VERIFY_TOKEN의 경우 아무 문자열이든 입력할 수 있지만 나중에 사용할 것이므로 잘 보관해둡니다.

클라우드 API Webhooks 설정

이제 API에서 이벤트 변경 사항에 대한 업데이트나 응답에 대한 구독을 허용하도록 앱의 Meta for Developers 앱 대시보드에서 시작하여 Webhooks를 설정합니다. WhatsApp의 탐색 메뉴를 클릭합니다. 그런 다음, 시작하기 아래에서 구성을 클릭하고 편집을 클릭합니다.

Webhooks 콜백 URL 편집 대화 상자에서 콜백 URL과 인증 토큰 필드를 입력합니다. 콜백 URL은 https://<<프로젝트 이름>>>.glitch.me가 됩니다. 프로젝트 이름을 자신의 프로젝트 이름으로 바꿉니다(예: https://defiant-standing-mirror.glitch.me). 그런 다음, URL이 위와 동일한지 확인합니다.

인증을 클릭하고 저장합니다. WhatsApp Webhooks 설정에 대한 자세한 내용은 개발자 가이드를 참조하세요.

Webhooks 콜백 URL 편집 화면

이제 엔드포인트로 테스트 알림을 보낼 수 있습니다.

같은 페이지에 있는 편집 버튼 아래에서 Webhooks 필드를 클릭한 다음, 관리를 클릭하고 엔드포인트를 통해 수신하고자 하는 이벤트를 구독합니다. 그런 다음 테스트를 클릭하여 앞서 구성한 받는 사람의 전화번호로 알림 메시지를 보냅니다.

Webhooks 필드 화면

앱이 실행 중이고 이벤트를 수신하는지 확인하려면 Glitch로 이동하여 로그를 클릭하고, 선택한 이벤트에 대한 로그를 확인합니다.

Glitch에서 로그 보기 화면

HubSpot CRM 설정

이제 연락처 정보에 전화번호가 포함된 고객에게 WhatsApp 메시지를 자동으로 전송하도록 HubSpot CRM을 설정합니다.

HubSpot 플랫폼으로 이동해서 개발자 계정에 로그인하거나 개발자 계정을 만듭니다. 개발자 계정은 마케팅, 영업, 서비스, CMS를 포함한 모든 HubSpot 엔터프라이즈 기능의 90일 무료 체험을 제공하므로 HubSpot API와 도구를 테스트해볼 수 있습니다.

개발자 계정을 설정하고 나면 테스트 계정 관리를 클릭합니다.

HubSpot CRM에서 개발자 계정으로 로그인

그런 다음, 앱 테스트 계정 만들기를 선택하고 이름을 demo_whatsapp_integration(또는 원하는 이름)으로 지정하고 만들기를 클릭합니다.

앱 테스트 계정 만들기 화면

새로 만든 앱 테스트 계정을 클릭하고 대시보드로 이동합니다. 그런 다음, 탐색 메뉴 왼쪽 상단의 연락처를 클릭합니다. 데모 연락처 두 개가 보일 것입니다. 데모 연락처는 자유롭게 삭제하고 WhatsApp 테스트에 사용할 테스트 전화번호가 있는 새로운 연락처를 추가합니다.

새로운 앱 테스트 계정 대시보드

WhatsApp과 HubSpot CRM 연결

다음으로 WhatsApp과 HubSpot CRM과의 통합을 설치해야 합니다. 먼저 HubSpot에서 설정으로 이동합니다. 계정 설정에서 통합을 클릭하고 연결된 앱을 클릭합니다.

연결된 앱 화면

App Marketplace 방문을 선택합니다. 검색 필드를 사용하여 WhatsApp 앱을 검색합니다. WhatHub: WhatsApp 통합을 클릭합니다.

App Marketplace

demo_whatsapp_integration 계정을 선택하고 계정 선택을 클릭합니다. 그러면 나머지 연락처 옵션 옆에 있는 연락처 페이지에 WhatsApp 아이콘이 보일 것입니다. HubSpot CRM에서 메시지 전송을 시작하려면 이 아이콘을 클릭합니다. 맞춤 메시지 또는 사전 정의된 템플릿을 사용할 수 있습니다.

WhatsApp 맞춤 메시지

활동 탭에서도 메시지 리스트와 상태를 확인할 수 있습니다.

자동화된 워크플로 설정

이제 CRM의 이벤트로 트리거된 워크플로로 이를 통합합니다. 이를 위해 HubSpot 대시보드에서 맞춤 워크플로를 설정할 것입니다. 탐색 메뉴에서 자동화를 클릭한 다음, 워크플로를 클릭하여 워크플로 대시보드를 엽니다.

워크플로 만들기를 클릭하고 처음부터 만들기 옵션을 선택합니다. 이제 연락처 기반을 클릭하고 나서, 다음을 클릭합니다.

워크플로로 돌아가기 화면

트리거 설정을 클릭하고 HubSpot 포털 통합 이벤트 옵션에서 보낸 WhatsApp 메시지를 선택합니다.

트리거 설정 화면

전송된 메시지 필터 유형을 선택하고 워크플로 트리거를 '다음과 같을 경우'로 설정하고 그 값을 구매 품목으로 지정합니다. 마지막으로 적용 필터를 클릭한 다음, 저장합니다.

이제 + 아이콘을 클릭하고 다른 작업을 추가합니다. 작업 선택 리스트에서 작업 만들기를 클릭합니다.

작업 선택 화면

'테스트 작업'으로 이름을 지정하고 테스트 계정에 할당한 다음, 저장을 클릭합니다. 이제 검토를 클릭하고 게시한 다음, 창 오른쪽 상단의 '활성화'를 클릭하여 워크플로를 활성화합니다.

워크플로 활성화 화면

이제 테스트를 선택하고 나서 테스트 연락처를 선택하여 워크플로를 테스트합니다. 그러면 아래와 같이 워크플로가 트리거됩니다.

테스트 연락처 선택 화면

이제 WhatsApp을 수신하고 알림을 수신했을 때 HubSpot CRM에서 데이터를 자동으로 업데이트하는 통합을 만들 것입니다. 워크플로를 설정하기 전에 리스트에 테스트 연락처를 추가해야 합니다. 연락처를 클릭한 다음, 리스트를 클릭하여 새로운 리스트를 만듭니다.

이 작업을 완료하면 워크플로 페이지로 이동하여 새로운 워크플로를 만들고 'WhatsApp 자동화'로 이름을 지정합니다.

연락처 기반 리스트를 선택하고, 리스트 이름을 추가한 다음, 고정 리스트를 선택합니다. 다음을 클릭하고 나서 + 필터 추가 버튼을 클릭합니다.

이제 필터 추가 리스트에서 멤버십 리스트를 선택하여 필터로 추가하고 리스트 저장을 클릭합니다.

필터 추가 화면

그러면 워크플로 설정을 계속 진행할 수 있습니다. 이를 위해서는 연락처 기반을 선택하고 연락처 등록 트리거를 멤버십 리스트에 추가하면 됩니다.

연락처 등록 트리거 화면

이 워크플로가 활성화되었을 때 트리거할 작업을 설정합니다. 이 작업이 작업 타임라인에 표시되는지 확인하고 저장을 클릭합니다.

작업 선택 리스트에서 Webhooks 보내기를 클릭합니다.

Webhooks 보내기 옵션

그런 다음 워크플로가 트리거되었을 때 워크플로에서 엔드포인트로 페이로드를 보내기 위한 작업을 만듭니다.

Webhooks 보내기 화면

이전에 튜토리얼에서 설정했던 URL을 사용하세요. 저장을 클릭합니다. 마지막으로, 이전에 했던 것처럼 워크플로 테스트를 진행합니다. 테스트 리스트를 열고, 리스트 미리 보기에서 테스트 연락처를 선택하여 테스트를 클릭합니다. 워크플로가 완료됩니다.

이제 로그와 작업 타임라인을 살펴보겠습니다. 작업 타임라인으로 돌아가서 생성된 작업을 검토합니다.

로그 및 작업 타임라인

로그를 확인하기 위해 실행 중인 Glitch 앱으로 돌아간 다음, 로그에서 메시지가 전달된 것을 확인합니다.

Glitch 앱에서 로그 보기

결론

WhatsApp Business 플랫폼과 HubSpot을 통합하면 이벤트와 고객이 취한 행동에 대해 만든 규칙을 기반으로 메시지 송수신을 자동화할 수 있습니다.

이 아티클에서는 단계별 튜토리얼을 통해 이 두 서비스를 연결하여 WhatsApp 메시지를 HubSpot에 상세 정보가 등록된 연락처로 보내는 방법을 알아보았습니다. 사전 정의된 이벤트를 기반으로 작업을 트리거하는 맞춤 워크플로도 설정했습니다. 또한 이전에 설정한 엔드포인트로 알림을 보내고 새로운 작업을 시작하는 워크플로를 설정했습니다.

메시지가 고객에게 시기적절하고 관련성이 있으며 예상된 업데이트를 전달할 수 있도록 하려면 메시지의 품질에 유의해야 합니다. 고객이 계속 만족하고 참여할 수 있도록 사용자에게 스팸을 보내지 마세요.

WhatsApp을 앱과 프로젝트에 통합할 수 있는 방법에 대해 더 자세히 알아보려면 다른 개발자 튜토리얼을 참조하세요.