Sari la conținut
Academy

Carduri

Un card reprezintă un singur furnizor (de exemplu hotel sau furnizor de experiențe) sau inventar (adică tip de cameră, sală de conferințe, spa etc) și expune detaliile printr-o interfață interactivă, rezervabilă, sub forma unui card. Un utilizator poate interacționa cu un card în următoarele moduri:

  • Apasă butonul Book.
  • Apasă linkul Gallery pentru a vedea toate fotografiile și videoclipurile pentru acest inventar.
  • Apasă linkul Best deal, dacă este disponibil, pentru a vedea camera cu cel mai bun preț.
  • Apasă linkul Hotel details, dacă este disponibil, pentru a vedea informații despre proprietate.

Un card suportă mai multe fețe pentru a minimiza dimensiunea cardului și pentru a categorisi datele; făcându-le ușor de consumat de către utilizator și oferindu-ți o șansă mai mare să convertești utilizatorul într-o rezervare.

Un card are fie două, fie trei fețe:

  • Un card de hotel afișează datele proprietății pe fața frontală și cel mai bun tip de cameră pe spate. Prețul, pe ambele părți, afișează cel mai bun preț pentru hotel.
  • Un card de tip cameră afișează datele tipului de cameră pe fața frontală și datele proprietății pe spate. Prețul afișează prețul tipului de cameră pe fața frontală și cel mai bun preț pentru hotel pe spate.
  • Toate celelalte carduri (de exemplu spa, restaurant etc) au 3 fețe. Exemplu: datele spa sunt afișate pe prima pagină cu cel mai bun preț al spa-ului. Datele tipului de cameră pentru camera cu cel mai bun preț sunt pe a doua față. Datele proprietății împreună cu camera cu cel mai bun preț sunt pe a treia față a cardului.
Previzualizare card
Card tip cameră cu fața frontală și disponibilitate

Mai sus este un exemplu al cardului nostru de tip cameră. Conține date despre proprietate, recenzii și cameră, împreună cu politica de anulare și mesele incluse.

Restul acestui articol te ghidează cum să creezi, personalizezi și să expui cardul către utilizatorii tăi.

Creează un card

Section titled “Creează un card”
Acțiuni
Acțiuni din rezultatele căutării

Mai sus este o imagine preluată din Search și îți arată câteva dintre lucrurile pe care le poți face cu rezultatele tale de căutare. Una dintre aceste acțiuni este Make a card. Apasă pe acel buton și vei fi redirecționat către pagina formularului nostru de card unde poți începe să personalizezi cardul.

Personalizează cardul

Section titled “Personalizează cardul”

Formularul îți permite să personalizezi cardul în următoarele moduri:

  1. Dă-i un nume pentru a-ți aminti despre ce este cardul.
  2. Selectează Customization pe care vrei să o aplici acestui card.
  3. Selectează fața inițială a cardului pe care vrei ca utilizatorii să o vadă prima. Implicit, este fața nativă a acelui inventar.
  4. Selectează badge pe care vrei să îl folosești pe card. Un badge permite utilizatorilor să compare inventarul pe o metrică agregată, cum ar fi eco-friendly.
  5. Adaugă cuvinte cheie, separate prin virgulă, care vor fi folosite de Web Crawlers.
  6. Adaugă titluri și descrieri în limbile în care vrei ca utilizatorul să le vadă.
  7. Selectează una sau mai multe imagini care vor apărea când utilizatorii apasă pe linkul Gallery.
  8. Apasă butonul Save pentru a continua.

După ce salvezi cardul, vei fi redirecționat către pagina ta de carduri și cardul tău este acum gata să fie distribuit lumii.

Distribuie cardul

Section titled “Distribuie cardul”
Card
Card cu meniul de acțiuni restrâns

Mai sus îți arată o imagine cu toate acțiunile disponibile pentru cardul tău:

  • Update Actualizează configurația cardului tău.
  • Add to WinkLinks Adaugă cardul în contul tău WinkLinks.
  • Embed Îți arată cum să încorporezi acest card ca un Card în site-ul tău.
  • Use with WordPress Îți arată cum să folosești pluginul nostru WordPress pentru a încorpora acest card în site-ul tău.

Acoperim unele dintre aceste opțiuni, în detaliu, mai jos.

Embed

Section titled “Embed”
<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>

Iată cum să încorporezi cardul în site-ul tău:

  • Linia 3 îți arată cum să încorporezi stilurile Wink în site-ul tău.
  • Liniile 6 până la 9 îți arată cum să folosești componenta Web wink-content-loader și să îi spui să preia un card de cameră pentru codul tău.
  • Linia 11 îți arată cum să încorporezi Javascript-ul nostru în site.
  • Linia 13 îți arată cum să încorporezi componenta Web wink-app-loader și să îi spui să preia preferințele tale de configurare la nivel de pagină.

API

Section titled “API”

Dezvoltatorii care doresc să gestioneze carduri pot accesa Developers > API > Inventory.

Lecturi suplimentare

Section titled “Lecturi suplimentare”