Squarespace

Squarespace prend en charge le HTML et JavaScript personnalisés, ce qui signifie que vous pouvez intégrer directement n’importe quel composant web Wink dans votre site sans plugin. Ce guide vous montre comment charger les scripts Wink sur l’ensemble du site, puis placer les composants sur des pages individuelles.

Charger les scripts Wink sur l’ensemble du site

Ajouter les scripts dans le pied de page et l’en-tête globaux de votre site permet d’avoir Wink disponible sur chaque page sans répéter la configuration.

Dans l’éditeur Squarespace, allez dans Paramètres → Avancé → Injection de code.

Dans le champ En-tête, ajoutez la feuille de style :

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

Dans le champ Pied de page, ajoutez le script et le chargeur d’application (remplacez YOUR_CLIENT_ID par votre identifiant client Wink) :

<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 Enregistrer.

Ajouter un composant à une page

Une fois les scripts chargés globalement, vous pouvez insérer n’importe quel composant Wink sur une page en utilisant un bloc de code.

Ouvrez la page que vous souhaitez modifier.
Cliquez sur Modifier et ajoutez un nouveau bloc Code à l’endroit où vous voulez que le composant apparaisse.

Collez le HTML du composant, par exemple un chargeur de contenu :

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

Cliquez sur Appliquer puis sur Enregistrer.

Composants disponibles

Composant	Balise HTML	Utilité
Chargeur de contenu	`<wink-content-loader>`	Afficher des cartes d’hôtels, grilles, cartes
Recherche	`<wink-lookup>`	Barre de recherche pour destinations
Bouton de recherche	`<wink-search-button>`	Ouvrir le sélecteur d’itinéraire
Bouton compte	`<wink-account-button>`	Connexion / menu utilisateur
Bouton itinéraire	`<wink-itinerary-button>`	Afficher l’itinéraire en cours
Sélecteur d’itinéraire	`<wink-itinerary-picker>`	Formulaire complet d’itinéraire
Panier d’achat	`<wink-shopping-cart-button>`	Bouton résumé du panier

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