Squarespace

O Squarespace suporta HTML e JavaScript personalizados, o que significa que pode incorporar qualquer componente web Wink diretamente no seu site sem um plugin. Este guia mostra como carregar os scripts Wink em todo o site e depois colocar componentes em páginas individuais.

Carregar scripts Wink em todo o site

Adicionar os scripts ao rodapé e cabeçalho globais do seu site significa que o Wink estará disponível em todas as páginas sem repetir a configuração.

No editor do Squarespace, vá a Settings → Advanced → Code Injection.

No campo Header, adicione a folha de estilos:

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

No campo Footer, adicione o script e o carregador da aplicação (substitua YOUR_CLIENT_ID pelo seu Client ID Wink):

<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.

Adicionar um componente a uma página

Depois de carregar os scripts globalmente, pode inserir qualquer componente Wink em qualquer página usando um Code Block.

Abra a página que deseja editar.
Clique em Edit e adicione um novo bloco Code onde quer que o componente apareça.

Cole o HTML do componente, por exemplo um content loader:

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

Clique em Apply e depois em Save.

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 dos atributos de cada componente.