Squarespace

Αυτό το περιεχόμενο δεν είναι ακόμη διαθέσιμο στη γλώσσα σου.

Squarespace supports custom HTML and JavaScript, which means you can embed any Wink web component directly into your site without a plugin. This guide shows you how to load the Wink scripts site-wide and then place components on individual pages.

Load Wink scripts site-wide

Adding the scripts to your site’s global footer and header means Wink is available on every page without repeating the setup.

In the Squarespace editor, go to Settings → Advanced → Code Injection.

In the Header field, add the stylesheet:

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

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

Click Save.

Add a component to a page

Once the scripts are loaded globally, you can drop any Wink component onto any page using a Code Block.

Open the page you want to edit.
Click Edit and add a new Code block where you want the component to appear.

Paste the component HTML, for example a content loader:

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

Click Apply then Save.

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 for each component.