Lewati ke konten
Academy

Cards

Kartu mewakili satu pemasok (misalnya hotel atau penyedia pengalaman) atau inventaris (misalnya jenis kamar, ruang rapat, spa, dll.) dan memperlihatkan detailnya melalui antarmuka pengguna kartu yang interaktif dan dapat dipesan. Pengguna dapat berinteraksi dengan kartu dengan cara berikut:

  • Klik tombolBook tombol.
  • Klik tombolGallerytautan untuk melihat semua foto dan video untuk inventaris ini.
  • KlikBest dealtautan, jika tersedia, untuk melihat kamar dengan harga terbaik.
  • KlikHotel detailstautan, jika tersedia, untuk melihat informasi properti.

Kartu mendukung banyak tampilan untuk memperkecil ukuran kartu dan mengkategorikan data; membuatnya mudah dikonsumsi oleh pengguna dan memberi Anda peluang lebih besar untuk mengonversi pengguna menjadi pemesanan.

Sebuah kartu memiliki dua atau tiga sisi:

  • Kartu hotel menampilkan data properti di bagian depan dan tipe kamar terbaik di bagian belakang. Harga, di kedua sisi, menampilkan harga terbaik untuk hotel tersebut.
  • Kartu tipe kamar menampilkan data tipe kamar di bagian depan dan data properti di bagian belakang. Kartu harga menampilkan harga tipe kamar di bagian depan dan harga terbaik untuk hotel di bagian belakang.
  • Semua kartu lainnya (misalnya restoran spa, dsb.) memiliki 3 sisi. Contoh: Data spa ditampilkan di halaman depan dengan harga spa terbaik. 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 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 memandu Anda untuk membuat, menyesuaikan, dan memaparkan kartu kepada pengguna.

Buat kartu

Section titled “Buat kartu”
Tindakan
Tindakan hasil pencarian

Di atas adalah gambar yang diambil dariMencaridan menunjukkan beberapa hal yang dapat Anda lakukan dengan hasil pencarian Anda. Salah satu tindakan tersebut adalahMake a card. Klik tombol tersebut dan Anda akan diarahkan ke halaman formulir kartu tempat Anda dapat mulai menyesuaikan kartu Anda.

Sesuaikan kartu

Section titled “Sesuaikan kartu”

Formulir ini memungkinkan Anda menyesuaikan kartu Anda dengan cara berikut:

  1. Berikan nama supaya Anda mengingat apa isi kartu tersebut.
  2. Pilih Kustomisasi Anda ingin mengajukan permohonan pada kartu ini.
  3. Pilih tampilan awal kartu yang ingin Anda tampilkan pertama kali kepada pengguna. Secara default, tampilan ini adalah tampilan asli inventaris tersebut.
  4. Pilih badge yang ingin Anda gunakan pada kartu. Lencana memungkinkan pengguna membandingkan inventaris pada metrik agregat seperti eco-friendly.
  5. Tambahkan kata kunci, dipisahkan dengan koma, yang akan digunakan oleh Perayap Web.
  6. Tambahkan judul dan deskripsi dalam bahasa yang ingin Anda lihat oleh pengguna.
  7. Pilih satu atau lebih gambar yang akan ditampilkan saat pengguna mengklik Gallery link.
  8. Klik tombol Save untuk melanjutkan.

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

Bagikan kartu

Section titled “Bagikan kartu”
Kartu
Kartu dengan menu tindakan yang diciutkan

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

  • MemperbaruiMemperbarui konfigurasi kartu Anda.
  • Tambahkan ke WinkLinksMenambahkan kartu ke akun WinkLinks Anda.
  • MenanamkanMenunjukkan cara menyematkan kartu ini sebagaiKartuke situs web Anda.
  • Gunakan dengan WordPressMenunjukkan cara menggunakan kamiPlugin WordPressuntuk menyematkan kartu ini ke situs web Anda.

Kami membahas beberapa opsi ini, secara lebih rinci, di bawah ini.

Menanamkan

Section titled “Menanamkan”
<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 menanamkan gaya Wink ke situs Anda.
  • Baris 6 hingga 9 menunjukkan cara menggunakanwink-konten-pemuatKomponen Web dan memintanya untuk mengambil kartu kamar tamu untuk kode Anda.
  • Baris 11 menunjukkan cara menanamkan Javascript ke situs Anda.
  • Baris 13 menunjukkan cara menanamkanpemuat-aplikasi-winkKomponen Web dan memintanya untuk mengambil preferensi konfigurasi tingkat halaman Anda.

API

Section titled “API”

Pengembang yang ingin mengelola kartu dapat menuju kePengembang > API > Inventaris.

Bacaan lebih lanjut

Section titled “Bacaan lebih lanjut”