Anmeldeformular auf Ihrer Website einbetten | Passtastic Help
☰

Anmeldeformular auf Ihrer Website einbetten

Zwei Möglichkeiten zur Einbettung

Passtastic bietet Ihnen zwei Optionen, um die Kartenanmeldung auf Ihrer Website einzubinden:

Option 1: Wallet-Buttons (schnell & einfach)

Fügen Sie „Zu Apple Wallet hinzufügen"- und „Zu Google Wallet hinzufügen"-Buttons auf Ihrer Seite ein. Wenn ein Kunde klickt, wird die Karte direkt zu seinem Wallet hinzugefügt.

Hinweis: Diese Option funktioniert nur bei Karten ohne aktivierte Datenerfassung. Wenn Ihre Karte Kundendaten erfasst (Name, E-Mail usw.), verwenden Sie stattdessen Option 2 — die direkten Wallet-Links überspringen das Anmeldeformular, sodass keine Kundendaten erfasst werden.

So erhalten Sie den Code:

1. Öffnen Sie Ihre Karte vom Dashboard.

2. Gehen Sie zum Teilen-Tab.

3. Scrollen Sie zu Online teilen → Website-Einbettungscode.

4. Klicken Sie auf Kopieren, um den HTML-Code zu kopieren.

5. Fügen Sie den Code in das HTML Ihrer Website ein, wo die Buttons erscheinen sollen.

Das Snippet sieht so aus — zwei Bild-Links nebeneinander:

html
<!-- Passtastic Pass Embed -->
<div style="display: flex; gap: 10px; margin: 20px 0;">
  <a href="YOUR_APPLE_LINK" target="_blank">
    <img src="https://passtastic.io/landing/apple-wallet.svg"
         alt="Add to Apple Wallet" width="120">
  </a>
  <a href="YOUR_GOOGLE_LINK" target="_blank">
    <img src="https://passtastic.io/landing/google-wallet.svg"
         alt="Add to Google Wallet" width="120">
  </a>
</div>

Ideal für: Landingpages, E-Mail-Signaturen, Blogbeiträge — überall, wo Sie einen einfachen Call-to-Action möchten.

Option 2: Vollständiges eingebettetes Formular (iFrame)

Betten Sie das gesamte Anmeldeerlebnis direkt auf Ihrer Seite ein. Der Kunde füllt seine Daten aus und fügt die Karte zum Wallet hinzu, ohne Ihre Website zu verlassen.

So erhalten Sie den Code:

1. Gehen Sie zu Integrationen in der Seitenleiste.

2. Wählen Sie die Karte aus, die Sie einbetten möchten.

3. Wählen Sie Web-Einbettung → Einbettungscode erhalten.

4. Sie sehen eine Live-Vorschau des Formulars. Klicken Sie auf Code kopieren.

5. Fügen Sie den Code in Ihre Website ein.

Der iFrame passt seine Höhe automatisch an den Inhalt an, funktioniert auf Mobilgeräten und zeigt auf der Anmeldeseite kein Cookie-Banner an.

Ideal für: Dedizierte Anmeldeseiten, „Treueprogramm beitreten"-Bereiche, Checkout-Prozesse.

Funktioniert mit jeder Website-Plattform

Beide Optionen sind Standard-HTML — sie funktionieren auf:

  • WordPress
  • Squarespace
  • Wix
  • Shopify
  • Individuell erstellten Websites
  • Jeder Plattform, die HTML-Codeblöcke erlaubt

Häufige Fragen

Kann ich die Buttons an mein Website-Design anpassen?
Das Wallet-Button-Snippet verwendet Standard-HTML — Sie können die Styles des Wrapper-`div` anpassen, das Layout ändern oder eigenes CSS drumherum hinzufügen.
Kann ich das Formular ohne iFrame-Rahmen einbetten?
Ja. Der Einbettungscode setzt standardmäßig `frameborder="0"`. Sie können auch den `box-shadow` vom Wrapper-`div` entfernen, wenn Sie es nahtlos einbinden möchten.
Erfasst das eingebettete Formular Kundendaten?
Ja — alle Datenerfassungs-Einstellungen Ihrer Karte (Name, E-Mail, Telefon, benutzerdefinierte Felder) gelten für das eingebettete Formular genauso wie für die eigenständige Anmeldeseite.
Kann ich verschiedene Karten auf verschiedenen Seiten einbetten?
Ja. Jede Karte hat ihren eigenen Einbettungscode. Sie können Ihre Stempelkarte auf einer Seite und Ihre Mitgliedskarte auf einer anderen platzieren.
Brauche ich einen bezahlten Tarif für die Einbettung?
Das Wallet-Button-Snippet (Option 1) funktioniert in allen Tarifen. Das vollständige iFrame-Embed (Option 2) ist ebenfalls in allen Tarifen verfügbar.