DOCS

Widget einbetten

So fügen Sie das tickadoo Karten-Widget zu Ihrer Website hinzu.

Es gibt zwei Möglichkeiten, das tickadoo Karten-Widget auf Ihrer Website einzubetten. Beide sind auf der Vertrieb-Seite in Ihrem Admin-Panel verfügbar.

Einfache Einbettung (empfohlen)

Fügen Sie ein einzelnes Script-Tag an beliebiger Stelle Ihrer Seite ein. Das Widget wird automatisch gerendert.

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

Die Karte erscheint an der Position des Script-Tags und füllt die Breite des übergeordneten Containers. Sie hat eine Standardhöhe, aber Sie können die Größe über CSS des übergeordneten Elements steuern.

Tip

Platzieren Sie das Script-Tag in einem Container mit definierter Höhe für beste Ergebnisse. Das Widget füllt den verfügbaren Platz aus.

Erweiterte Einbettung

Für mehr Kontrolle über Platzierung und Styling verwenden Sie den Web-Component-Ansatz:

Erweiterte Einbettung 
<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>

Mit diesem Ansatz:

  • Das defer-Attribut lädt das Script, ohne das Rendern der Seite zu blockieren
  • Das <tickadoo-map>-Element gibt Ihnen volle Kontrolle über Positionierung und Größe
  • Sie können es wie jedes andere HTML-Element mit CSS stylen

Widget-Größe anpassen

Das Widget respektiert die Dimensionen seines Containers. Hier sind gängige Muster:

Feste Höhe

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

Volle Viewport-Höhe

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

Responsiv mit Seitenverhältnis

Responsives Seitenverhältnis 
<tickadoo-map map-id="YOUR_MAP_ID" style="aspect-ratio: 16/9; width: 100%">
</tickadoo-map>
Wo sollte ich das Script-Tag platzieren?

Bei der einfachen Einbettung wird die Karte an der Position des Scripts gerendert. Platzieren Sie es in dem Bereich Ihrer Seite, in dem die Karte erscheinen soll — typischerweise ein Inhaltsbereich oder ein dedizierter Kartenbereich.

Bei der erweiterten Einbettung platzieren Sie das <script>-Tag im <head> oder am Ende des <body> und setzen das <tickadoo-map>-Element dorthin, wo die Karte erscheinen soll.

Kann ich mehrere Karten auf einer Seite einbetten?

Ja, aber jede sollte ein eigenes <tickadoo-map>-Element mit der erweiterten Einbettung verwenden. Das Script muss nur einmal geladen werden.

Mehrere Karten 
<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-Plattformen

WordPress
  1. Bearbeiten Sie die Seite oder den Beitrag, auf dem die Karte erscheinen soll
  2. Fügen Sie einen Individuelles HTML-Block hinzu (im Gutenberg-Editor)
  3. Fügen Sie den einfachen Einbettungscode ein
  4. Veröffentlichen oder aktualisieren Sie die Seite
Squarespace
  1. Bearbeiten Sie die Seite und fügen Sie einen Code-Block hinzu
  2. Fügen Sie den einfachen Einbettungscode ein
  3. Speichern und veröffentlichen
Wix
  1. Fügen Sie ein HTML einbetten-Element zu Ihrer Seite hinzu
  2. Fügen Sie den einfachen Einbettungscode in das Code-Feld ein
  3. Passen Sie die Elementgröße nach Bedarf an
  4. Veröffentlichen