Headless CMS

Los componentes web de Wink son elementos HTML personalizados independientes del framework. Si tu headless CMS renderiza HTML — ya sea mediante Next.js, Nuxt, Astro, SvelteKit u otro framework — puedes insertar los componentes de Wink sin ninguna integración especial.

La inserción en tres pasos

Cada integración de Wink, sin importar la plataforma, sigue los mismos tres pasos.

1. Incluir la hoja de estilos

Agrega esto en el <head> de tu documento (o en el layout global equivalente):

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

2. Incluir el JavaScript

Agrega esto antes de la etiqueta de cierre </body> (o en la sección de scripts de tu layout):

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

3. Añadir el cargador de la aplicación

Coloca esto una vez por página, en cualquier parte del body (normalmente en el footer del layout global):

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

Ejemplos por 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>

Colocando componentes en contenido

En los campos de texto enriquecido o tipos de campo personalizados de tu CMS, inserta las etiquetas de los componentes directamente en el HTML generado:

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

Para Contentful, Strapi, Sanity o plataformas headless similares, usa un campo de Rich Text o un Bloque Personalizado que renderice HTML sin procesar, y pega la etiqueta del componente allí.

Paquete npm

Para proyectos TypeScript, el paquete @wink/elements ofrece:

Una función load() que inyecta los scripts CDN programáticamente
Declaraciones completas de tipos TypeScript para todos los atributos de los componentes

npm install @wink/elements

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

// Llama una vez al iniciar la app
load({ clientId: 'YOUR_CLIENT_ID' });

Componentes disponibles

Componente	Etiqueta HTML	Propósito
Content loader	`<wink-content-loader>`	Mostrar tarjetas de hoteles, cuadrículas, mapas
Lookup	`<wink-lookup>`	Barra de búsqueda para destinos
Search button	`<wink-search-button>`	Abrir selector de itinerario
Account button	`<wink-account-button>`	Iniciar sesión / menú de usuario
Itinerary button	`<wink-itinerary-button>`	Mostrar itinerario actual
Itinerary picker	`<wink-itinerary-picker>`	Formulario completo de itinerario
Shopping cart	`<wink-shopping-cart-button>`	Botón resumen del carrito

Consulta Web Components para la referencia completa de atributos.