HubSpot 애플리케이션 통합

Webflow 사이트와 HubSpot 계정을 연결하세요.

Webflow 마켓플레이스를 통해 액세스할 수 있는 검증된 HubSpot 애플리케이션을 활용하여 웹사이트에 HubSpot를 삽입할 수 있는 옵션이 있습니다. 이 애플리케이션을 사용하면 HubSpot 양식을 삽입 및 디자인하고, 현재 Webflow 양식을 HubSpot 인스턴스에 연결하고, HubSpot 요소 및 챗봇을 Webflow 웹사이트에 도입하고, 사이트 모니터링을 구성할 수 있습니다.

기존의 기업 전용 HubSpot 양식 통합에 관한 세부 정보를 찾으려면 HubSpot 양식에 대한 튜토리얼을 참조하세요.

이 가이드에서 다음 내용을 확인할 수 있습니다.

  1. HubSpot 애플리케이션 설치 및 허용 지침
  2. HubSpot 애플리케이션의 특징 및 기능   
  3. HubSpot 애플리케이션 제거 방법에 대한 가이드
  4. 문제 해결을 위한 FAQ 및 팁

HubSpot 애플리케이션 설치 및 허가 안내

HubSpot 애플리케이션을 작동하려면 먼저 다음을 수행해야 합니다. HubSpot 프로필 설정. 그런 다음 애플리케이션을 설정하고 사용자 정의할 수 있습니다.

  1. 방문하다 HubSpot 애플리케이션의 세부정보 페이지
  2. 누르다 사이트에 추가
  3. HubSpot 애플리케이션에 연결하려는 Webflow 사이트를 선택하세요.
  4. 요청된 권한을 검토하세요. 
  5. 수도꼭지 앱 승인
  6. HubSpot 계정을 선택하세요
  7. 수도꼭지 계정 선택
  8. 수도꼭지 앱 연결 —대시보드로 리디렉션됩니다.

중대한: HubSpot 애플리케이션을 전체 작업공간에 연결할 수 없습니다. 애플리케이션을 설치하고 허용할 때 애플리케이션과 통합하려는 특정 사이트를 선택했는지 확인하십시오. 

애플리케이션이 성공적으로 설치되면 Designer에서 해당 애플리케이션에 액세스할 수 있습니다.

  1. 열기 앱 패널 
  2. HubSpot 애플리케이션 위로 마우스를 가져가세요.
  3. 딸깍 하는 소리 시작하다

Designer에서 응용 프로그램을 활용하는 방법에 대해 자세히 알아보세요.

HubSpot 애플리케이션의 특징 및 기능

HubSpot 애플리케이션을 사용하면 마케팅 담당자와 사이트 소유자가 5가지 필수 기능을 포함하여 Webflow 사이트와 HubSpot 사이에 직접 연결을 설정할 수 있습니다.

  1. Webflow에 HubSpot 양식 포함 및 스타일 지정
  2. Webflow 양식을 HubSpot에 연결
  3. Webflow 사이트에 HubSpot 요소를 통합하세요
  4. 사이트 모니터링 처리
  5. HubSpot 챗봇을 Webflow 사이트에 통합하세요

Webflow에 HubSpot 양식 포함 및 사용자 정의

HubSpot 애플리케이션을 사용하면 디자이너 캔버스에 지원되는 HubSpot 양식을 삽입하여 사이트의 모양과 스타일에 따라 양식을 맞춤화할 수 있습니다. 양식을 삽입하려면: 

  1. HubSpot 애플리케이션 실행
  2. 딸깍 하는 소리 페이지에 기존 HubSpot 양식 추가 
  3. 양식을 포함하려는 캔버스의 위치를 선택합니다.
  4. 포함할 원하는 HubSpot 양식을 선택하세요(지원되는 경우)
  5. HubSpot의 양식 스타일을 채택할지 아니면 스타일이 적용되지 않은 버전을 활용할지 선택하세요.
  6. 딸깍 하는 소리 페이지에 양식 추가
  7. (선택사항) 원하는 대로 양식을 맞춤설정하세요.

HubSpot 양식 관리에 대해 자세히 알아보기

필수적인: reCAPTCHA 필드와 같은 일부 HubSpot 양식 필드는 HubSpot 개발자 플랫폼의 제한으로 인해 현재 지원되지 않습니다. 애플리케이션에서 양식을 삽입할 수 없다는 메시지가 표시되거나 iframe 솔루션을 선택한 경우 양식의 공유 URL (HubSpot에서 획득 가능) HubSpot 공유 URL 필드를 사용하여 양식을 iframe으로 삽입합니다. iframe을 통해 포함된 양식의 스타일을 지정하는 기능은 상실되지만 Hubspot 끝에서 변경된 사항을 반영하도록 자동으로 업데이트됩니다.

