HubSpot CMS

Ta treść nie jest jeszcze dostępna w Twoim języku.

HubSpot CMS supports custom HTML modules and site-wide header/footer code, making it straightforward to embed Wink components on marketing pages and landing pages.

Load Wink scripts site-wide

In HubSpot, go to Marketing → Files and Templates → Design Tools.
Open your active theme’s main.css or use the global content settings.
Alternatively, go to Settings → Website → Pages → Custom Code.

In the Head HTML field, add the stylesheet:

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

In the Footer HTML field, add the script and application loader (replace 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>

Save and publish.

Add a component via a Custom HTML module

In the Design Tools, create a new module of type Rich Text or HTML.

In the module’s default content, paste the component HTML:

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

Save the module and drag it into any page template or page using the page editor.

Add a component directly in the page editor

If you prefer not to create a module, you can use a Custom HTML section in the drag-and-drop editor:

Open the page in the HubSpot page editor.
Click Add and choose a Custom HTML or Embed section.
Paste the component tag into the HTML field.
Click Apply and publish the page.

Available components

Component	HTML tag	Purpose
Content loader	`<wink-content-loader>`	Display hotel cards, grids, maps
Lookup	`<wink-lookup>`	Search bar for destinations
Search button	`<wink-search-button>`	Open itinerary picker
Account button	`<wink-account-button>`	Sign in / user menu
Itinerary button	`<wink-itinerary-button>`	Show current itinerary
Itinerary picker	`<wink-itinerary-picker>`	Full itinerary form
Shopping cart	`<wink-shopping-cart-button>`	Cart summary button

See Web Components for the full attribute reference.