콘텐츠로 이동
Wink

Squarespace

Squarespace는 맞춤 HTML 및 JavaScript를 지원하므로 플러그인 없이도 Wink 웹 컴포넌트를 사이트에 직접 임베드할 수 있습니다. 이 가이드는 Wink 스크립트를 사이트 전체에 로드한 후 개별 페이지에 컴포넌트를 배치하는 방법을 보여줍니다.

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

섹션 제목: “Wink 스크립트를 사이트 전체에 로드하기”

스크립트를 사이트의 전역 푸터와 헤더에 추가하면 설정을 반복하지 않고도 모든 페이지에서 Wink를 사용할 수 있습니다.

  1. Squarespace 편집기에서 설정 → 고급 → Code Injection으로 이동합니다.
  2. 헤더 필드에 스타일시트를 추가합니다: 
    <link rel="stylesheet" href="https://elements.wink.travel/styles.css">
  3. 푸터 필드에 스크립트와 애플리케이션 로더를 추가합니다 (YOUR_CLIENT_ID를 Wink 클라이언트 ID로 교체): 
    <script src="https://elements.wink.travel/elements.js" type="module" defer></script>
    <wink-app-loader client-id="YOUR_CLIENT_ID"></wink-app-loader>
  4. 저장을 클릭합니다.

페이지에 컴포넌트 추가하기

섹션 제목: “페이지에 컴포넌트 추가하기”

스크립트가 전역으로 로드된 후에는 코드 블록을 사용하여 원하는 페이지에 Wink 컴포넌트를 추가할 수 있습니다.

  1. 편집할 페이지를 엽니다.
  2. 편집을 클릭하고 컴포넌트를 표시할 위치에 새 코드 블록을 추가합니다.
  3. 예를 들어 콘텐츠 로더 HTML을 붙여넣습니다: 
    <wink-content-loader
      layout="HOTEL"
      id="YOUR_LAYOUT_ID"
    ></wink-content-loader>
  4. 적용을 클릭한 다음 저장합니다.

사용 가능한 컴포넌트

섹션 제목: “사용 가능한 컴포넌트”
컴포넌트HTML 태그용도
콘텐츠 로더<wink-content-loader>호텔 카드, 그리드, 지도 표시
조회<wink-lookup>목적지 검색 바
검색 버튼<wink-search-button>일정 선택기 열기
계정 버튼<wink-account-button>로그인 / 사용자 메뉴
일정 버튼<wink-itinerary-button>현재 일정 표시
일정 선택기<wink-itinerary-picker>전체 일정 양식
쇼핑 카트<wink-shopping-cart-button>카트 요약 버튼

각 컴포넌트의 전체 속성 참조는 Web Components에서 확인하세요.

추가 자료

섹션 제목: “추가 자료”