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.