Cartões

Um cartão representa um único fornecedor (por exemplo, hotel ou fornecedor de experiências) ou inventário (ou seja, tipo de quarto, sala de reuniões, spa, etc.) e apresenta os detalhes através de uma interface interativa e reservável. Um utilizador pode interagir com um cartão das seguintes formas:

Clicar no botão Reservar.
Clicar no link Galeria para ver todas as fotos e vídeos deste inventário.
Clicar no link Melhor oferta, se disponível, para ver o quarto com o melhor preço.
Clicar no link Detalhes do hotel, 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-os facilmente consumíveis pelo utilizador e dando-lhe uma maior hipótese de converter o utilizador numa reserva.

Um cartão tem duas ou três faces:

Um cartão de hotel mostra 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.
Um cartão de tipo de quarto mostra dados do tipo de quarto na frente e 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: Dados do spa exibidos na página da frente com o melhor preço do spa. Dados do tipo de quarto para o quarto com melhor preço estão no segundo lado. Dados da propriedade juntamente com o quarto com melhor preço estão na terceira face do cartão.

Pré-visualização do cartão — *Cartão de tipo de quarto virado para a frente com disponibilidade*

Acima está um exemplo do nosso cartão de tipo de quarto. Contém dados da propriedade, avaliações e do quarto, juntamente com a política de cancelamento e refeições.

O resto deste artigo explica como criar, personalizar e apresentar o cartão aos seus utilizadores.

Criar um cartão

Acima está uma imagem retirada de Pesquisa que mostra algumas das coisas que pode fazer com os seus resultados de pesquisa. Uma dessas ações é Criar um cartão. Clique nesse botão e será redirecionado para a nossa página de formulário de cartão onde pode começar a personalizar o seu cartão.

Personalizar cartão

O formulário permite-lhe personalizar o seu cartão das seguintes formas:

Dê-lhe um nome para se lembrar do que se trata o cartão.
Selecione a Personalização que quer aplicar a este cartão.
Selecione a face inicial do cartão que quer que os utilizadores vejam primeiro. Por defeito, é a face nativa desse inventário.
Selecione o distintivo que quer usar no cartão. Um distintivo permite aos utilizadores comparar inventário com base numa métrica agregada, como eco-friendly.
Adicione palavras-chave, separadas por vírgulas, que serão usadas por Web Crawlers.
Adicione títulos e descrições nas línguas que quer que o utilizador veja.
Selecione uma ou mais imagens que serão mostradas quando os utilizadores clicarem no link Galeria.
Clique no botão Guardar para continuar.

Depois de guardar o seu cartão, será redirecionado para a sua página de cartões e o seu cartão estará agora pronto para ser partilhado com o mundo.

Partilhar cartão

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

Atualizar Atualiza a configuração do seu cartão.
Adicionar ao WinkLinks Adiciona o cartão à sua conta WinkLinks.
Incorporar Mostra como incorporar este cartão como um Card no seu site.
Usar com WordPress Mostra como usar o nosso plugin WordPress para incorporar este cartão no seu site.

Cobrimos algumas destas opções, com mais detalhe, 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>

Aqui está como incorporar o seu cartão no seu site:

A linha 3 mostra como incorporar os estilos Wink no seu site.
As linhas 6 a 9 mostram como usar o wink-content-loader Web Component e indicar que deve buscar um cartão de quarto para convidados para o seu código.
A linha 11 mostra como incorporar o nosso Javascript no seu site.
A linha 13 mostra como incorporar o wink-app-loader Web Component e indicar que deve buscar as suas preferências de configuração a nível de página.

API

Os desenvolvedores que querem gerir cartões podem aceder a Developers > API > Inventory.

Leitura adicional

Saiba mais sobre a nossa coleção de Web Components.
Saiba mais sobre o plugin WordPress Wink.