HubSpot CMS

HubSpot CMS prend en charge les modules HTML personnalisés et le code d’en-tête/pied de page à l’échelle du site, ce qui facilite l’intégration des composants Wink sur les pages marketing et les pages d’atterrissage.

Charger les scripts Wink à l’échelle du site

Dans HubSpot, allez dans Marketing → Fichiers et modèles → Outils de conception.
Ouvrez le fichier main.css de votre thème actif ou utilisez les paramètres de contenu globaux.
Sinon, allez dans Paramètres → Site web → Pages → Code personnalisé.

Dans le champ Head HTML, ajoutez la feuille de style :

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

Dans le champ Footer HTML, 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>

Enregistrez et publiez.

Ajouter un composant via un module HTML personnalisé

Dans les Outils de conception, créez un nouveau module de type Texte enrichi ou HTML.

Dans le contenu par défaut du module, collez le HTML du composant :

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

Enregistrez le module et glissez-le dans n’importe quel modèle de page ou page via l’éditeur de page.

Ajouter un composant directement dans l’éditeur de page

Si vous préférez ne pas créer de module, vous pouvez utiliser une section HTML personnalisé dans l’éditeur drag-and-drop :

Ouvrez la page dans l’éditeur de page HubSpot.
Cliquez sur Ajouter et choisissez une section HTML personnalisé ou Intégrer.
Collez la balise du composant dans le champ HTML.
Cliquez sur Appliquer et publiez la page.

Composants disponibles

Composant	Balise HTML	Usage
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 actuel
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

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