```json
{
    "title": "How to embed googlewallet or applewallet button on weebly",
    "url": "https://addtowallet.co/how-to-embed-googlewallet-or-applewallet-button-on-weebly/",
    "datePublished": "2024-05-13",
    "dateModified": "2025-08-21",
    "language": "en-US",
    "description": "{{ brizy_dc_global_blocks position='top' }}How to embed Google Wallet or Apple Wallet button on WeeblyHow add to google/apple wallet button works? You can embed a dynamic button on your WordPress site…",
    "author": "ooha",
    "publisher": "AddToWallet.co"
}
```

# How to embed googlewallet or applewallet button on weebly

{{ brizy_dc_global_blocks position='top' }}How to embed Google Wallet or Apple Wallet button on WeeblyHow add to google/apple wallet button works?

You can embed a dynamic button on your WordPress site that adjusts its appearance based on the user's browser. For instance, if someone is using Safari, the button will display "add to apple wallet " button, and if they're on Chrome it will show "add to google wallet" button. This button will direct users to add a apple or google pass to their wallet that you have created

Add to Google Wallet Button (Chrome View)

 #addToWalletButton1 {
 background: none;
 border: none;
 cursor:pointer;
 }

window.onload = function() {

 var button1 = document.getElementById("addToWalletButton1");
 var img1 = document.getElementById('walletImage1');
 button1.style.background = 'none';
 button1.style.border='none';
 button1.style.width = '250px';
 button1.style.height = '72px';
 img1.style.width = '100%';
 img1.style.height = '100%';
 button1.style.cursor = 'pointer';
 button1.onmousedown = function() {
 button1.style.transform = 'scale(0.9)';
}
button1.onmouseup = function() {
button1.style.transform = 'scale(1)';
}
button1.onclick = function() {
window.open('https://app.addtowallet.co/card/........', '_blank');
}
}

 Add to Apple Wallet Button (Safari View)

 #addToWalletButton1 {
 background: none;
 border: none;
 cursor:pointer;
 height:72px;
 width:252px;
 }

window.onload = function() {

 var button1 = document.getElementById("addToWalletButton1");
 var img1 = document.getElementById('walletImage1');
 button1.style.background = 'none';
 button1.style.border='none';
 button1.style.width = '250px';
 button1.style.height = '72px';
 img1.style.width = '100%';
 img1.style.height = '100%';
 button1.style.cursor = 'pointer';
 button1.onmousedown = function() {
 button1.style.transform = 'scale(0.9)';
}
button1.onmouseup = function() {
button1.style.transform = 'scale(1)';
}
button1.onclick = function() {
window.open('https://app.addtowallet.co/card/........', '_blank');
}
}

How to embed ?

1)Open the Weebly editor for your website.

2)Find the Embed Code element under the Basic section of the Build tab.

3)Drag and drop the Embed Code element to the location on your page where you want the addtowallet button to appear.

4)Then click on Edit custom HTML.

5) Paste the code snippet given below inside the block that appears.

<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>
<button id="addToWalletButton">
<img id="walletImage" src="" alt="addToWalletButton"/>
</button>

.code-snippet {
 background-color: #f4f4f4;
 border-left: 4px solid #d1d1d1;
 font-family: monospace;
 padding: 10px;
 margin: 10px 0;
 overflow-x: auto;
 white-space: pre-wrap;
 word-wrap: break-word;
 overflow: hidden;
}
pre{
 overflow: hidden;
}
.comment {
 color: red;
}
.url{
 color: green;
}
6) Replace the buttonUrl string with the pass url that you have created. You can copy the url after creating a pass and clicking on the copy icon.

[GENERATE PASS URL](https://app.addtowallet.co/)7) Click outside the block added to preview the google or apple add to wallet button on your weebly page.

[Create Wallet Pass Now](https://app.addtowallet.co)Get Started For Free

Free Templates

Edit Multiple Pass

View Pass Usage Stats

Join the expanding network of more than **10k+ users**

No credit card needed to start trial

[CREATE YOUR PASS FOR FREE](https://app.addtowallet.co/?signIn=true)[addtowallet](http://%7B%7Bplaceholder%20content=)**.co **

[FAQs](https://addtowallet.co/faqs)[Blog](https://addtowallet.co/blog)[Privacy policy](https://addtowallet.co/privacy-policy)[Terms & conditions](https://addtowallet.co/terms)addtowallet.co © All Rights Reserved

{{ brizy_dc_global_blocks position='bottom' }}