Einbettungscode

Mit dem Einbettungscode kannst du deinen TikFlow-Ticketshop direkt in deine eigene Website integrieren. Deine Besucher kaufen Tickets, ohne deine Seite zu verlassen – nahtlos eingebettet in dein bestehendes Design.

Überblick

So funktioniert die Einbettung

Der eingebettete Ticketshop ist kein separates System – er zeigt exakt denselben Shop an, den deine Kunden auch unter tikflow.de/event/... sehen. Alles läuft über eine einzige Datenquelle:

ℹ️ Wichtig: Du musst Tickets, Kontingente und Einstellungen nur an einer Stelle pflegen. Der eingebettete Shop übernimmt alles automatisch.

Code-Generator verwenden

TikFlow stellt dir einen visuellen Code-Generator mit Live-Vorschau bereit. Du findest ihn im Dashboard unter Events → [Dein Event] → Einbettungscode.

Schritt-für-Schritt

1. Event öffnen

   • Gehe ins Dashboard und wähle das gewünschte Event
   • Klicke im Seitenmenü auf „Einbettungscode"

2. Darstellung anpassen

   • Wähle Theme, Akzentfarbe und ob der TikFlow-Header sichtbar sein soll
   • Die Live-Vorschau aktualisiert sich sofort bei jeder Änderung

3. Code kopieren

   • Klicke auf „Code kopieren"
   • Füge den kopierten iFrame-Code in deine Website ein

4. Testen

   • Öffne deine Website und prüfe, ob der Shop korrekt angezeigt wird
   • Teste den kompletten Kaufprozess bis zur Bestätigungsseite

Anpassungsoptionen

Theme

Akzentfarbe

Die Akzentfarbe wird auf Buttons und interaktive Elemente angewendet. Wähle eine Farbe, die zu deinem Markenauftritt passt. Im Code-Generator kannst du die Farbe per Color-Picker oder als Hex-Wert eingeben.

Header ausblenden

ℹ️ Empfehlung: Wenn du den Shop visuell nahtlos in deine Seite integrieren möchtest, blende den Header aus und passe die Akzentfarbe an dein Design an.

Sicherheit & Datenschutz

Die Einbettung erfolgt über eine verschlüsselte HTTPS-Verbindung. Deine Besucher sind genauso geschützt wie beim direkten Aufruf des Ticketshops.

ℹ️ Hinweis: Die Zahlungsabwicklung erfolgt durch Stripe bzw. PayPal. Kreditkarten- und Bankdaten werden zu keinem Zeitpunkt von TikFlow oder deiner Website verarbeitet oder gespeichert.

Plattform-Anleitungen

WordPress

1. Öffne die Seite oder den Beitrag, in dem der Shop erscheinen soll
2. Füge einen „Eigenes HTML"-Block hinzu (im Block-Editor unter „Widgets")
3. Füge den kopierten iFrame-Code ein
4. Speichere und veröffentliche die Seite

┌──────────────────────────────────────────────────────┐
│ WordPress Block-Editor                               │
├──────────────────────────────────────────────────────┤
│                                                      │
│  [+ Block hinzufügen]                                │
│                                                      │
│  → Widgets → Eigenes HTML                            │
│                                                      │
│  ┌────────────────────────────────────────────────┐  │
│  │ <iframe src="https://tikflow.de/embed/..."     │  │
│  │   width="100%" height="800"                    │  │
│  │   frameborder="0">                             │  │
│  │ </iframe>                                      │  │
│  └────────────────────────────────────────────────┘  │
│                                                      │
│  [Vorschau]  [HTML]                                  │
│                                                      │
└──────────────────────────────────────────────────────┘

ℹ️ Tipp: In WordPress-Themes mit Page-Buildern wie Elementor oder Divi gibt es eigene HTML-Widgets, die genauso funktionieren.

Wix

1. Öffne den Wix-Editor
2. Klicke auf „Hinzufügen" → „Einbetten" → „HTML einbetten"
3. Wähle „Code" und füge den iFrame-Code ein
4. Passe die Größe des Elements auf deiner Seite an

Squarespace

1. Bearbeite die gewünschte Seite
2. Füge einen „Code"-Block hinzu
3. Füge den iFrame-Code ein und speichere

Andere Plattformen

Der iFrame-Code funktioniert auf jeder Plattform, die HTML-Einbettung unterstützt. Suche in deinem Website-Builder nach einer Option wie „HTML einbetten", „Custom HTML", „Code-Block" oder „Embed".

Fehlerbehebung

Der Shop wird nicht angezeigt

