コンテンツにスキップ
Wink

HubSpot CMS

HubSpot CMSはカスタムHTMLモジュールとサイト全体のヘッダー/フッターコードをサポートしており、マーケティングページやランディングページにWinkコンポーネントを簡単に埋め込むことができます。

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

Section titled “Winkスクリプトをサイト全体に読み込む”
  1. HubSpotで、Marketing → Files and Templates → Design Tools に移動します。
  2. アクティブなテーマの main.css を開くか、グローバルコンテンツ設定を使用します。
  3. または、Settings → Website → Pages → Custom Code に移動します。
  4. Head HTML フィールドにスタイルシートを追加します： 
    <link rel="stylesheet" href="https://elements.wink.travel/styles.css">
  5. Footer HTML フィールドにスクリプトとアプリケーションローダーを追加します（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>
  6. 保存して公開します。

カスタムHTMLモジュールでコンポーネントを追加する

Section titled “カスタムHTMLモジュールでコンポーネントを追加する”
  1. Design Toolsで、Rich Text または HTML タイプの新しいモジュールを作成します。
  2. モジュールのデフォルトコンテンツにコンポーネントのHTMLを貼り付けます： 
    <wink-content-loader
      layout="HOTEL"
      id="YOUR_LAYOUT_ID"
    ></wink-content-loader>
  3. モジュールを保存し、ページテンプレートやページエディターで任意のページにドラッグします。

ページエディターで直接コンポーネントを追加する

Section titled “ページエディターで直接コンポーネントを追加する”

モジュールを作成せずに、ドラッグ＆ドロップエディターのCustom HTMLセクションを使うこともできます：

  1. HubSpotのページエディターでページを開きます。
  2. Add をクリックし、Custom HTML または Embed セクションを選択します。
  3. HTMLフィールドにコンポーネントタグを貼り付けます。
  4. Apply をクリックしてページを公開します。

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

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 “参考資料”