Webflow
O Webflow suporta HTML e JavaScript personalizados em três locais: o <head> do site inteiro, o </body> do site inteiro e incorporações de código por elemento. Isto torna a integração dos componentes web Wink simples.
Carregar scripts Wink no site inteiro
Seção intitulada “Carregar scripts Wink no site inteiro”- No Webflow Designer, abra Project Settings → Custom Code.
- Na secção Head Code, adicione a folha de estilos:
<link rel="stylesheet" href="https://elements.wink.travel/styles.css">
- Na secção Footer Code, 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 Save Changes.
Adicionar um componente a um elemento específico
Seção intitulada “Adicionar um componente a um elemento específico”- No Designer, selecione o Div ou Section onde pretende o componente.
- No painel da direita, clique no ícone
</>Embed (ou adicione um elemento HTML Embed a partir do painel Add). - Cole o HTML do componente, por exemplo:
<wink-content-loaderlayout="RANKED"id="YOUR_LAYOUT_ID"></wink-content-loader>
- Clique em Save & Close.
Código personalizado por página
Seção intitulada “Código personalizado por página”Se precisar 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 Page Settings da página alvo (ícone de engrenagem no painel Pages).
- Desça até Custom Code → Before
</body>tag. - Cole o mesmo script e carregador da aplicação acima.
- Guarde as definições da página.
Componentes disponíveis
Seção intitulada “Componentes disponíveis”| Componente | Tag HTML | Finalidade |
|---|---|---|
| Content loader | <wink-content-loader> | Exibir cartões de hotéis, grelhas, mapas |
| Lookup | <wink-lookup> | Barra de pesquisa para destinos |
| Search button | <wink-search-button> | Abrir seletor de itinerário |
| Account button | <wink-account-button> | Iniciar sessão / menu do utilizador |
| 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 |
Consulte Web Components para a referência completa de atributos.