Ghost

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

Carregar scripts Wink em todo o site

No painel do Ghost Admin, vá para 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 Salvar.

Adicionar um componente a um post ou página

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

Abra o post 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 visualizar, depois publique.

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

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

Abra as configurações do post ou página (ícone de engrenagem no editor).
Role até Injeção de Código.
Adicione a tag do componente no campo Rodapé (o app-loader global precisa estar apenas no rodapé do site).
Salve.

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.