DOCS

Vložení widgetu

Jak přidat mapový widget tickadoo na váš web.

Existují dva způsoby, jak vložit mapový widget tickadoo na váš web. Oba jsou dostupné na stránce Distribuce ve vašem administračním panelu.

Jednoduché vložení (doporučeno)

Přidejte jediný script tag kamkoli na stránku. Widget se vykreslí automaticky.

Jednoduché vložení 
<script src="https://b2b.tickadoo.com/widget/map-widget.iife.js" data-connect-map="YOUR_MAP_ID"></script>

Mapa se zobrazí na pozici script tagu a vyplní šířku nadřazeného kontejneru. Má výchozí výšku, ale velikost můžete řídit pomocí CSS na nadřazeném elementu.

Tip

Umístěte script tag do kontejneru s definovanou výškou pro nejlepší výsledky. Widget se roztáhne a vyplní dostupný prostor.

Pokročilé vložení

Pro větší kontrolu nad umístěním a stylováním použijte přístup s web komponentou:

Pokročilé vložení 
<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>

S tímto přístupem:

  • Atribut defer načítá script bez blokování vykreslování stránky
  • Element <tickadoo-map> vám dává plnou kontrolu nad umístěním a velikostí
  • Můžete ho stylovat pomocí CSS jako jakýkoli jiný HTML element

Nastavení velikosti widgetu

Widget respektuje rozměry svého kontejneru. Zde jsou běžné vzory:

Pevná výška

Kontejner s pevnou výškou 
<div style="height: 600px">
  <script src="https://b2b.tickadoo.com/widget/map-widget.iife.js" data-connect-map="YOUR_MAP_ID"></script>
</div>

Plná výška viewportu

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

Responzivní s poměrem stran

Responzivní poměr stran 
<tickadoo-map map-id="YOUR_MAP_ID" style="aspect-ratio: 16/9; width: 100%">
</tickadoo-map>
Kam bych měl umístit script tag?

Při jednoduchém vložení se mapa vykreslí na pozici scriptu. Umístěte ho do sekce stránky, kde chcete mapu zobrazit — typicky do oblasti obsahu nebo vyhrazené mapové sekce.

Při pokročilém vložení umístěte <script> tag do <head> nebo na konec <body> a element <tickadoo-map> umístěte tam, kde chcete mapu zobrazit.

Mohu vložit více map na jednu stránku?

Ano, ale každá by měla používat vlastní element <tickadoo-map> s pokročilým přístupem vložení. Script stačí načíst pouze jednou.

Více map 
<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>

CMS platformy

WordPress
  1. Upravte stránku nebo příspěvek, kde chcete mapu zobrazit
  2. Přidejte blok Vlastní HTML (v editoru Gutenberg)
  3. Vložte kód jednoduchého vložení
  4. Publikujte nebo aktualizujte stránku
Squarespace
  1. Upravte stránku a přidejte blok Kód
  2. Vložte kód jednoduchého vložení
  3. Uložte a publikujte
Wix
  1. Přidejte na stránku element Vložit HTML
  2. Vložte kód jednoduchého vložení do pole pro kód
  3. Upravte velikost elementu podle potřeby
  4. Publikujte