문의하기

무엇을 찾고 계신가요?

에 의해이완 막
2024년 4월 15일

Webflow 로직을 사용하여 HubSpot에서 연결 설정

Logic의 Make HTTP 요청 블록을 사용하여 Webflow 양식 제출에서 HubSpot에 새 연락처를 만듭니다.

HubSpot는 고객 데이터를 모니터링하고 영업 및 마케팅 전략을 최적화할 수 있는 널리 사용되는 고객 관계 관리(CRM) 시스템입니다. Logic을 활용하면 양식 제출에서 Hubspot으로 연락처를 효율적으로 전송하고 Webflow 포털을 CRM와 통합할 수 있습니다.

시작하려면: 아직 수행하지 않으셨다면, HubSpot에 계정을 설정하세요. 또한 HubSpot의 필수 필드와 일치하는 필드가 있는 양식을 Webflow 사이트에 포함했는지 확인하세요.

이 튜토리얼에서는 다음 내용을 논의합니다.

  1. HubSpot API 키 생성 프로세스
  2. Logic 워크플로에 대한 인증 설정
  3. HubSpot API 찾기
  4. HTTP 요청 설정 구성
  5. 워크플로 테스트 및 배포
  6. 워크플로의 잠재적인 문제 해결

HubSpot API 키 생성

명심하세요: HubSpot는 2가지 중 하나를 선택할 수 있습니다. 인증 방법 (OAuth 및 비공개 앱 액세스 토큰) 이 가이드는 다음에 중점을 둡니다. 비공개 앱 액세스 토큰 방법.
  1. 귀하의 HubSpot 계정 그리고 진행 비공개 앱 만들기, 아직 완료되지 않은 경우
  2. 선택 범위 탭을 클릭하고 이 API 키를 사용하여 수행하려는 작업을 표시하세요. CRM 드롭다운(최소한 crm.객체.연락처.쓰기 Hubspot에 연락처 전송)
  3. 딸깍 하는 소리 토큰 표시 그리고 당신의 API 키

Logic 워크플로에 대한 인증 구성

  1. 새 탭을 실행하여 Webflow 디자이너에서 Webflow 사이트를 엽니다.
  2. 디자이너 캔버스에서 양식을 선택하고 액세스하세요. 양식 설정
  3. 선택 원천 드롭다운하고 선택하세요. 논리
  4. 딸깍 하는 소리 새 흐름 추가
  5. 새 흐름의 이름을 지정합니다(예: "HubSpot에서 연결 설정"). 이름 필드를 선택하고 선택적으로 설명을 추가합니다. 설명 필드
  6. 드래그 HTTP 요청하기 흐름 편집기 캔버스를 차단하고 이름을 지정합니다(예: "HubSpot에서 새 연락처 시작") 
  7. 로부터 입증 드롭다운 메뉴에서 선택 API 토큰
  8. 선택하다 머리글 ~로부터 다음에 추가 옵션
  9. "Authorization"을 입력하세요. 머리글 필드
  10. 딸깍 하는 소리 자격 증명을 선택하세요 > 새 자격 증명 추가
  11. API 토큰 이름(예: "HubSpot API 토큰")을 이름 필드에 설명을 입력하고 설명 필요한 경우 필드
  12. “무기명”을 입력하십시오. {API 키}"에서 토큰 필드, 바꾸기 {API 키} HubSpot에서 복사한 API 키를 사용하여
  13. 클릭하여 새 자격 증명을 저장하세요. 만들다 그리고 보장 이 탭을 열어두세요! 
전문가 팁: 이와 함께 양식을 새로운 Logic 워크플로에 연결할 수 있습니다. 로직 패널 > 흐름 탭. 양식 제출 트리거에 대한 추가 정보는 Logic에서 찾을 수 있습니다.
논리가 소스로 선택되면 양식 설정에 새 흐름 추가 또는 흐름 찾아보기 옵션이 나타납니다.
양식과 로직 간의 연결은 양식 설정, 양식 블록 설정 또는 로직 패널 > 흐름 탭.
추가 드롭다운에서 "헤더"를 선택하고 헤더 입력 필드에 "승인"을 입력합니다.
"새 자격 증명" 모달 창에는 API 자격 증명의 이름, 설명, 유형 및 값에 대한 필드가 표시됩니다.
베어러 인증(예: HubSpot)을 사용하는 API의 경우 API 키 앞에 "Bearer"를 삽입해야 합니다. 토큰 필드.

