DOCS

Advanced Usage

Advanced embedding techniques, performance tips, and integration patterns.

Widget attributes

The <tickadoo-map> web component accepts these attributes:

Attribute Type Default Description
map-id string — Your map ID (required)
locale string "en" UI language. Bundled: en, de, cs, es, fr, it. Other values fall back to English.
theme string "system" Color theme: light, dark, or system
mobile-list-variant string "carousel" Mobile experience list style: carousel or drawer
enable-routing boolean false Show directions with walk/bike/drive transport mode selector
center string — Initial map center as "lng,lat" (e.g. "14.42,50.08")
zoom number 10 Initial zoom level (1–20)
booking-mode string "calendar" Booking flow type
use-category-colors boolean false Use category-specific marker colors

Lazy loading

If the map isn’t immediately visible (e.g., below the fold or in a tab), defer loading to improve page performance:

Lazy loading
<tickadoo-map map-id="YOUR_MAP_ID" style="height: 500px" loading="lazy">
</tickadoo-map>

With loading="lazy", the map initializes only when the element enters the viewport.

Responsive design

The widget is responsive by default, but here are patterns for common layouts:

Full-width section

Full-width section
<section style="width: 100%; height: 70vh; min-height: 400px">
  <tickadoo-map map-id="YOUR_MAP_ID" style="width: 100%; height: 100%">
  </tickadoo-map>
</section>
Sidebar layout
<div style="display: flex; gap: 1rem; height: 600px">
  <div style="flex: 1">
    <!-- Your content -->
  </div>
  <tickadoo-map map-id="YOUR_MAP_ID" style="flex: 1">
  </tickadoo-map>
</div>

Content Security Policy (CSP)

If your site uses a Content Security Policy, you’ll need to allow these domains:

Directive Domain Purpose
script-src b2b.tickadoo.com Widget script
script-src calendar-js.tickadoo.com Booking calendar script
connect-src concierge.tickadoo.com API requests
connect-src calendar-js.tickadoo.com Booking calendar translations
connect-src pmtiles.tickadoo.com Map tile data
connect-src mapbox.tickadoo.com Routing services
img-src *.tickadoo.com Images and icons
style-src 'unsafe-inline' Widget styles
CSP header example
Content-Security-Policy:
  script-src 'self' b2b.tickadoo.com calendar-js.tickadoo.com;
  connect-src 'self' concierge.tickadoo.com calendar-js.tickadoo.com pmtiles.tickadoo.com mapbox.tickadoo.com;
  img-src 'self' *.tickadoo.com;
  style-src 'self' 'unsafe-inline';
Performance considerations

The widget script is approximately 315KB gzipped (including the map renderer). It loads map tiles on demand as the user pans and zooms. For best performance:

  • Use defer on the script tag to avoid blocking page rendering
  • Use loading="lazy" on the web component if it’s below the fold
  • The widget automatically handles tile caching in the browser
Single Page Applications (SPAs)

If your site is a SPA (React, Vue, Angular, etc.), use the web component approach. The <tickadoo-map> element works with any framework’s DOM rendering.

For React specifically:

React usage
function MapSection({ mapId }: { mapId: string }) {
  return (
    <div style={{ height: "500px" }}>
      <tickadoo-map map-id={mapId} />
    </div>
  );
}

Make sure the script is loaded once, e.g., in your index.html or via a useEffect in a top-level component.

Tip

An official React package (@tickadoo/map-react) is available for first-class integration. Contact us at support@tickadoo.com for access. The web component also works as an ESM module for other frameworks.