Cards

Um cartão representa um único fornecedor (por exemplo, hotel ou provedor de experiências) ou inventário (por exemplo, tipo de quarto, sala de reunião, spa etc.) e expõe os detalhes por meio de uma interface de usuário interativa e reservável. Um usuário pode interagir com um cartão das seguintes maneiras:

Clique noBook botão.
Clique noGallerylink para ver todas as fotos e vídeos deste inventário.
CliqueBest deallink, se disponível, para ver o quarto com o melhor preço.
CliqueHotel detailslink, se disponível, para ver informações da propriedade.

Um cartão suporta múltiplas faces para minimizar o tamanho do cartão e categorizar os dados, tornando-o facilmente consumível pelo usuário e dando a você uma chance maior de converter o usuário em uma reserva.

Uma carta tem duas ou três faces:

O cartão de hotel exibe os dados da propriedade na frente e o melhor tipo de quarto no verso. O preço, em ambos os lados, exibe o melhor preço para o hotel.
O cartão de tipo de quarto exibe os dados do tipo de quarto na frente e os dados da propriedade no verso. O preço exibe o preço do tipo de quarto na frente e o melhor preço para o hotel no verso.
Todos os outros cartões (por exemplo, spa, restaurante etc.) têm 3 faces. Exemplo: os dados do spa são exibidos na página inicial com o melhor preço. Os dados do tipo de quarto, referentes ao quarto com o melhor preço, estão no segundo lado. Os dados da propriedade, juntamente com o quarto com o melhor preço, estão na terceira face do cartão.

Prévia do cartão — *Cartão tipo quarto de frente com disponibilidade*

Acima, um exemplo do nosso cartão de tipo de quarto. Ele contém dados da propriedade, avaliações e do quarto, além da política de cancelamento e refeições.

O restante deste artigo explica como criar, personalizar e expor o cartão aos seus usuários.

Criar um cartão

Acima está uma imagem tirada de Procurar e mostra algumas coisas que você pode fazer com os resultados da sua pesquisa. Uma dessas ações éMake a card. Clique nesse botão e você será redirecionado para nossa página de formulário de cartão, onde poderá começar a personalizá-lo.

Personalizar cartão

O formulário permite que você personalize seu cartão das seguintes maneiras:

Dê um nome para que você possa lembrar do que se trata o card.
Selecione o Personalização que você deseja aplicar a este cartão.
Selecione a face inicial da carta que você deseja que os usuários vejam primeiro. Por padrão, é a face nativa do inventário.
Selecione o badge que você deseja usar no cartão. Um emblema permite que os usuários comparem o estoque com base em uma métrica agregada, como eco-friendly.
Adicione palavras-chave, separadas por vírgula, que serão usadas por Rastreadores da Web.
Adicione títulos e descrições nos idiomas que você deseja que o usuário veja.
Selecione uma ou mais imagens que serão exibidas quando os usuários clicarem nelas. Gallery link.
Clique no Save botão para continuar.

Depois de salvar seu cartão, você será redirecionado para sua página de cartões e seu cartão estará pronto para ser compartilhado com o mundo.

Cartão de compartilhamento

Acima mostra uma imagem com todas as ações disponíveis para seu cartão:

AtualizarAtualiza a configuração do seu cartão.
Adicionar ao WinkLinksAdiciona o cartão à sua conta WinkLinks.
IncorporarMostra como incorporar este cartão como um Cartão no seu site.
Usar com WordPressMostra como usar nosso Plugin do WordPress para incorporar este cartão em seu site.

Abordaremos algumas dessas opções com mais detalhes abaixo.

Incorporar

<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>

Veja como incorporar seu cartão em seu site:

A linha 3 mostra como incorporar os estilos Wink no seu site.
As linhas 6 a 9 mostram como usar o carregador de conteúdo piscante Componente Web e diga para ele buscar um cartão de quarto de hóspedes para seu código.
A linha 11 mostra como incorporar nosso Javascript em seu site.
A linha 13 mostra como incorporar o carregador de aplicativo wink Componente Web e peça para ele buscar suas preferências de configuração no nível da página.

API

Os desenvolvedores que desejam gerenciar cartões podem acessarDesenvolvedores > API > Inventário.

Leitura adicional

Saiba mais sobre nossa coleção deComponentes da Web.
Saiba mais sobre oPlugin Wink para WordPress.