콘텐츠로 이동

HubSpot CMS

HubSpot CMS는 맞춤 HTML 모듈과 사이트 전체 헤더/푸터 코드를 지원하여 마케팅 페이지와 랜딩 페이지에 Wink 컴포넌트를 쉽게 임베드할 수 있습니다.

Wink 스크립트를 사이트 전체에 로드하기

HubSpot에서 Marketing → Files and Templates → Design Tools로 이동합니다.
활성 테마의 main.css를 열거나 전역 콘텐츠 설정을 사용합니다.
또는 Settings → Website → Pages → Custom Code로 이동합니다.

Head HTML 필드에 스타일시트를 추가합니다:

<link rel="stylesheet" href="https://elements.wink.travel/styles.css">

Footer HTML 필드에 스크립트와 애플리케이션 로더를 추가합니다 (YOUR_CLIENT_ID를 교체하세요):

<script src="https://elements.wink.travel/elements.js" type="module" defer></script>
<wink-app-loader client-id="YOUR_CLIENT_ID"></wink-app-loader>

저장하고 게시합니다.

맞춤 HTML 모듈로 컴포넌트 추가하기

Design Tools에서 Rich Text 또는 HTML 유형의 새 모듈을 만듭니다.

모듈 기본 콘텐츠에 컴포넌트 HTML을 붙여넣습니다:

<wink-content-loader
  layout="HOTEL"
  id="YOUR_LAYOUT_ID"
></wink-content-loader>

모듈을 저장하고 페이지 템플릿이나 페이지 편집기에서 원하는 위치로 드래그합니다.

페이지 편집기에서 직접 컴포넌트 추가하기

모듈을 만들지 않고 싶다면 드래그 앤 드롭 편집기의 Custom HTML 섹션을 사용할 수 있습니다:

HubSpot 페이지 편집기에서 페이지를 엽니다.
Add를 클릭하고 Custom HTML 또는 Embed 섹션을 선택합니다.
HTML 필드에 컴포넌트 태그를 붙여넣습니다.
Apply를 클릭하고 페이지를 게시합니다.

사용 가능한 컴포넌트

컴포넌트	HTML 태그	용도
Content loader	`<wink-content-loader>`	호텔 카드, 그리드, 지도 표시
Lookup	`<wink-lookup>`	목적지 검색 바
Search button	`<wink-search-button>`	여행 일정 선택기 열기
Account button	`<wink-account-button>`	로그인 / 사용자 메뉴
Itinerary button	`<wink-itinerary-button>`	현재 여행 일정 표시
Itinerary picker	`<wink-itinerary-picker>`	전체 여행 일정 폼
Shopping cart	`<wink-shopping-cart-button>`	장바구니 요약 버튼

전체 속성 참조는 Web Components에서 확인하세요.

추가 자료