Incorporando o Widget

Como adicionar o widget de mapa tickadoo ao seu site.

Existem duas formas de incorporar o widget de mapa tickadoo no seu site. Ambas estao disponiveis na pagina Distribuicao do seu painel administrativo.

Incorporacao simples (recomendado)

Adicione uma unica tag script em qualquer lugar da sua pagina. O widget renderiza automaticamente.

Simple embed

<script src="https://b2b.tickadoo.com/widget/map-widget.iife.js" data-connect-map="YOUR_MAP_ID"></script>

O mapa aparece na posicao da tag script e preenche a largura do seu container. Ele tem uma altura padrao, mas voce pode controlar o dimensionamento com CSS no elemento pai.

Tip

Coloque a tag script dentro de um container com altura definida para melhores resultados. O widget se expandira para preencher o espaco disponivel.

Incorporacao avancada

Para mais controle sobre posicionamento e estilo, use a abordagem de Web Component:

Advanced embed

<script src="https://b2b.tickadoo.com/widget/map-widget.iife.js" defer></script>
<tickadoo-map map-id="YOUR_MAP_ID" style="height: 500px">
</tickadoo-map>

Com esta abordagem:

O atributo defer carrega o script sem bloquear a renderizacao da pagina
O elemento <tickadoo-map> oferece controle total sobre posicionamento e dimensionamento
Voce pode estiliza-lo com CSS como qualquer outro elemento HTML

O widget respeita as dimensoes do seu container. Aqui estao padroes comuns:

Altura fixa

Fixed height container

<div style="height: 600px">
  <script src="https://b2b.tickadoo.com/widget/map-widget.iife.js" data-connect-map="YOUR_MAP_ID"></script>
</div>

Altura total do viewport

Full viewport

<tickadoo-map map-id="YOUR_MAP_ID" style="height: 100vh">
</tickadoo-map>

Responsivo com proporcao de aspecto

Responsive aspect ratio

<tickadoo-map map-id="YOUR_MAP_ID" style="aspect-ratio: 16/9; width: 100%">
</tickadoo-map>

Onde devo colocar a tag script?

Para a incorporacao simples, o mapa renderiza na posicao do script. Coloque-o dentro da secao da pagina onde voce quer que o mapa apareca — normalmente uma area de conteudo ou secao dedicada ao mapa.

Para a incorporacao avancada, coloque a tag <script> no <head> ou no final do <body>, e posicione o elemento <tickadoo-map> onde voce quiser o mapa.

Posso incorporar multiplos mapas em uma pagina?

Sim, mas cada um deve usar seu proprio elemento <tickadoo-map> com a abordagem de incorporacao avancada. O script so precisa ser carregado uma vez.

Multiple maps

<script src="https://b2b.tickadoo.com/widget/map-widget.iife.js" defer></script>
<tickadoo-map map-id="MAP_ID_1" style="height: 400px">
</tickadoo-map>
<tickadoo-map map-id="MAP_ID_2" style="height: 400px">
</tickadoo-map>

Plataformas CMS

WordPress

Edite a pagina ou post onde voce quer o mapa
Adicione um bloco de HTML Personalizado (no editor Gutenberg)
Cole o codigo de incorporacao simples
Publique ou atualize a pagina

Squarespace

Edite a pagina e adicione um bloco de Codigo
Cole o codigo de incorporacao simples
Salve e publique

Wix

Adicione um elemento Incorporar HTML na sua pagina
Cole o codigo de incorporacao simples no campo de codigo
Ajuste o tamanho do elemento conforme necessario
Publique