Webflow 웹사이트에 Eventbrite 주문 처리를 삽입하세요.

내장된 Eventbrite 체크아웃을 통해 사이트 방문자가 이벤트에 등록할 수 있게 하세요.
중요한: 이 가이드에서는 Webflow의 통합 기능을 사용하여 사용자 정의 코드를 삽입합니다. 통합 기능은 모든 유료 사이트 플랜과 Core, Growth, Agency 및 Freelancer Workspace 플랜에서 액세스할 수 있습니다. 

이 튜토리얼에서는 다음을 알아봅니다. 

  1. Eventbrite에서 통합 코드를 검색하는 방법
  2. Webflow 웹사이트에 대화형 Eventbrite 주문 처리를 통합하는 방법

Eventbrite에서 통합 코드 받기

시작하기 전에: 아직 완료되지 않은 경우, Eventbrite 이벤트 설정. 또한 이벤트 ID를 저장하고 조정할 수 있는 Webflow CMS에서 컬렉션을 생성해야 합니다.

Eventbrite에서 이벤트 ID와 통합 코드를 얻으려면: 

  1. 귀하의 이벤트 
  2. 주문 처리 위젯을 삽입하려는 이벤트를 선택하세요.
  3. 다음으로 이동하세요. 마케팅 메뉴 > 임베디드 주문 처리
  4. 다음을 선택하세요. 주문 처리 모습 웹사이트에 선호하는 것(예: 페이지 위에 모달 창을 표시하는 버튼 또는 페이지 콘텐츠 내에 통합된 버튼)
  5. 클릭 코드 복사 통합 코드를 복사하려면

Webflow 웹사이트에 대화형 Eventbrite 주문 처리 통합

Eventbrite에서 통합 코드를 가져와 웹사이트 어디든 통합 요소에 붙여넣을 수 있는 옵션이 있습니다. 그러나 포함된 주문 처리는 정적으로 유지되므로(즉, 변경되지 않음) 통합 코드를 수동으로 업데이트해야 합니다. 다른 이벤트에 대한 주문 처리를 삽입하려고 할 때마다. 이 접근 방식은 단일 이벤트에 대한 Eventbrite 순서 처리만 포함하려는 경우 적합할 수 있지만 여러 이벤트를 처리하는 경우에는 적합하지 않습니다.

여기에서는 귀하의 사이트에 대화형 Eventbrite 주문 처리를 통합하는 방법을 배우게 됩니다. Webflow CMS 및 동적 통합을 활용하여 CMS 컬렉션의 모든 이벤트에 대해 반복되는 주문 처리 레이아웃을 디자인할 수 있습니다. 

이는 3단계로 구분됩니다. 

  1. 이벤트 ID에 대한 컬렉션 필드 설정 
  2. 동적 통합 설정 
  3. CMS의 이벤트에 이벤트 ID를 포함하세요.
중요한: CMS 컬렉션(예: "이벤트", "모임" 등)을 설정하고 이벤트에 대한 이벤트 컬렉션 항목을 1개 이상 생성했는지 확인하세요. CMS는 컬렉션 구성을 안내하는 이벤트 템플릿도 제공합니다.

이벤트 ID에 대한 컬렉션 필드 설정 

처음에는 Eventbrite 이벤트 ID(즉, Eventbrite 통합을 위한 고유 식별자)를 저장하기 위해 CMS 컬렉션 필드를 설정해야 합니다. 

  1. 열기 CMS 패널
  2. 이벤트 컬렉션 위로 마우스를 가져간 후 설정 "을 탭하세요.장부" 아이콘이 나타납니다. 
  3. 선택하다 새 필드 추가
  4. 선택하다 일반 텍스트
  5. 필드에 라벨을 할당하세요(예: 'Eventbrite 이벤트 ID') 
  6. 클릭 필드 저장

동적 통합 설정

동적 통합은 동적 콘텐츠에 대해서만 작동합니다. 이는 컬렉션 페이지 또는 정적 페이지의 컬렉션 목록 내에서만 첨부할 수 있음을 의미합니다. 이벤트 컬렉션을 참조하고 있으므로 이벤트 컬렉션과 관련된 컬렉션 페이지에 통합을 연결하거나 컬렉션 목록을 이벤트 컬렉션에 연결해야 합니다. 

동적 통합을 설정하려면 다음 안내를 따르세요.

  1. 다음으로 진행하세요. 패널 추가 > 고급의
  2. 삽입 완성 캔버스에 대한 요소
  3. 코드 편집기에 Eventbrite 통합 코드를 붙여넣으세요.
  4. 찾기 이벤트 ID 통합 코드에서 작은따옴표 사이의 ID 번호(예: 681294671627)를 선택하세요. 
  5. ID 번호를 복사하고 강조표시 상태로 유지하세요.
  6. 탭하세요 필드 추가
  7. 이벤트 ID(예: "Eventbrite 이벤트 ID")에 대해 생성한 컬렉션 필드를 선택하세요.
  8. 선택하다 저장하고 닫기 

Webflow HTML 삽입 코드 편집기의 Eventbrite 사용자 정의 코드. eventId는 따옴표 사이에 강조 표시됩니다. 
이벤트 ID를 강조표시하여 동적 컬렉션 필드로 바꾸세요. 
Webflow HTML 삽입 코드 편집기의 Eventbrite 사용자 정의 코드. eventId는 "Eventbrite 이벤트 ID" 컬렉션 필드로 대체됩니다. 
정적 이벤트 ID가 컬렉션 필드로 대체되면 Eventbrite 통합이 컬렉션의 각 이벤트에 대해 업데이트됩니다. 

CMS의 이벤트에 이벤트 ID를 포함하세요. 

마지막으로 이벤트 ID를 이벤트에 통합하세요. 

  1. 액세스 CMS 패널 > 이벤트 컬렉션 (또는 컬렉션에 대해 선택한 이름) 
  2. 이벤트 컬렉션 아이템을 선택하세요 
  3. 통합 코드의 ID 번호(예: 681294671627)를 이벤트 ID(예: "Eventbrite 이벤트 ID")로 지정한 컬렉션 필드에 붙여넣습니다.
  4. 클릭 구하다

대화형 주문 처리를 포함하려는 이벤트에 대해 다음 단계를 수행할 수 있습니다. Eventbrite 통합 코드에서 ID를 복사하여 각 컬렉션 항목의 이벤트 ID 컬렉션 필드에 추가하세요. 

준비가 완료되면 웹 사이트를 게시하여 새로 통합된 Eventbrite 주문 처리 과정을 경험해 보세요. 

전문적인 힌트: 컬렉션 페이지 및 컬렉션 목록 내에서 조건부 표시 여부를 적용하여 이벤트 ID가 없는 이벤트에 대한 통합 주문 처리를 숨길 수 있습니다. 
중요한: Eventbrite 주문 처리는 Designer 캔버스에 표시되지 않습니다. 즉, Designer에서 처리를 미리 볼 수 없으며 자리 표시자가 대신 표시됩니다. 웹 사이트를 게시하거나 내보낸 후에는 해당 웹 사이트를 배치한 위치에서 처리 과정이 표시됩니다. 사용자 정의 도메인에서 웹사이트를 시작하기 전에 처리 과정을 미리 봐야 하는 경우 webflow.io 스테이징 하위 도메인에 사이트를 게시할 수 있습니다. 
이완 막
Ewan Mak의 최신 게시물 (모두 보기)