HubSpot CMS

HubSpot CMS, özel HTML modülleri ve site genelinde header/footer kodu desteği sunar, bu da Wink bileşenlerini pazarlama sayfalarında ve açılış sayfalarında kolayca gömmenizi sağlar.

Wink scriptlerini site genelinde yükleyin

HubSpot’ta Marketing → Files and Templates → Design Tools bölümüne gidin.
Aktif temanızın main.css dosyasını açın veya global içerik ayarlarını kullanın.
Alternatif olarak, Settings → Website → Pages → Custom Code bölümüne gidin.

Head HTML alanına stil dosyasını ekleyin:

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

Footer HTML alanına script ve uygulama yükleyicisini ekleyin (YOUR_CLIENT_ID ile değiştirin):

<script src="https://elements.wink.travel/elements.js" type="module" defer></script>
<wink-app-loader client-id="YOUR_CLIENT_ID"></wink-app-loader>

Kaydedin ve yayınlayın.

Özel HTML modülü ile bileşen ekleyin

Design Tools’ta, Rich Text veya HTML türünde yeni bir modül oluşturun.

Modülün varsayılan içeriğine bileşen HTML’sini yapıştırın:

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

Modülü kaydedin ve sayfa şablonuna veya sayfa düzenleyicisi ile herhangi bir sayfaya sürükleyin.

Bileşeni doğrudan sayfa düzenleyicide ekleyin

Modül oluşturmak istemiyorsanız, sürükle-bırak düzenleyicide bir Özel HTML bölümü kullanabilirsiniz:

Sayfayı HubSpot sayfa düzenleyicisinde açın.
Add tıklayın ve bir Custom HTML veya Embed bölümü seçin.
Bileşen etiketini HTML alanına yapıştırın.
Apply tıklayın ve sayfayı yayınlayın.

Mevcut bileşenler

Bileşen	HTML etiketi	Amaç
İçerik yükleyici	`<wink-content-loader>`	Otel kartları, ızgaralar, haritalar gösterir
Arama	`<wink-lookup>`	Destinasyonlar için arama çubuğu
Arama butonu	`<wink-search-button>`	Seyahat planlayıcıyı açar
Hesap butonu	`<wink-account-button>`	Giriş / kullanıcı menüsü
Seyahat butonu	`<wink-itinerary-button>`	Mevcut seyahati gösterir
Seyahat seçici	`<wink-itinerary-picker>`	Tam seyahat formu
Alışveriş sepeti	`<wink-shopping-cart-button>`	Sepet özeti butonu

Tam özellik referansı için Web Components sayfasına bakın.