Ghost

A funcionalidade integrada de Injeção de Código do Ghost permite adicionar scripts ao <head> global e ao </body> da sua publicação. Todos os planos Ghost suportam injeção de código, facilitando a incorporação de componentes Wink em qualquer página ou publicação.

Carregar scripts Wink em todo o site

No painel de administração do Ghost, vá a Configurações → Injeção de Código.

Na caixa Cabeçalho do Site, adicione a folha de estilos:

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

Na caixa Rodapé do Site, 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 Guardar.

Adicionar um componente a uma publicação ou página

O editor do Ghost suporta um cartão HTML que permite inserir HTML bruto em qualquer parte do seu conteúdo.

Abra a publicação ou página no editor do Ghost.
Digite / para abrir o seletor de cartões e selecione HTML.

Cole o HTML do componente, por exemplo:

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

Clique fora do cartão para pré-visualizar e depois publique.

Injeção de código por página

Para um componente que deve aparecer apenas numa página, o Ghost também suporta injeção de código por página:

Abra as definições da publicação ou página (ícone de engrenagem no editor).
Desça até Injeção de Código.
Adicione a tag do componente no campo Rodapé (o app-loader global só precisa estar no rodapé do site).
Guarde.

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.