Wallet button widget

The wallet button widget is an Add to Wallet button you place on your own website or in your emails. When a customer who is signed in to your site (or opens your email) taps it, their pass is issued and added to Apple Wallet or Google Wallet. No enrollment form needed. It’s a distribution channel alongside the standard enrollment flow, best suited for customers who already exist in your systems. Stell provides a configurator that generates the code for you. You pick the options, see a live preview, and copy a ready-made snippet.

What you need


Program nano ID	A short identifier for your program. Stell provides it, or a pre-filled configurator link, during onboarding. Contact support if you don’t have yours.
Member identifier	Each visitor’s or recipient’s ID from your own systems: whatever your CRM uses as the member ID, typically a UUID like `8e4a00f7-e6da-4048-9684-b42801178375`. An email address also works. Your site template or email tool fills this in per person.

The configurator

Open the configurator at stell.in/embed/configurator. It has two tabs: On your site for embedding the button in web pages, and In your emails for email templates.

On the On your site tab you set:

Option	What it controls
Program nano ID	Which program the button issues passes for
Member identifier	A test value for the preview, replaced per visitor in production
Wallets	Which wallet buttons render. See the options below
Locale	The language of the button labels (defaults to the visitor’s browser language)
Layout	Whether multiple buttons stack horizontally or vertically
Base64 encode identifier	Leave on unless Stell has told you otherwise

The Preview card renders the real button with your test values. Tapping it runs the same flow your visitors get.

Wallet options

Setting	What renders on the page
Default: program config	A button for every wallet your program supports: both Add to Apple Wallet and Add to Google Wallet if your program offers both. The safe choice for most sites.
Apple Wallet	Only the Apple Wallet button, on every device.
Google Wallet	Only the Google Wallet button, on every device.
Apple + Google	Both buttons, on every device. An Android visitor will also see the Apple Wallet button, and an iPhone visitor the Google Wallet one.
Auto: detect device	Picks by the visitor’s device: only the Apple Wallet button on iPhone, only the Google Wallet button on Android, and both on desktop. Use this to avoid showing a button the visitor’s phone can’t use.

Whatever you pick, the widget never shows a button for a wallet your program doesn’t support. The selection is always filtered against your program’s configuration. Further down the page you’ll find a built-in integration guide with a pre-launch checklist, Content Security Policy notes, a Shopify example, and troubleshooting.

On computers, the widget’s buttons behave the same as in the enrollment flow: in every desktop browser except Safari on a Mac, Add to Apple Wallet opens a dialog with a QR code the visitor scans with their iPhone, and Add to Google Wallet opens Google’s save page in place. See adding the pass to a wallet.

On your site

Configure the button

Open the configurator with your program’s nano ID, enter a test member identifier, and pick wallets, locale, and layout. Check the preview.

Copy the snippet

Click Copy on the Drop it on any page card. The snippet looks like this:

<!-- Replace data-identifier with the current visitor's member ID from your site template. -->
<div
  data-program-nano-id="YOUR_PROGRAM_NANO_ID"
  data-identifier="VISITOR_MEMBER_ID"
>
  <noscript>Enable JavaScript to add this pass to your wallet.</noscript>
</div>
<script src="https://stell.in/embed/wallet-button.js" async></script>

Paste it into your page template

Place the snippet where the button should appear: a member page, order confirmation, or account area.

Make the identifier dynamic

Replace the data-identifier value with the signed-in visitor’s CRM ID or email from your site template, so every visitor gets their own pass. The button must never render with a hard-coded or shared identifier.

In your emails

The In your emails tab generates wallet links for email templates instead of a script. Email clients don’t run JavaScript, so the button is a plain image wrapped in a link.

Paste the HTML snippet from the Email links card into your email template. It contains an Add to Apple Wallet and an Add to Google Wallet button, each linking to a URL template like https://stell.in/api/pass/{nanoId}/{identifier}?wallet=apple.
At send time, have your email tool replace {nanoId} with your program’s nano ID and {identifier} with each recipient’s CRM member ID. Their email address works too.
For non-English emails, swap the button image’s /en.svg for the matching language (/nb.svg, /sv.svg, /de.svg, and so on).

Email links deliver the pass for the wallet named in the link, with no device detection or QR code hand-off — they work best tapped on the customer’s phone.

Prefer hosting images yourself? Download all assets on the same tab gives you every Apple Wallet and Google Wallet button image as a single ZIP.

Before you launch

Identifier is per-visitor. Each signed-in visitor or email recipient must get their own identifier. Test with at least two different members.
Test on a real phone. Add a pass to Apple Wallet on an iPhone and Google Wallet on an Android device, not just in a desktop browser.
Check your Content Security Policy. If your site enforces a strict CSP, allow the Stell origins. The configurator’s guide lists exactly which directives to add.
Check localization. If your audience isn’t English-speaking, set the locale (or verify auto-detect) and use matching email button images.

The full pre-launch checklist and troubleshooting guide are built into the configurator page itself, below the snippet.

Overview

Merchant onboarding

Customer enrollment

Promote your program

Support

Wallet button widget

What you need

The configurator

Wallet options

On your site

In your emails

Before you launch

​What you need

​The configurator

​Wallet options

​On your site

​In your emails

​Before you launch

What you need

The configurator

Wallet options

On your site

In your emails

Before you launch