HubSpot CMS

O HubSpot CMS suporta módulos HTML personalizados e código de cabeçalho/rodapé para todo o site, facilitando a incorporação de componentes Wink em páginas de marketing e landing pages.

Carregar scripts Wink para todo o site

No HubSpot, vá para Marketing → Arquivos e Modelos → Ferramentas de Design.
Abra o main.css do seu tema ativo ou use as configurações globais de conteúdo.
Como alternativa, vá para Configurações → Website → Páginas → Código Personalizado.

No campo Head HTML, adicione a folha de estilos:

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

No campo Footer HTML, adicione o script e o carregador da aplicação (substitua 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>

Salve e publique.

Adicionar um componente via módulo HTML personalizado

Nas Ferramentas de Design, crie um novo módulo do tipo Rich Text ou HTML.

No conteúdo padrão do módulo, cole o HTML do componente:

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

Salve o módulo e arraste-o para qualquer modelo de página ou página usando o editor de páginas.

Adicionar um componente diretamente no editor de páginas

Se preferir não criar um módulo, você pode usar uma seção Custom HTML no editor drag-and-drop:

Abra a página no editor de páginas do HubSpot.
Clique em Adicionar e escolha uma seção Custom HTML ou Embed.
Cole a tag do componente no campo HTML.
Clique em Aplicar e publique a página.

Componentes disponíveis

Componente	Tag HTML	Finalidade
Content loader	`<wink-content-loader>`	Exibir cartões de hotéis, grades, mapas
Lookup	`<wink-lookup>`	Barra de busca para destinos
Search button	`<wink-search-button>`	Abrir seletor de itinerário
Account button	`<wink-account-button>`	Entrar / menu do usuário
Itinerary button	`<wink-itinerary-button>`	Mostrar itinerário atual
Itinerary picker	`<wink-itinerary-picker>`	Formulário completo de itinerário
Shopping cart	`<wink-shopping-cart-button>`	Botão resumo do carrinho

Veja Web Components para a referência completa de atributos.