Headless CMS

Komponen web Wink adalah elemen HTML kustom yang tidak bergantung pada framework. Jika CMS headless Anda merender HTML — baik melalui Next.js, Nuxt, Astro, SvelteKit, atau framework lain — Anda dapat menyematkan komponen Wink tanpa integrasi khusus.

Embed tiga langkah

Setiap integrasi Wink, terlepas dari platform, mengikuti tiga langkah yang sama.

1. Sertakan stylesheet

Tambahkan ini ke <head> dokumen Anda (atau layout global setara):

<link rel="stylesheet" href="https://elements.wink.travel/styles.css">

2. Sertakan JavaScript

Tambahkan ini sebelum tag penutup </body> Anda (atau di bagian skrip layout Anda):

<script src="https://elements.wink.travel/elements.js" type="module" defer></script>

3. Tambahkan pemuat aplikasi

Tempatkan ini sekali per halaman, di mana saja dalam body (biasanya di footer layout global Anda):

<wink-app-loader client-id="YOUR_CLIENT_ID"></wink-app-loader>

Contoh framework

Next.js (App Router)

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        <link rel="stylesheet" href="https://elements.wink.travel/styles.css" />
      </head>
      <body>
        {children}
        <script src="https://elements.wink.travel/elements.js" type="module" defer />
        <wink-app-loader client-id="YOUR_CLIENT_ID" />
      </body>
    </html>
  );
}

Nuxt 3

<template>
  <div>
    <slot />
    <wink-app-loader client-id="YOUR_CLIENT_ID" />
  </div>
</template>

<script setup>
useHead({
  link: [{ rel: 'stylesheet', href: 'https://elements.wink.travel/styles.css' }],
  script: [{ src: 'https://elements.wink.travel/elements.js', type: 'module', defer: true }],
})
</script>

Astro

<html lang="en">
  <head>
    <link rel="stylesheet" href="https://elements.wink.travel/styles.css" />
  </head>
  <body>
    <slot />
    <script src="https://elements.wink.travel/elements.js" type="module" is:inline></script>
    <wink-app-loader client-id="YOUR_CLIENT_ID"></wink-app-loader>
  </body>
</html>

SvelteKit

<svelte:head>
  <link rel="stylesheet" href="https://elements.wink.travel/styles.css" />
</svelte:head>

<slot />
<wink-app-loader client-id="YOUR_CLIENT_ID" />

<script>
  import { onMount } from 'svelte';
  onMount(async () => {
    await import('https://elements.wink.travel/elements.js');
  });
</script>

Menempatkan komponen dalam konten

Di tipe teks kaya atau field kustom CMS Anda, sematkan tag komponen langsung dalam output HTML:

<wink-content-loader
  layout="HOTEL"
  id="YOUR_LAYOUT_ID"
></wink-content-loader>

Untuk Contentful, Strapi, Sanity, atau platform headless serupa, gunakan field Rich Text atau Custom Block yang merender HTML mentah, lalu tempel tag komponen di sana.

Paket npm

Untuk proyek TypeScript, paket @wink/elements menyediakan:

Fungsi load() yang menyuntikkan skrip CDN secara programatik
Deklarasi tipe TypeScript lengkap untuk semua atribut komponen

npm install @wink/elements

import { load } from '@wink/elements';

// Panggil sekali saat startup aplikasi
load({ clientId: 'YOUR_CLIENT_ID' });

Komponen yang tersedia

Komponen	Tag HTML	Tujuan
Content loader	`<wink-content-loader>`	Menampilkan kartu hotel, grid, peta
Lookup	`<wink-lookup>`	Bar pencarian destinasi
Search button	`<wink-search-button>`	Membuka pemilih itinerary
Account button	`<wink-account-button>`	Masuk / menu pengguna
Itinerary button	`<wink-itinerary-button>`	Menampilkan itinerary saat ini
Itinerary picker	`<wink-itinerary-picker>`	Formulir itinerary lengkap
Shopping cart	`<wink-shopping-cart-button>`	Tombol ringkasan keranjang

Lihat Web Components untuk referensi atribut lengkap.