Cards

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

클릭Book버튼.
클릭Gallery이 재고에 대한 모든 사진과 비디오를 보려면 링크를 클릭하세요.
클릭Best deal가능한 경우 링크를 클릭하여 가장 저렴한 객실을 확인해 보세요.
클릭Hotel details가능한 경우 링크를 클릭하여 부동산 정보를 확인하세요.

카드는 여러 면을 지원하여 카드 크기를 최소화하고 데이터를 분류할 수 있습니다. 이를 통해 사용자가 카드를 쉽게 사용할 수 있고 사용자를 예약으로 전환할 가능성이 더 높아집니다.

카드에는 두 면 또는 세 면이 있습니다.

호텔 카드는 앞면에 호텔 정보를, 뒷면에는 최적의 객실 유형을 표시합니다. 가격은 양면에 표시되어 호텔의 최적 가격을 보여줍니다.
객실 유형 카드는 앞면에 객실 유형 정보를, 뒷면에 호텔 정보를 표시합니다. 가격 카드는 앞면에 객실 유형별 가격을, 뒷면에는 해당 호텔의 최저 가격을 표시합니다.
다른 모든 카드(예: 스파 레스토랑 등)는 3면으로 되어 있습니다. 예를 들어, 스파 데이터는 첫 페이지에 최저 가격과 함께 표시됩니다. 최저 가격 객실의 객실 유형 정보는 두 번째 면에 표시됩니다. 부동산 정보와 최저 가격 객실은 세 번째 카드 면에 표시됩니다.

위는 저희 객실 유형 카드 예시입니다. 숙소, 이용 후기, 객실 정보, 취소 정책, 식사 정보가 포함되어 있습니다.

이 문서의 나머지 부분에서는 카드를 만들고, 사용자 지정하고, 사용자에게 노출하는 방법을 안내합니다.

카드 만들기

위는 에서 가져온 이미지입니다.찾다검색 결과를 활용하여 수행할 수 있는 몇 가지 작업을 보여드립니다. 이러한 작업 중 하나는 다음과 같습니다.Make a card. 해당 버튼을 클릭하면 카드 양식 페이지로 이동하여 카드를 맞춤 설정할 수 있습니다.

카드 사용자 정의

이 양식을 사용하면 다음과 같은 방법으로 카드를 사용자 지정할 수 있습니다.

카드의 내용을 기억할 수 있도록 이름을 지어주세요.
선택하세요 사용자 정의 이 카드에 신청하고 싶습니다.
사용자에게 가장 먼저 보여줄 카드 페이스를 선택하세요. 기본적으로 해당 인벤토리의 기본 페이스입니다.
선택하세요 badge 카드에 사용하려는 배지를 사용하면 사용자가 다음과 같은 집계 지표를 기준으로 재고를 비교할 수 있습니다. eco-friendly.
쉼표로 구분된 키워드를 추가하세요. 웹 크롤러.
사용자에게 보여주고 싶은 언어로 제목과 설명을 추가하세요.
사용자가 클릭할 때 표시될 하나 이상의 이미지를 선택하십시오. Gallery 링크.
클릭 Save 계속하려면 버튼을 클릭하세요.

카드를 저장한 후에는 카드 페이지로 이동하게 되며, 이제 카드를 전 세계와 공유할 수 있습니다.

카드 공유

위에는 카드에 사용 가능한 모든 작업이 표시된 이미지가 나와 있습니다.

업데이트카드 구성을 업데이트합니다.
WinkLinks에 추가카드를 WinkLinks 계정에 추가합니다.
포함시키다이 카드를 삽입하는 방법을 보여줍니다.카드귀하의 웹사이트에.
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번째 줄에서는 다음을 사용하는 방법을 보여줍니다.윙크-컨텐츠-로더웹 구성 요소를 사용하여 코드에 맞는 객실 카드를 가져오도록 합니다.
11번째 줄에서는 Javascript를 사이트에 내장하는 방법을 보여줍니다.
13번째 줄에서는 다음을 포함하는 방법을 보여줍니다.윙크 앱 로더웹 구성 요소를 가져와서 페이지 수준 구성 기본 설정을 가져오도록 합니다.

API

카드를 관리하고 싶은 개발자는 다음으로 이동할 수 있습니다.개발자 > API > 인벤토리.

추가 읽기

우리의 컬렉션에 대해 자세히 알아보세요웹 구성 요소.
자세히 알아보세요윙크 워드프레스 플러그인.