Webflow

Webflow prend en charge le HTML et JavaScript personnalisés à trois endroits : le <head> global du site, le </body> global du site, et les insertions de code par élément. Cela rend l’intégration des composants web Wink simple.

Charger les scripts Wink sur tout le site

Dans le Designer Webflow, ouvrez Project Settings → Custom Code.

Dans la section Head Code, ajoutez la feuille de style :

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

Dans la section Footer Code, ajoutez le script et le chargeur d’application (remplacez YOUR_CLIENT_ID) :

<script src="https://elements.wink.travel/elements.js" type="module" defer></script>
<wink-app-loader client-id="YOUR_CLIENT_ID"></wink-app-loader>

Cliquez sur Save Changes.

Ajouter un composant à un élément spécifique

Dans le Designer, sélectionnez le Div ou la Section où vous souhaitez placer le composant.
Dans le panneau de droite, cliquez sur l’icône </> Embed (ou ajoutez un élément HTML Embed depuis le panneau Ajouter).

Collez le HTML du composant, par exemple :

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

Cliquez sur Save & Close.

Code personnalisé par page

Si vous avez besoin de Wink uniquement sur certaines pages, utilisez l’injection de code par page au lieu du site global :

Ouvrez les Page Settings de la page ciblée (icône d’engrenage dans le panneau Pages).
Descendez à Custom Code → Before </body> tag.
Collez le même script et chargeur d’application que ci-dessus.
Enregistrez les paramètres de la page.

Composants disponibles

Composant	Balise HTML	Usage
Content loader	`<wink-content-loader>`	Afficher des cartes d’hôtels, grilles, cartes
Lookup	`<wink-lookup>`	Barre de recherche pour destinations
Search button	`<wink-search-button>`	Ouvrir le sélecteur d’itinéraire
Account button	`<wink-account-button>`	Connexion / menu utilisateur
Itinerary button	`<wink-itinerary-button>`	Afficher l’itinéraire actuel
Itinerary picker	`<wink-itinerary-picker>`	Formulaire complet d’itinéraire
Shopping cart	`<wink-shopping-cart-button>`	Bouton résumé du panier

Consultez Web Components pour la référence complète des attributs.