Der Shop ist zu klein / abgeschnitten

Die Farben passen nicht zu meiner Seite

Gehe zurück in den Code-Generator im Dashboard und passe Akzentfarbe und Theme an. Kopiere anschließend den aktualisierten Code.

Häufige Fragen

Beeinflusst die Einbettung mein SEO?

Nein. Der eingebettete Shop ist mit noindex markiert und wird von Suchmaschinen nicht indexiert. Dein eigenes SEO bleibt unberührt.

Kann ich mehrere Shops auf einer Seite einbetten?

Ja – zum Beispiel wenn du mehrere Standorte hast (etwa drei Schwimmbäder), aber nur eine Website. Statt alle iFrames gleichzeitig zu laden, empfehlen wir eine Tab-Lösung: Reiter für jeden Standort, wobei immer nur der aktive Shop geladen wird.

+---------------------------------------------------------+
|                                                         |
|  [Freibad Nord]  [Hallenbad Sued]  [Therme West]        |
|                                                         |
|  +---------------------------------------------------+  |
|  |                                                   |  |
|  |         Ticketshop Freibad Nord                   |  |
|  |         (aktiver iFrame)                          |  |
|  |                                                   |  |
|  +---------------------------------------------------+  |
|                                                         |
+---------------------------------------------------------+

Kopiere dafür folgendes Code-Beispiel und ersetze die drei Embed-URLs mit deinen eigenen (aus dem Code-Generator):

<div id="tikflow-tabs">
  <style>
    #tikflow-tabs { font-family: sans-serif; }
    #tikflow-tabs .tabs { display: flex; gap: 4px; margin-bottom: -1px; }
    #tikflow-tabs .tab {
      padding: 10px 20px; border: 1px solid #ddd; border-bottom: none;
      border-radius: 8px 8px 0 0; background: #f5f5f5; cursor: pointer;
      font-size: 15px; color: #555; transition: all 0.15s;
    }
    #tikflow-tabs .tab.active { background: #fff; color: #111; font-weight: 600; }
    #tikflow-tabs .frame { border: 1px solid #ddd; border-radius: 0 0 8px 8px; }
    #tikflow-tabs iframe { display: block; width: 100%; height: 800px; border: none; }
  </style>
 
  <div class="tabs">
    <button class="tab active" onclick="tikflowSwitch(0)">🏊 Freibad Nord</button>
    <button class="tab" onclick="tikflowSwitch(1)">🏊 Hallenbad Süd</button>
    <button class="tab" onclick="tikflowSwitch(2)">🏊 Therme West</button>
  </div>
  <div class="frame">
    <iframe id="tikflow-frame" src="https://tikflow.de/embed/DEINE_EVENT_ID_1/slug"></iframe>
  </div>
 
  <script>
    var tikflowUrls = [
      "https://tikflow.de/embed/DEINE_EVENT_ID_1/slug",
      "https://tikflow.de/embed/DEINE_EVENT_ID_2/slug",
      "https://tikflow.de/embed/DEINE_EVENT_ID_3/slug"
    ];
    function tikflowSwitch(i) {
      document.getElementById("tikflow-frame").src = tikflowUrls[i];
      document.querySelectorAll("#tikflow-tabs .tab").forEach(function(t, j) {
        t.classList.toggle("active", j === i);
      });
    }
  </script>
</div>

ℹ️ Tipp: Durch das Umschalten wird immer nur ein iFrame geladen – das spart Bandbreite und sorgt für schnelle Ladezeiten, egal wie viele Standorte du anbietest.

Was sehen meine Kunden nach dem Kauf?

Die Bestätigungsseite wird direkt im iFrame angezeigt – inklusive Bestelldetails und Download-Link für die Tickets. Der Kunde bleibt die gesamte Zeit auf deiner Website.

Funktioniert die Einbettung auf Mobilgeräten?

Ja. Der eingebettete Shop ist vollständig responsive und passt sich automatisch an die Bildschirmbreite an. Setze width="100%" für optimale Darstellung.

Muss ich den Code aktualisieren, wenn sich am Event etwas ändert?

Nein. Der Einbettungscode verweist auf dein Event – Änderungen an Tickets, Preisen, Beschreibungen oder Kontingenten werden automatisch übernommen, ohne dass du den Code anfassen musst.

Brauche ich technische Kenntnisse?

Nein. Der Code-Generator erstellt den fertigen Code – du musst ihn nur kopieren und in deine Website einfügen. Grundkenntnisse im Umgang mit deinem Website-Editor reichen aus.

Verwandte Funktionen