Schede

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

Cliccare sul pulsante Prenota.
Cliccare sul link Galleria per vedere tutte le foto e i video di questo inventario.
Cliccare sul link Miglior offerta, se disponibile, per vedere la camera al prezzo migliore.
Cliccare sul link Dettagli hotel, se disponibile, per vedere le informazioni sulla struttura.

Una scheda supporta più facce per minimizzare la dimensione della scheda e per categorizzare i dati; rendendoli facilmente fruibili dall’utente e dandoti maggiori possibilità di convertire l’utente in una prenotazione.

Una scheda ha due o tre facce:

Una scheda hotel mostra i dati della struttura sul fronte e il miglior tipo di camera sul retro. Il prezzo, su entrambi i lati, mostra il miglior prezzo per l’hotel.
Una scheda tipo di camera mostra i dati del tipo di camera sul fronte e i dati della struttura sul retro. Il prezzo mostra il prezzo del tipo di camera sul fronte e il miglior prezzo per l’hotel sul retro.
Tutte le altre schede (ad esempio spa, ristorante ecc.) hanno 3 facce. Esempio: i dati della spa sono mostrati sulla prima pagina con il miglior prezzo della spa. I dati del tipo di camera per la camera al prezzo migliore sono sul secondo lato. I dati della struttura insieme alla camera al prezzo migliore sono sulla terza faccia della scheda.

Anteprima scheda — *Scheda tipo di camera frontale con disponibilità*

Sopra è un esempio della nostra scheda tipo di camera. Contiene dati sulla struttura, recensioni e camera insieme alla politica di cancellazione e pasti.

Il resto di questo articolo ti guida su come creare, personalizzare ed esporre la scheda ai tuoi utenti.

Crea una scheda

Sopra c’è un’immagine tratta da Search che mostra alcune delle azioni che puoi fare con i risultati di ricerca. Una di queste azioni è Crea una scheda. Clicca su quel pulsante e verrai reindirizzato alla pagina del modulo per la scheda dove potrai iniziare a personalizzarla.

Personalizza la scheda

Il modulo ti permette di personalizzare la tua scheda nei seguenti modi:

Assegna un nome per ricordarti di cosa tratta la scheda.
Seleziona la Personalizzazione che vuoi applicare a questa scheda.
Seleziona la faccia iniziale della scheda che vuoi far vedere agli utenti per prima. Di default, è la faccia nativa di quell’inventario.
Seleziona il badge che vuoi usare sulla scheda. Un badge permette agli utenti di confrontare l’inventario su una metrica aggregata come eco-friendly.
Aggiungi parole chiave, separate da virgola, che saranno usate dai Web Crawlers.
Aggiungi titoli e descrizioni nelle lingue che vuoi far vedere all’utente.
Seleziona una o più immagini che verranno mostrate quando gli utenti cliccano sul link Galleria.
Clicca sul pulsante Salva per continuare.

Dopo aver salvato la tua scheda, verrai reindirizzato alla pagina delle tue schede e la tua scheda sarà pronta per essere condivisa con il mondo.

Condividi la scheda

Sopra vedi un’immagine con tutte le azioni disponibili per la tua scheda:

Aggiorna Aggiorna la configurazione della tua scheda.
Aggiungi a WinkLinks Aggiunge la scheda al tuo account WinkLinks.
Incorpora Ti mostra come incorporare questa scheda come un Card nel tuo sito web.
Usa con WordPress Ti mostra come usare il nostro plugin WordPress per incorporare questa scheda nel tuo sito web.

Copriamo alcune di queste opzioni, in dettaglio, qui sotto.

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 usare il Web Component wink-content-loader e indicargli di caricare una scheda tipo camera per il tuo codice.
La riga 11 mostra come incorporare il nostro Javascript nel tuo sito.
La riga 13 mostra come incorporare il Web Component wink-app-loader e indicargli di caricare le tue preferenze di configurazione a livello di pagina.

API

Gli sviluppatori che vogliono gestire le schede possono andare su Developers > API > Inventory.

Ulteriori letture

Scopri di più sulla nostra collezione di Web Components.
Scopri di più sul plugin WordPress di Wink.