Squarespace

Squarespace はカスタム HTML と JavaScript をサポートしているため、プラグインなしで Wink のウェブコンポーネントを直接サイトに埋め込むことができます。このガイドでは、Wink スクリプトをサイト全体に読み込み、個別のページにコンポーネントを配置する方法を説明します。

Wink スクリプトをサイト全体に読み込む

スクリプトをサイトのグローバルなフッターとヘッダーに追加すると、設定を繰り返すことなくすべてのページで Wink を利用できます。

Squarespace エディターで Settings → Advanced → Code Injection に移動します。

Header フィールドにスタイルシートを追加します:

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

Footer フィールドにスクリプトとアプリケーションローダーを追加します（YOUR_CLIENT_ID をあなたの Wink クライアント 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 をクリックします。

ページにコンポーネントを追加する

スクリプトをグローバルに読み込んだら、Code Block を使って任意のページに Wink コンポーネントを配置できます。

編集したいページを開きます。
Edit をクリックし、コンポーネントを表示したい場所に新しい Code ブロックを追加します。

例えばコンテンツローダーの HTML を貼り付けます:

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

Apply をクリックし、続けて Save します。

利用可能なコンポーネント

コンポーネント	HTML タグ	用途
コンテンツローダー	`<wink-content-loader>`	ホテルカード、グリッド、地図の表示
ルックアップ	`<wink-lookup>`	目的地検索バー
検索ボタン	`<wink-search-button>`	旅程ピッカーを開く
アカウントボタン	`<wink-account-button>`	サインイン / ユーザーメニュー
旅程ボタン	`<wink-itinerary-button>`	現在の旅程を表示
旅程ピッカー	`<wink-itinerary-picker>`	フル旅程フォーム
ショッピングカート	`<wink-shopping-cart-button>`	カート概要ボタン

各コンポーネントの属性リファレンスは Web Components をご覧ください。