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
Section titled “Wink scriptlerini site genelinde yükleyin”- HubSpot’ta Marketing → Files and Templates → Design Tools bölümüne gidin.
- Aktif temanızın
main.cssdosyası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_IDile 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
Section titled “Ö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-loaderlayout="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
Section titled “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
Section titled “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.