Embed Your Signup Form on Your Website | Passtastic Help
☰

Embed Your Signup Form on Your Website

Two ways to embed

Passtastic gives you two options for adding card signup to your website:

Option 1: Wallet buttons (quick & simple)

Add "Add to Apple Wallet" and "Add to Google Wallet" buttons to your site. When a customer clicks, the card is added directly to their wallet.

Note: This option only works for cards without data collection enabled. If your card collects customer information (name, email, etc.), use Option 2 instead — the direct wallet links skip the signup form, so customer data won't be collected.

How to get the code:

1. Open your card from the dashboard.

2. Go to the Share tab.

3. Scroll to Online Sharing → Website Embed Snippet.

4. Click Copy to copy the HTML code.

5. Paste the code into your website's HTML where you want the buttons to appear.

The snippet looks like this — two image links side by side:

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>

Best for: landing pages, email signatures, blog posts — anywhere you want a simple call-to-action.

Option 2: Full embedded form (iframe)

Embed the entire signup experience directly on your page. The customer fills in their details and adds the card to their wallet without ever leaving your website.

How to get the code:

1. Go to Integrations in the sidebar.

2. Select the card you want to embed.

3. Choose Web Embedding → Get Embed Code.

4. You'll see a live preview of how the form will look. Click Copy Code.

5. Paste the code into your website.

The iframe automatically adjusts its height to fit the content, works on mobile, and doesn't show a cookie banner on the signup page.

Best for: dedicated signup pages, "join our loyalty program" sections, checkout flows.

Works with any website platform

Both options are standard HTML — they work on:

  • WordPress
  • Squarespace
  • Wix
  • Shopify
  • Custom-built websites
  • Any platform that allows HTML code blocks

Common questions

Can I style the buttons to match my website?
The wallet button snippet uses standard HTML — you can adjust the wrapper `div` styles, change the layout, or add your own CSS around it.
Can I embed the form without the iframe border?
Yes. The embed code sets `frameborder="0"` by default. You can also remove the `box-shadow` from the wrapper `div` if you want it fully seamless.
Does the embedded form collect customer data?
Yes — all data collection settings from your card (name, email, phone, custom fields) apply to the embedded form exactly like they do on the standalone signup page.
Can I embed different cards on different pages?
Yes. Each card has its own embed code. You can put your stamp card on one page and your membership card on another.
Do I need a paid plan to use embedding?
The wallet button snippet (Option 1) works on all plans. The full iframe embed (Option 2) is also available on all plans.