Como criar um widget

Visão geral

O widget de reservas do TicketingHub é uma ferramenta JavaScript que se integra em sites, permitindo que os clientes façam reservas de produtos diretamente. Pode criá-lo no painel, configurá-lo secção por secção e colar um pequeno trecho de código no seu site.

Navegadores compatíveis

Safari 16.4+, Chrome 111+, Firefox 128+.

No painel, aceda a Widgets
Clique em Novo widget
Dê um nome ao widget, selecione os produtos que deve vender e clique em Criar widget

Será direcionado para a página de definições do widget, onde pode configurar todos os restantes elementos. No lado esquerdo encontram-se as definições, agrupadas por secções; no lado direito é apresentada uma pré-visualização em tempo real do widget, que é atualizada à medida que faz alterações.

O que vende

Escolha os produtos, pacotes e cartões-presente disponibilizados pelo widget, inclua extras (todos ou apenas uma seleção feita por si) e decida se os clientes podem comprar os produtos como vouchers-presente ou utilizar vouchers-presente no widget.

Fluxo de reservas

Escolha como os clientes navegam pelo widget: Bilhetes primeiro (escolhem os bilhetes e depois uma data e hora), Evento primeiro (consultam um calendário e depois escolhem o que reservar) ou Apenas utilização de vouchers. Também pode definir a vista predefinida do calendário e pedir aos clientes que introduzam o respetivo e-mail duas vezes para evitar erros de digitação.

Regras de vendas

Controle quando e o que o widget vende: a data e hora de início das vendas, a data em que o calendário é aberto, quando deve ser apresentada a disponibilidade restante de um horário e as moedas em que os clientes podem pagar. Se a primeira semana ou o primeiro mês apresentado pelo calendário não tiver nada disponível para reserva, o calendário avança e abre na primeira data que tenha disponibilidade.

Aparência

Adicione CSS personalizado para ajustar o aspeto do widget e adaptá-lo à sua marca.

Análises

Ligue o Google Analytics ou o Google Tag Manager para acompanhar a forma como os visitantes utilizam o seu widget.

Avançado

Envie os clientes para uma página à sua escolha após a compra e defina o parâmetro de URL utilizado pelos seus revendedores para que as respetivas reservas lhes sejam atribuídas.

Pré-visualizar, publicar e implementar

As alterações que fizer são guardadas como rascunho numa pré-visualização em tempo real — clique em Atualizar pré-visualização para as ver à direita sem afetar o widget publicado. Quando estiver satisfeito, clique em Publicar para as disponibilizar ou em Cancelar para eliminar o rascunho.

Para colocar o widget no seu site, abra Instruções de instalação: copie a etiqueta de script para a sua página, escolha entre o widget Integrado (aparece diretamente no conteúdo da página) e o widget Modal/Pop-up (abre numa sobreposição a partir de um botão) e cole o trecho correspondente.

Quando um cliente avança para o passo seguinte, o widget desloca-se novamente para o topo do formulário de reserva, para que um cliente que tenha descido por uma lista longa de bilhetes não fique a meio do passo seguinte. Se tiver colocado o widget dentro de um painel próprio com deslocamento, é esse painel que se move, e a sua página só se move também quando o próprio painel tiver saído da área visível. Isto acontece quando o topo do formulário deixa de estar visível e quando o formulário ultrapassa a parte inferior do ecrã, havendo ainda espaço suficiente acima dele. Um formulário que já caiba no ecrã permanece onde está, e o widget deixa espaço para um cabeçalho fixo no topo da página.

Se este comportamento não for adequado ao seu layout, impeça a deslocação da página adicionando "scrollOnStepChange": false ao código do widget que colou:

<div id="embed_widget" data-th-embed data-th-config='{"widgetId":"YOUR-WIDGET-ID","scrollOnStepChange":false}'></div>

Se o seu cabeçalho se ocultar quando os visitantes descem a página e reaparecer quando sobem, o widget não conseguirá medi-lo e o topo do formulário poderá ficar atrás dele. Em vez de desativar a deslocação, indique ao widget a altura do cabeçalho em píxeis:

<div id="embed_widget" data-th-embed data-th-config='{"widgetId":"YOUR-WIDGET-ID","scrollOffset":80}'></div>

Se utilizar o editor de widgets clássico, pode duplicar um widget em vez de o criar novamente:

Aceda a Widgets
Selecione um widget existente
Clique em Clonar
Escolha o canal de destino e confirme a seleção

Personalize o widget clonado, publique-o e copie o código para o seu site.