DOCS

Embedding the Widget

How to add the tickadoo map widget to your website.

There are two ways to embed the tickadoo map widget on your website. Both are available on the Distribution page in your admin panel.

Add a single script tag anywhere in your page. The widget renders automatically.

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

The map appears at the position of the script tag and fills the width of its container. It has a default height, but you can control sizing with CSS on the parent element.

Tip

Place the script tag inside a container with a defined height for the best results. The widget will expand to fill the available space.

Advanced embed

For more control over placement and styling, use the web component approach:

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>

With this approach:

  • The defer attribute loads the script without blocking page rendering
  • The <tickadoo-map> element gives you full control over positioning and sizing
  • You can style it with CSS like any other HTML element

Sizing the widget

The widget respects its container’s dimensions. Here are common patterns:

Fixed height

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>

Full viewport height

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

Responsive with aspect ratio

Responsive aspect ratio 
<tickadoo-map map-id="YOUR_MAP_ID" style="aspect-ratio: 16/9; width: 100%">
</tickadoo-map>
Where should I place the script tag?

For the simple embed, the map renders at the script’s position. Place it inside the section of your page where you want the map to appear — typically a content area or dedicated map section.

For the advanced embed, place the <script> tag in the <head> or at the end of <body>, and put the <tickadoo-map> element wherever you want the map.

Can I embed multiple maps on one page?

Yes, but each should use its own <tickadoo-map> element with the advanced embed approach. The script only needs to be loaded once.

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>

CMS platforms

WordPress
  1. Edit the page or post where you want the map
  2. Add a Custom HTML block (in the Gutenberg editor)
  3. Paste the simple embed code
  4. Publish or update the page
Squarespace
  1. Edit the page and add a Code block
  2. Paste the simple embed code
  3. Save and publish
Wix
  1. Add an Embed HTML element to your page
  2. Paste the simple embed code into the code field
  3. Adjust the element size as needed
  4. Publish