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”카드를 관리하고 싶은 개발자는 다음으로 이동할 수 있습니다.개발자 > API > 인벤토리.
추가 읽기
섹션 제목: “추가 읽기”- 우리의 컬렉션에 대해 자세히 알아보세요웹 구성 요소.
- 자세히 알아보세요윙크 워드프레스 플러그인.