Cartões

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

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 usuário e dando a você uma maior chance de converter o usuário em uma 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 valor 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 frontal 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 junto com o quarto com melhor preço estão na terceira face do cartão.

Visualização do cartão — *Cartão de tipo de quarto com disponibilidade na face frontal*

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

O restante deste artigo orienta você sobre como criar, personalizar e expor o cartão para seus usuários.

Criar um cartão

Acima está uma imagem retirada da Busca que mostra algumas das coisas que você pode fazer com seus resultados de busca. Uma dessas ações é Criar um cartão. Clique nesse botão e ele redirecionará você para a página do formulário de cartão, onde poderá começar a personalizar seu cartão.

Personalizar cartão

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

Dê um nome para lembrar do que se trata o cartão.
Selecione a Personalização que deseja aplicar a este cartão.
Selecione a face inicial do cartão que deseja que os usuários vejam primeiro. Por padrão, é a face nativa daquele inventário.
Selecione o distintivo que deseja usar no cartão. Um distintivo permite que os usuários comparem inventários com base em uma métrica agregada, como ecológico.
Adicione palavras-chave, separadas por vírgula, que serão usadas por Web Crawlers.
Adicione títulos e descrições nos idiomas que deseja que o usuário veja.
Selecione uma ou mais imagens que serão exibidas quando os usuários clicarem no link Galeria.
Clique no botão Salvar para continuar.

Após 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.

Compartilhar cartão

Acima mostra uma imagem com todas as ações disponíveis para 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 Cartão em seu site.
Usar com WordPress Mostra como usar nosso plugin WordPress para incorporar este cartão em seu site.

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

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

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

API

Desenvolvedores que desejam gerenciar cartões podem acessar Desenvolvedores > API > Inventário.

Leitura adicional

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