Webflow 양식을 HubSpot에 연결

또한 HubSpot 애플리케이션을 사용하여 기존 Webflow 양식을 HubSpot 계정에 연결할 수도 있습니다. 연결을 설정하려면: 

  1. HubSpot 애플리케이션 실행
  2. 딸깍 하는 소리 Webflow 양식을 HubSpot 양식으로 매핑 
  3. 매핑하려는 Webflow 캔버스에서 양식을 선택합니다.
  4. 선택한 양식에 양식 레이블이 포함되어 있는지 확인하세요.
  5. HubSpot 양식 필드를 해당하는 각 Webflow 양식 필드와 일치시킵니다.
  6. 딸깍 하는 소리 구하다

다음은 Webflow 및 HubSpot에서 호환되는 양식 필드 유형을 요약한 것입니다. 언급된 각 Webflow 형식 입력 유형에 대해 원활한 데이터 대응을 위한 관련 HubSpot 입력 유형을 찾을 수 있습니다. 이 가이드를 리소스로 사용하여 양식 매핑 절차를 간소화하세요.

Webflow 필드 유형해당 HubSpot 필드 유형
일반 텍스트)

  • 단일 행 텍스트
  • 여러 줄 텍스트
  • 날짜(YYYY-MM-DD)

이메일한 줄짜리 텍스트
핸드폰한 줄짜리 텍스트
숫자

  • 숫자
  • 한 줄짜리 텍스트
  • 여러 줄 텍스트

라디오 버튼라디오
Checkbox단일 checkbox
파일 업로드파일
텍스트 영역여러 줄 텍스트
선택하다쓰러지 다
알림: 애플리케이션은 HubSpot의 비밀번호 필드에 대한 매핑을 용이하게 하지 않습니다.

연결된 양식을 관리하는 기술

애플리케이션 메뉴를 실행하고 선택하여 연결을 수정하거나 페이지의 모든 양식에서 매핑을 분리할 수 있습니다. 연결된 형태

HubSpot 양식 관리에 대해 자세히 알아보기

참고하세요: 연결된 Webflow 양식 아래에 Webflow 양식이 나타나도록 하려면 해당 양식이 포함된 페이지에 액세스해야 합니다. 연결된 Webflow 양식에서 양식을 찾지 못한 경우 Webflow 페이지에서 올바른 위치에 있는지 확인하십시오.

Webflow 사이트에 HubSpot 리소스를 포함하세요.

HubSpot 애플리케이션을 사용하면 HubSpot 계정의 모든 리소스를 탐색하고 Webflow 사이트에 통합할 수 있습니다. 시작하기: 

  1. HubSpot 애플리케이션 시작
  2. 누르다 HubSpot 리소스를 사이트에 통합
  3. 가져오고 싶은 리소스를 문의하고 선택하세요.
  4. 리소스를 포함할 캔버스의 구성 요소를 선택하세요.
  5. 누르다 페이지에 포함

HubSpot 자산 관리에 대해 자세히 알아보기.

메모: 애플리케이션을 통해 HubSpot 자산에서 Webflow 사이트에 소개된 자산은 Webflow 자산 섹션에 추가되지 않습니다.

웹사이트 추적 감독

고유한 HubSpot 추적 코드는 각 HubSpot 계정마다 다르며 HubSpot가 귀하의 웹사이트 트래픽을 관찰할 수 있도록 해줍니다. 웹사이트 추적을 제어하려면:

  1. HubSpot 애플리케이션 시작
  2. 누르다 웹사이트 추적 감독
  3. 스위치 HubSpot 사이트 추적 코드 활성화 에게 ~에
  4. 누르다 구하다

추적이 작동하는지 확인하려면 사이트를 게시해야 합니다.

HubSpot의 추적 코드에 대해 더 많은 통찰력을 얻으세요.

메모: HubSpot 추적 코드가 활성화되면 HubSpot는 사이트 전체의 모든 양식 제출을 자동으로 모니터링하고(양식이 HubSpot에 연결되지 않은 경우에도) Webflow 양식 ID를 사용하여 새 양식에 저장합니다. 이를 원하지 않는 경우 다음을 수행할 수 있습니다. HubSpot 계정 설정에서 이 기능을 끄세요.

Webflow 사이트에 HubSpot 챗봇 통합

또한 이 애플리케이션은 사용자 정의 코드를 사용하여 Webflow 사이트에 HubSpot 챗봇을 추가하기 위한 체계적인 지침을 제공합니다. 

