Cards

Una scheda rappresenta un singolo fornitore (ad esempio, un hotel o un fornitore di esperienze) o un inventario (ad esempio, una tipologia di camera, una sala riunioni, una spa, ecc.) e ne espone i dettagli tramite un’interfaccia utente interattiva e prenotabile. Un utente può interagire con una scheda nei seguenti modi:

Fare clic suBookpulsante.
Fare clic suGallerylink per vedere tutte le foto e i video di questo inventario.
Fare clicBest deallink, se disponibile, per vedere la camera al miglior prezzo.
Fare clicHotel detailscollegamento, se disponibile, per visualizzare le informazioni sulla proprietà.

Una carta supporta più lati per ridurne al minimo le dimensioni e categorizzarne i dati, rendendola facilmente fruibile dall’utente e aumentando le possibilità di convertirlo in una prenotazione.

Una carta ha due o tre facce:

Una scheda di un hotel mostra i dati della struttura sul fronte e la tipologia di camera migliore sul retro. Il prezzo, su entrambi i lati, mostra il prezzo migliore per l’hotel.
Una scheda relativa alla tipologia di camera mostra i dati relativi alla tipologia di camera sul fronte e i dati della struttura sul retro. La scheda relativa al prezzo mostra il prezzo della tipologia di camera sul fronte e il miglior prezzo dell’hotel sul retro.
Tutte le altre carte (ad esempio, ristorante spa, ecc.) hanno 3 lati. Esempio: i dati della spa vengono visualizzati sulla prima pagina, insieme al miglior prezzo. I dati relativi alla tipologia di camera per la camera con il miglior prezzo si trovano sul secondo lato. I dati della struttura e la camera con il miglior prezzo si trovano sul terzo lato.

Anteprima della carta — *Scheda di tipologia di camera frontale con disponibilità*

Qui sopra è riportato un esempio della nostra scheda relativa alla tipologia di camera. Contiene informazioni sulla struttura, le recensioni e i dati della camera, oltre alle condizioni di cancellazione e ai pasti.

Il resto dell’articolo ti guiderà passo passo nella creazione, nella personalizzazione e nella presentazione della scheda ai tuoi utenti.

Crea una carta

Qui sopra c’è un’immagine presa daRicercae ti mostra alcune delle cose che puoi fare con i risultati della tua ricerca. Una di queste azioni èMake a cardCliccando su questo pulsante verrai reindirizzato alla pagina del nostro modulo carta, dove potrai iniziare a personalizzare la tua carta.

Personalizza la carta

Il modulo ti consente di personalizzare la tua carta nei seguenti modi:

Assegnale un nome in modo da ricordare di cosa tratta la carta.
Selezionare il Personalizzazione che vuoi applicare a questa carta.
Seleziona il lato iniziale della carta che desideri che gli utenti vedano per primo. Per impostazione predefinita, è il lato nativo di quell’inventario.
Selezionare il badge che desideri utilizzare sulla carta. Un badge consente agli utenti di confrontare l’inventario su una metrica aggregata come eco-friendly.
Aggiungi parole chiave, separate da una virgola, che verranno utilizzate da Web crawler.
Aggiungi titoli e descrizioni nelle lingue che desideri siano visualizzate dall’utente.
Seleziona una o più immagini che verranno visualizzate quando gli utenti cliccano su Gallery collegamento.
Fare clic su Save pulsante per continuare.

Dopo aver salvato la tua carta, verrai reindirizzato alla pagina delle tue carte, dove sarà pronta per essere condivisa con il mondo.

Condividi la carta

Qui sopra puoi vedere un’immagine con tutte le azioni disponibili per la tua carta:

AggiornamentoAggiorna la configurazione della tua carta.
Aggiungi a WinkLinksAggiunge la carta al tuo account WinkLinks.
IncorporaTi mostra come incorporare questa carta comeCartanel tuo sito web.
Utilizzo con WordPressTi mostra come utilizzare il nostroPlugin di WordPressper incorporare questa scheda nel tuo sito web.

Di seguito illustreremo più dettagliatamente alcune di queste opzioni.

Incorpora

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

Ecco come incorporare la tua scheda nel tuo sito:

La riga 3 mostra come incorporare gli stili Wink nel tuo sito.
Le righe da 6 a 9 mostrano come utilizzare ilwink-content-loaderWeb Component e digli di recuperare una scheda della camera per il tuo codice.
La riga 11 mostra come incorporare il nostro Javascript nel tuo sito.
La riga 13 mostra come incorporare ilwink-app-loaderWeb Component e indicagli di recuperare le preferenze di configurazione a livello di pagina.

API

Gli sviluppatori che desiderano gestire le carte possono andare suSviluppatori > API > Inventario.

Ulteriori letture

Scopri di più sulla nostra collezione diComponenti Web.
Scopri di più suPlugin Wink per WordPress.