Webflow

O Webflow suporta HTML e JavaScript personalizados em três locais: o <head> do site inteiro, o </body> do site inteiro e embeds de código por elemento. Isso torna a integração dos web components Wink simples.

Carregue os scripts Wink no site inteiro

No Webflow Designer, abra Configurações do Projeto → Código Personalizado.

Na seção Código do Head, adicione a folha de estilos:

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

Na seção Código do Rodapé, 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>

Clique em Salvar Alterações.

Adicione um componente a um elemento específico

No Designer, selecione a Div ou Seção onde deseja o componente.
No painel direito, clique no ícone </> Embed (ou adicione um elemento HTML Embed pelo painel Adicionar).

Cole o HTML do componente, por exemplo:

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

Clique em Salvar & Fechar.

Código personalizado por página

Se você precisa do Wink apenas em páginas específicas, use a injeção de código por página em vez do site inteiro:

Abra as Configurações da Página para a página desejada (ícone de engrenagem no painel de Páginas).
Role até Código Personalizado → Antes da tag </body>.
Cole o mesmo script e carregador da aplicação acima.
Salve as configurações da página.

Componentes disponíveis

Componente	Tag HTML	Propósito
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.