메모: 사용자 정의 코드 용량은 모든 프리미엄 사이트 플랜과 Core, Growth, Agency 및 Freelancer Workspace 플랜에서 액세스할 수 있습니다.

시작하려면:

  1. HubSpot 애플리케이션 시작
  2. 누르다 사이트에 HubSpot 챗봇 추가
  3. 누르다 HubSpot 챗봇 라이브러리 보기 다양한 HubSpot 챗봇을 검사하고 수정하려면
  4. HubSpot 추적 코드가 활성화되어 있는지 확인하세요
  5. 사이트 게시 

HubSpot 챗봇 설정 및 구성에 대해 자세히 알아보세요..

HubSpot 애플리케이션을 삭제하는 방법

Webflow 사이트에서 HubSpot 애플리케이션을 제거하는 방법에는 사이트 설정 또는 디자이너 두 가지가 있습니다.

사이트 설정을 통해 애플리케이션을 제거하려면:

  1. 이동 사이트 설정 > 앱 &통합 탭 > 연결된 앱
  2. HubSpot를 찾으세요
  3. 누르다 세부 정보보기 
  4. 누르다 앱 지우기

Designer를 통해 제거하려면:

  1. 열기 애플리케이션 패널
  2. HubSpot를 누르세요.
  3. 누르다 앱 삭제 

FAQ 및 해결 방법 힌트

HubSpot 애플리케이션이 열려 있지만 데이터 로딩이 없습니다.

입장 사이트 설정 > 애플리케이션 및 통합 탭을 클릭하고 HubSpot 애플리케이션이 설치된 앱으로 나열되어 있는지 확인하세요. 결석한 경우, HubSpot 애플리케이션 세부정보 페이지를 방문하세요. 사이트에 애플리케이션을 다시 설치하세요. HubSpot가 있는 경우 애플리케이션 패널, HubSpot 애플리케이션을 실행하고 연결 관리 Webflow 사이트에 연결된 모든 HubSpot 계정을 보려면

애플리케이션을 통해 HubSpot 양식을 삽입했지만 제출물이 HubSpot로 정확하게 전송되지 않습니다.

삽입하다 양식의 공유 URL (HubSpot에서 접근 가능) HubSpot 공유 URL 필드를 사용하여 양식을 iframe으로 삽입하고 문제가 계속되는지 확인합니다. 그렇다면 제발 Webflow 고객 지원팀에 연락하세요 추가 안내를 위해.

HubSpot 양식을 수정했지만 업데이트가 Webflow 사이트에 자동으로 반영되지 않습니다.

HubSpot 양식을 수정한 후 디자이너에서 애플리케이션을 시작하고 기존 HubSpot 양식을 수정된 양식으로 대체할 수 있습니다. HubSpot와 Webflow 간의 변경 사항을 즉시 동기화하려면 양식에 iframe으로 삽입할 공유 URL을 사용하는 것이 좋습니다.

신청서를 사용하여 Webflow 양식을 HubSpot에 연결했지만 제출물이 표시되지 않습니다.

Webflow 양식 필드에 필드 지정이 포함되어 있는지 확인하십시오. 명칭이 포함된 경우, Webflow 고객 지원팀에 문의하세요 추가 지원을 위해.

각 Webflow 사이트에 어떤 HubSpot 계정이 연결되어 있는지 어떻게 확인할 수 있나요?

입장 사이트 설정 > 애플리케이션 및 통합 탭을 클릭하고 HubSpot 애플리케이션이 설치된 앱으로 인식되는지 확인하세요. 누락된 경우, HubSpot 애플리케이션 세부정보 페이지를 방문하세요. 사이트에 애플리케이션을 다시 설치하세요. HubSpot가 포함된 경우 애플리케이션 패널, HubSpot 애플리케이션을 실행하고 연결 관리 Webflow 사이트에 연결된 모든 HubSpot 계정을 보려면 

애플리케이션을 통해 HubSpot 양식을 삽입했지만 특정 필드나 로직이 전달되지 않습니다.

양식에 대한 공유 URL을 입력하고 애플리케이션을 사용하여 이를 iframe으로 포함하거나 양식을 사용자 정의 코드 포함 요소로 포함하는 것이 좋습니다.

내 HubSpot 리소스의 자산을 내 사이트에 통합했지만 이미지가 내 Webflow 자산 패널에 표시되지 않습니다.

애플리케이션을 사용하여 HubSpot 리소스에서 Webflow 사이트에 도입된 자산은 Webflow 자산 패널을 자동으로 채우지 않습니다.

HubSpot 애플리케이션 사용에 여전히 문제가 있는 경우 다음을 수행하십시오. Webflow 고객 지원팀에 연락하세요.

이완 막
Ewan Mak의 최신 게시물 (모두 보기)