HubSpot API 찾기

  1. 방문하다 HubSpot API 참조
  2. 아래로 스크롤하여 CRM 왼쪽 패널에 위치
  3. 로 이동 사물 > 콘택트 렌즈 > 연락처 만들기 그리고 이 탭을 열어두세요 안내를 위해!

HTTP 요청 설정 구성

논리 흐름 및 HubSpot 인증 자격 증명을 설정한 후 Webflow로 돌아가 흐름에서 HTTP 요청을 정의합니다. 이 단계의 HTTP 요청 구성은 방문자가 양식을 제출할 때마다 Hubspot에 새로운 연락처를 설정합니다.

메모: Webflow 사이트가 열려 있던 탭을 닫은 경우 다음으로 이동하세요. 로직 패널 > 흐름 탭을 클릭하고 이전 단계에서 생성된 흐름을 선택합니다. 다음을 클릭하세요. HTTP 요청하기 흐름 편집기 캔버스에서 블록을 클릭하여 블록 설정을 열고 다음 단계를 진행하세요.
  1. 선택하다 우편 ~로부터 요청 방법 쓰러지 다
  2. "https://api.hubapi.com/crm/v3/objects/contacts"를 붙여넣습니다. URL 필드
  3. 옆에 있는 "더하기" 아이콘을 클릭하세요. 헤더 새 헤더를 추가하려면
  4. "content-type"을 입력하세요. 이름 필드 및 "application/json" 값 필드 
  5. 에서 몸 입력란에 코드 조각을 붙여넣으세요. 연락처 생성 HubSpot에서 제공 API 1TP32조정 — 이와 유사합니다(아직 속성을 포함함). 

    { "organization": "Biglytics", "contact-email": "[email protected]", "givenname": "Bryan", "surname": "Cooper", "telephone": "(877) 929-0687 ", "webpage": "biglytics.net" }

계속 진행하려면 양식을 통해 받은 제출물에서 데이터를 수집하기 위해 HTTP 요청에 실시간 정보를 통합해야 합니다.

  1. HubSpot 연락처에서 기존 콘텐츠를 지우고, 연락처의 빈 따옴표 안에 커서를 놓습니다. 콘텐츠 부분
  2. 보라색을 선택하세요”점” 기호를 클릭하고 해당 동적 양식 요소(예: 이름, 이메일 등)를 선택합니다.
콘텐츠 섹션에는 양식 제출에서 성, 이름, 연락처 이메일을 가져오는 동적 양식 구성 요소가 포함되어 있습니다.
Hubspot으로 데이터를 전송하기 위한 포괄적인 HTTP 요청 설정 설정에는 Webflow 양식에서 데이터를 가져오기 위한 변수와 함께 인증 프로세스, 요청 기술, URL, 헤더 및 요청 본문이 포함됩니다.
Logic의 Construct HTTP 요청 블록에서 Hubspot에 대한 전체 POST 요청입니다.

시퀀스를 테스트하고 릴리스하는 절차

  1. 누르다 테스트를 실행하여 구성을 마무리합니다.
  2. 해당 필드에 테스트 값을 입력합니다.
  3. 누르다 테스트 실행
  4. 탭하세요 끝내다 또는 데이터 수락 테스트 모드를 종료하려면
  5. 클릭 공개적으로해라
  6. 때리다 게시용 흐름 준비
  7. 웹사이트 게시를 진행하세요
팁: 테스트 과정에서 오류 알림이 표시되면 문제 해결 방법에 따라 문제를 해결한 후 앞서 언급한 단계를 반복하세요. HTTP 요청 검사에 대한 추가 세부정보를 알아보세요.

시퀀스 내 문제를 해결하기 위한 절차

시퀀스를 테스트하는 동안 오류가 발생하면 다음 조치를 시도하십시오.

  • 자격 증명을 구성하는 동안 API 키 앞에 "Bearer"(공백 포함)가 포함되어 있는지 확인하세요(예: Bearer 123456789).
  • 다음과 같은 무료 도구를 사용하여 요청 본문에 오류가 있는지 검사하세요. JSONLint
이완 막
Ewan Mak의 최신 게시물 (모두 보기)

관련 게시물

에 의해이완 막
업데이트 날짜