Kartu

Sebuah kartu mewakili satu pemasok (misalnya hotel atau penyedia pengalaman) atau inventaris (yaitu tipe kamar, ruang rapat, spa, dll) dan menampilkan detail melalui UI kartu interaktif yang dapat dipesan. Pengguna dapat berinteraksi dengan kartu dengan cara berikut:

Klik tombol Book.
Klik tautan Gallery untuk melihat semua foto dan video untuk inventaris ini.
Klik tautan Best deal, jika tersedia, untuk melihat kamar dengan harga terbaik.
Klik tautan Hotel details, jika tersedia, untuk melihat informasi properti.

Kartu mendukung beberapa sisi untuk meminimalkan ukuran kartu dan mengkategorikan data; sehingga mudah dikonsumsi oleh pengguna dan memberi Anda peluang lebih besar untuk mengonversi pengguna menjadi pemesanan.

Kartu memiliki dua atau tiga sisi:

Kartu hotel menampilkan data properti di depan dan tipe kamar terbaik di belakang. Harga, di kedua sisi, menampilkan harga terbaik untuk hotel tersebut.
Kartu tipe kamar menampilkan data tipe kamar di depan dan data properti di belakang. Harga menampilkan harga tipe kamar di depan dan harga terbaik untuk hotel di belakang.
Semua kartu lain (misalnya spa, restoran, dll) memiliki 3 sisi. Contoh: Data spa ditampilkan di halaman depan dengan harga terbaik spa. Data tipe kamar untuk kamar dengan harga terbaik ada di sisi kedua. Data properti beserta kamar dengan harga terbaik ada di sisi ketiga kartu.

Pratinjau kartu — *Kartu tipe kamar yang menghadap depan dengan ketersediaan*

Di atas adalah contoh kartu tipe kamar kami. Kartu ini berisi data properti, ulasan, dan kamar beserta kebijakan pembatalan dan makanan.

Sisa artikel ini akan memandu Anda cara membuat, menyesuaikan, dan menampilkan kartu kepada pengguna Anda.

Membuat kartu

Di atas adalah gambar yang diambil dari Search dan menunjukkan beberapa hal yang dapat Anda lakukan dengan hasil pencarian Anda. Salah satu tindakan tersebut adalah Make a card. Klik tombol itu dan Anda akan diarahkan ke halaman formulir kartu kami di mana Anda dapat mulai menyesuaikan kartu Anda.

Menyesuaikan kartu

Formulir ini memungkinkan Anda menyesuaikan kartu dengan cara berikut:

Beri nama agar Anda ingat tentang apa kartu tersebut.
Pilih Customization yang ingin Anda terapkan pada kartu ini.
Pilih sisi kartu awal yang ingin dilihat pengguna terlebih dahulu. Secara default, ini adalah sisi asli dari inventaris tersebut.
Pilih badge yang ingin Anda gunakan pada kartu. Badge memungkinkan pengguna membandingkan inventaris berdasarkan metrik agregat seperti eco-friendly.
Tambahkan kata kunci, dipisahkan dengan koma, yang akan digunakan oleh Web Crawlers.
Tambahkan judul dan deskripsi dalam bahasa yang ingin dilihat pengguna.
Pilih satu atau lebih gambar yang akan ditampilkan saat pengguna mengklik tautan Gallery.
Klik tombol Save untuk melanjutkan.

Setelah menyimpan kartu Anda, Anda akan diarahkan ke halaman kartu Anda dan kartu Anda sekarang siap untuk dibagikan ke dunia.

Membagikan kartu

Di atas menunjukkan gambar dengan semua tindakan yang tersedia untuk kartu Anda:

Update Memperbarui konfigurasi kartu Anda.
Add to WinkLinks Menambahkan kartu ke akun WinkLinks Anda.
Embed Menunjukkan cara menyematkan kartu ini sebagai Card ke dalam situs web Anda.
Use with WordPress Menunjukkan cara menggunakan plugin WordPress kami untuk menyematkan kartu ini ke dalam situs web Anda.

Kami membahas beberapa opsi ini secara lebih rinci di bawah.

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>

Berikut cara menyematkan kartu Anda ke situs Anda:

Baris 3 menunjukkan cara menyematkan gaya Wink ke situs Anda.
Baris 6 sampai 9 menunjukkan cara menggunakan Komponen Web wink-content-loader dan memberitahunya untuk mengambil kartu kamar tamu untuk kode Anda.
Baris 11 menunjukkan cara menyematkan Javascript kami ke situs Anda.
Baris 13 menunjukkan cara menyematkan Komponen Web wink-app-loader dan memberitahunya untuk mengambil preferensi konfigurasi tingkat halaman Anda.

API

Pengembang yang ingin mengelola kartu dapat menuju ke Developers > API > Inventory.

Bacaan lanjutan

Pelajari lebih lanjut tentang koleksi Web Components.
Pelajari lebih lanjut tentang plugin WordPress Wink.