카드

카드는 단일 공급업체(예: 호텔 또는 체험 제공자) 또는 재고(즉, 객실 유형, 회의실, 스파 등)를 나타내며, 인터랙티브하고 예약 가능한 카드 UI를 통해 세부 정보를 제공합니다. 사용자는 다음과 같은 방법으로 카드와 상호작용할 수 있습니다:

Book 버튼을 클릭합니다.
Gallery 링크를 클릭하여 이 재고의 모든 사진과 비디오를 봅니다.
가능하면 Best deal 링크를 클릭하여 최저가 객실을 확인합니다.
가능하면 Hotel details 링크를 클릭하여 숙소 정보를 확인합니다.

카드는 카드 크기를 최소화하고 데이터를 분류하기 위해 여러 면을 지원합니다; 사용자가 쉽게 소비할 수 있도록 하여 예약 전환 가능성을 높입니다.

카드는 두 개 또는 세 개의 면을 가집니다:

호텔 카드는 앞면에 숙소 데이터를, 뒷면에 최적 객실 유형을 표시합니다. 양면 모두 가격은 호텔의 최저가를 보여줍니다.
객실 유형 카드는 앞면에 객실 유형 데이터를, 뒷면에 숙소 데이터를 표시합니다. 앞면에는 객실 유형 가격이, 뒷면에는 호텔 최저가가 표시됩니다.
기타 모든 카드(예: 스파, 레스토랑 등)는 3면을 가집니다. 예: 스파 데이터가 앞면에 최저가와 함께 표시되고, 두 번째 면에는 최저가 객실 유형 데이터가, 세 번째 면에는 숙소 데이터와 최저가 객실이 표시됩니다.

위는 객실 유형 카드의 예시입니다. 숙소, 리뷰, 객실 데이터와 취소 정책 및 식사가 포함되어 있습니다.

이후 문서에서는 카드를 생성, 맞춤 설정하고 사용자에게 노출하는 방법을 안내합니다.

카드 생성

위 이미지는 Search에서 가져온 것으로, 검색 결과에서 할 수 있는 작업 중 일부를 보여줍니다. 그 중 하나가 Make a card입니다. 해당 버튼을 클릭하면 카드 양식 페이지로 이동하여 카드를 맞춤 설정할 수 있습니다.

카드 맞춤 설정

양식에서는 다음과 같이 카드를 맞춤 설정할 수 있습니다:

카드가 무엇인지 기억할 수 있도록 이름을 지정합니다.
이 카드에 적용할 Customization을 선택합니다.
사용자가 처음 보게 될 초기 카드 면을 선택합니다. 기본값은 해당 재고의 기본 면입니다.
카드에 사용할 배지를 선택합니다. 배지는 사용자가 eco-friendly와 같은 집계 지표로 재고를 비교할 수 있게 합니다.
쉼표로 구분된 키워드를 추가합니다. 이 키워드는 웹 크롤러에서 사용됩니다.
사용자가 보게 될 언어로 제목과 설명을 추가합니다.
사용자가 Gallery 링크를 클릭할 때 표시할 하나 이상의 이미지를 선택합니다.
Save 버튼을 클릭하여 계속 진행합니다.

카드를 저장하면 카드 페이지로 리디렉션되며, 이제 카드를 전 세계와 공유할 준비가 완료됩니다.

카드 공유

위 이미지는 카드에 사용할 수 있는 모든 작업을 보여줍니다:

Update 카드 구성을 업데이트합니다.
Add to WinkLinks 카드를 WinkLinks 계정에 추가합니다.
Embed 이 카드를 Card로 웹사이트에 임베드하는 방법을 보여줍니다.
Use with WordPress WordPress 플러그인을 사용하여 이 카드를 웹사이트에 임베드하는 방법을 보여줍니다.

아래에서 이 옵션들 중 일부를 자세히 다룹니다.

임베드

<html>
  <head>
    <link rel="stylesheet" href="https://elements.wink.travel/styles.css"></link>
  </head>
  <body>
    <wink-content-loader
       layout="GUEST_ROOM"
       id="2de7ee9c-61c9-11ef-9722-42004e494300"
    ></wink-content-loader>

    <script src="https://elements.wink.travel/elements.js" type="module" defer></script>

    <wink-app-loader
      client-id="YOUR CLIENT ID GOES HERE"
      configuration-id="YOUR CUSTOMIZATION ID GOES HERE"
    ></wink-app-loader>
  </body>
</html>

사이트에 카드를 임베드하는 방법은 다음과 같습니다:

3번째 줄은 Wink 스타일을 사이트에 임베드하는 방법을 보여줍니다.
6~9번째 줄은 wink-content-loader 웹 컴포넌트를 사용하여 게스트룸 카드를 불러오는 방법을 보여줍니다.
11번째 줄은 자바스크립트를 사이트에 임베드하는 방법을 보여줍니다.
13번째 줄은 wink-app-loader 웹 컴포넌트를 임베드하여 페이지 수준 구성 설정을 불러오는 방법을 보여줍니다.

API

카드를 관리하려는 개발자는 Developers > API > Inventory로 이동하세요.

추가 자료

Web Components 모음에 대해 자세히 알아보세요.
Wink WordPress 플러그인에 대해 자세히 알아보세요.