How to Add an "Add to Apple Wallet" Button on Your Website
Step 1: Select a Template
Begin by navigating to the AddToWallet.co templates section. Here, you can choose from a variety of templates for business cards, lead generation passes, or membership (dynamic) passes. Alternatively, use the default template provided.
Step 2: Customize Your Pass
Once you've selected a template, you'll encounter a collapsible form where you can make essential adjustments. Customize elements such as the background color, images, front and back texts of the pass to align with your branding.
Step 3: Create Your Wallet Pass
Upon completing your customization, click the "Create wallet pass" button to generate your customized pass.
Step 4: Copy the Generated Link
After customization, a link will appear at the top of the preview. Click the copy icon to copy this link.
Step 5: Replace the buttonUrl in the Script
Next, insert the copied link into the script below, replacing the placeholder URL:
<script>
window.onload = function() {
// Paste the pass link here in the button url string
const buttonUrl="https://app.addtowallet.co/card/........";
var button = document.getElementById("addToWalletButton");
var userAgent = window.navigator.userAgent;
var img = document.getElementById("walletImage");
if (userAgent.indexOf("Chrome") != -1 && userAgent.indexOf("Safari") != -1 && userAgent.indexOf("Edg") == -1) {
img.src = "https://s3.amazonaws.com/i.addtowallet.co/assets/Add_to_Google_Wallet_badge.svg.png";
} else if (userAgent.indexOf("Safari") != -1 && userAgent.indexOf("Chrome") == -1) {
img.src = "https://s3.amazonaws.com/i.addtowallet.co/assets/add_to_apple_wallet.png";
} else {
img.src = "https://s3.amazonaws.com/i.addtowallet.co/assets/Add_to_Google_Wallet_badge.svg.png";
}
button.style.background = 'none';
button.style.border='none';
button.style.width = '250px';
button.style.height = '72px';
img.style.width = '100%';
img.style.height = '100%';
button.style.cursor = 'pointer';
button.onmousedown = function() {
button.style.transform = 'scale(0.9)';
}
button.onmouseup = function() {
button.style.transform = 'scale(1)';
}
button.onclick = function() {
window.open(buttonUrl, '_blank');
}
}
</script>
Step 6: Copy and Paste the Script
Copy the entire script above and insert it into your website's HTML at the desired location where you want the "Add to Wallet" button to appear
Step 7: Add the Button Element
Ensure your website's HTML includes a button element with the id addToWalletButton:
<button id="addToWalletButton">
<img id="walletImage" src="" alt="addToWalletButton"/>
</button>
Conclusion
Your "Add to Wallet" button is now ready for integration. For users on macOS and iOS using Safari, it will display an Apple Wallet button. For users on Windows and Android, it will display a Google Wallet button.
This straightforward guide simplifies the process of integrating a wallet pass button on your website using AddToWallet.co. Enjoy creating seamless digital experiences for your visitors!
Example of How It Looks on Your Site
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Add to Wallet</title>
</head>
<body
style="
margin: auto;
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
"
>
<h1>Add Your Custom Pass to Wallet</h1>
<p id="dynamictext"></p>
<script>
window.onload = function () {
// Paste the pass link here in the button url string
const buttonUrl = "https://app.addtowallet.co/card/378237293329";
var button = document.getElementById("addToWalletButton");
var text = document.getElementById("dynamictext");
var userAgent = window.navigator.userAgent;
var img = document.getElementById("walletImage");
if (
userAgent.indexOf("Chrome") != -1 &&
userAgent.indexOf("Safari") != -1 &&
userAgent.indexOf("Edg") == -1
) {
img.src =
"https://s3.amazonaws.com/i.addtowallet.co/assets/Add_to_Google_Wallet_badge.svg.png";
text.innerText =
"Click the button below to add your pass to Google Wallet";
} else if (
userAgent.indexOf("Safari") != -1 &&
userAgent.indexOf("Chrome") == -1
) {
img.src =
"https://s3.amazonaws.com/i.addtowallet.co/assets/add_to_apple_wallet.png";
text.innerText =
"Click the button below to add your pass to Apple Wallet";
} else {
img.src =
"https://s3.amazonaws.com/i.addtowallet.co/assets/Add_to_Google_Wallet_badge.svg.png";
text.innerText =
"Click the button below to add your pass to Google Wallet";
}
button.style.background = "none";
button.style.border = "none";
button.style.width = "250px";
button.style.height = "72px";
img.style.width = "100%";
img.style.height = "100%";
button.style.cursor = "pointer";
button.onmousedown = function () {
button.style.transform = "scale(0.9)";
};
button.onmouseup = function () {
button.style.transform = "scale(1)";
};
button.onclick = function () {
window.open(buttonUrl, "_blank");
};
};
</script>
<button id="addToWalletButton">
<img id="walletImage" src="" alt="addToWalletButton" />
</button>
</body>
</html>
This example demonstrates how you can embed the wallet pass button into your website. Simply update the buttonUrl with the generated link from your pass, and your site visitors will be able to add your custom pass to their digital wallets effortlessly.
For you
