How to Add an "Add to Apple Wallet" Button on Your Website
Step 1: Select a Template
First, open the AddToWallet.co templates section. You can choose from various templates for business cards, lead generation passes, or membership (dynamic) passes. If you prefer, you can use the default template provided.
Step 2: Customize Your Pass
After selecting a template, you’ll see a collapsible form where you can make necessary changes. You can customize the background color, images, front texts, and back texts of the pass.
Step 3: Create Your Wallet Pass
Once you’re satisfied with your customization, click the "Create wallet pass" button.
Step 4: Copy the Generated Link
A link will appear on top of the preview. Copy this link by clicking copy icon.
Step 5: Replace the buttonUrl in the Script
Replace the buttonUrl in the script below with the copied link.
<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 paste it into your website's HTML where you want the "Add to Wallet" button to appear.
Step 7: Add the Button Element
Ensure you have a button element with the id addToWalletButton in your website’s HTML.
<button id="addToWalletButton">
<img id="walletImage" src="" alt="addToWalletButton"/>
</button>
Done!
Your "Add to Wallet" button is now ready. For Safari users on macOS and iOS, it will display an Apple Wallet button, and for Windows and Android users, it will display a Google Wallet button.
This simple guide makes it easy for you to integrate a wallet pass button on your website using AddToWallet.co. Happy creating!
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.