コンテンツにスキップ
Wink

Webflow

Webflowは、サイト全体の<head>、サイト全体の</body>、および各要素ごとのコード埋め込みの3か所でカスタムHTMLとJavaScriptをサポートしています。これにより、Winkのウェブコンポーネントの統合が簡単になります。

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

Section titled “Winkスクリプトをサイト全体に読み込む”
  1. Webflow Designerで、Project Settings → Custom Codeを開きます。
  2. Head Codeセクションにスタイルシートを追加します： 
    <link rel="stylesheet" href="https://elements.wink.travel/styles.css">
  3. Footer Codeセクションにスクリプトとアプリケーションローダーを追加します（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>
  4. Save Changesをクリックします。

特定の要素にコンポーネントを追加する

Section titled “特定の要素にコンポーネントを追加する”
  1. Designerで、コンポーネントを配置したいDivまたはSectionを選択します。
  2. 右パネルで**</> Embedアイコンをクリックするか、AddパネルからHTML Embed**要素を追加します。
  3. コンポーネントのHTMLを貼り付けます。例： 
    <wink-content-loader
      layout="RANKED"
      id="YOUR_LAYOUT_ID"
    ></wink-content-loader>
  4. Save & Closeをクリックします。

ページごとのカスタムコード

Section titled “ページごとのカスタムコード”

特定のページだけにWinkを表示したい場合は、サイト全体ではなくページごとのコード挿入を使います：

  1. 対象ページのPage Settings（Pagesパネルの歯車アイコン）を開きます。
  2. Custom Code → Before </body> tagまでスクロールします。
  3. 上記と同じスクリプトとアプリローダーを貼り付けます。
  4. ページ設定を保存します。

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

Section titled “利用可能なコンポーネント”
コンポーネントHTMLタグ用途
Content loader<wink-content-loader>ホテルカード、グリッド、地図の表示
Lookup<wink-lookup>目的地検索バー
Search button<wink-search-button>旅程ピッカーを開くボタン
Account button<wink-account-button>サインイン / ユーザーメニュー
Itinerary button<wink-itinerary-button>現在の旅程を表示
Itinerary picker<wink-itinerary-picker>旅程フォーム全体
Shopping cart<wink-shopping-cart-button>カート概要ボタン

完全な属性リファレンスはWeb Componentsをご覧ください。

さらに読む

Section titled “さらに読む”