```json
{
    "title": "How to Set Up Custom Domains with AddToWallet",
    "url": "https://addtowallet.co/how-to-setup-custom-domains-with-addtowallet/",
    "datePublished": "2025-12-03",
    "dateModified": "2025-12-03",
    "language": "en-US",
    "description": "{{ brizy_dc_global_blocks position='top' }}How to Set Up Custom Domains with AddToWallet Integrating Custom Domains with AddToWallet - Complete Guide Custom domains allow you to display your digital wallet passes on…",
    "author": "Fahiz",
    "publisher": "AddToWallet.co"
}
```

# How to Set Up Custom Domains with AddToWallet

{{ brizy_dc_global_blocks position='top' }}How to Set Up Custom Domains with AddToWallet

 Integrating Custom Domains with AddToWallet - Complete Guide

 * {

 margin: 0;
 padding: 0;
 box-sizing: border-box;
 }

 body {
 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
 line-height: 1.6;
 color: #333;
 background-color: #ffffff;
 }

 .blog-container {
 max-width: 900px;
 margin: 0 auto;
 padding: 20px;
 }

 .header-image {
 width: 100%;
 max-width: 100%;
 height: auto;
 display: block;
 margin: 0 auto 40px;
 border-radius: 8px;
 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }

 h1 {
 font-size: 2.5em;
 margin-bottom: 20px;
 color: #1a1a1a;
 font-weight: 700;
 line-height: 1.2;
 }

 h2 {
 font-size: 1.8em;
 margin-top: 40px;
 margin-bottom: 20px;
 color: #2c3e50;
 font-weight: 600;
 border-bottom: 2px solid #e0e0e0;
 padding-bottom: 10px;
 }

 h3 {
 font-size: 1.4em;
 margin-top: 30px;
 margin-bottom: 15px;
 color: #34495e;
 font-weight: 600;
 }

 p {
 margin-bottom: 15px;
 font-size: 1.05em;
 color: #555;
 }

 .intro {
 font-size: 1.15em;
 color: #666;
 margin-bottom: 30px;
 padding: 20px;
 background-color: #f8f9fa;
 border-left: 4px solid #007AFF;
 border-radius: 4px;
 }

 .code-block {
 position: relative;
 background-color: #1e1e1e;
 border-radius: 8px;
 padding: 20px;
 margin: 20px 0;
 overflow-x: auto;
 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }

 .code-block code {
 color: #d4d4d4;
 font-family: 'Courier New', Courier, monospace;
 font-size: 0.9em;
 line-height: 1.5;
 white-space: pre;
 }

 .copy-button {
 position: absolute;
 top: 10px;
 right: 10px;
 background-color: #007AFF;
 color: white;
 border: none;
 padding: 8px 16px;
 border-radius: 4px;
 cursor: pointer;
 font-size: 0.85em;
 font-weight: 500;
 transition: background-color 0.2s;
 }

 .copy-button:hover {
 background-color: #0056b3;
 }

 .copy-button:active {
 background-color: #004085;
 }

 .image-placeholder {
 margin: 30px 0;
 text-align: center;
 }

 .image-placeholder img {
 max-width: 100%;
 height: auto;
 border-radius: 8px;
 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 margin-bottom: 10px;
 }

 .image-placeholder p {
 font-size: 0.9em;
 color: #777;
 font-style: italic;
 margin-top: 10px;
 }

 ul, ol {
 margin-left: 30px;
 margin-bottom: 20px;
 }

 li {
 margin-bottom: 10px;
 color: #555;
 }

 pre {
 background-color: #1e1e1e;
 border-radius: 8px;
 padding: 20px;
 overflow-x: auto;
 margin: 20px 0;
 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }

 pre code {
 color: #d4d4d4;
 font-family: 'Courier New', Courier, monospace;
 font-size: 0.9em;
 line-height: 1.5;
 }

 .note {
 background-color: #fff3cd;
 border-left: 4px solid #ffc107;
 padding: 15px;
 margin: 20px 0;
 border-radius: 4px;
 }

 .note p {
 margin: 0;
 color: #856404;
 }

 /* Tablet Styles */
 @media (max-width: 768px) {
 .blog-container {
 padding: 15px;
 }

 h1 {
 font-size: 2em;
 }

 h2 {
 font-size: 1.5em;
 }

 h3 {
 font-size: 1.2em;
 }

 .intro {
 font-size: 1.05em;
 padding: 15px;
 }

 .code-block {
 padding: 15px;
 }

 .code-block code {
 font-size: 0.85em;
 }

 .copy-button {
 padding: 6px 12px;
 font-size: 0.8em;
 }
 }

 /* Mobile Styles */
 @media (max-width: 480px) {
 .blog-container {
 padding: 10px;
 }

 h1 {
 font-size: 1.75em;
 margin-bottom: 15px;
 }

 h2 {
 font-size: 1.3em;
 margin-top: 30px;
 margin-bottom: 15px;
 }

 h3 {
 font-size: 1.1em;
 margin-top: 25px;
 margin-bottom: 12px;
 }

 p {
 font-size: 1em;
 margin-bottom: 12px;
 }

 .intro {
 font-size: 1em;
 padding: 12px;
 }

 .code-block {
 padding: 12px;
 margin: 15px 0;
 }

 .code-block code {
 font-size: 0.8em;
 }

 .copy-button {
 padding: 5px 10px;
 font-size: 0.75em;
 top: 8px;
 right: 8px;
 }

 ul, ol {
 margin-left: 20px;
 }

 pre {
 padding: 12px;
 }

 pre code {
 font-size: 0.8em;
 }
 }

 Custom domains allow you to display your digital wallet passes on your own domain, providing a seamless, branded experience for your users. This guide will walk you through the entire process of setting up custom domains and integrating the AddToWallet SDK into your website.

 What Are Custom Domains?
 Custom domains in AddToWallet enable you to host your digital passes on your own website domain instead of using the default AddToWallet URLs. This feature is available for **Small Business** and **Enterprise** plan users and provides several benefits:

 **Brand Consistency:** Maintain your brand identity by hosting passes on your domain
 **Better User Experience:** Users see your domain, building trust and familiarity
 **SDK Integration:** Embed wallet passes directly into your website using the AddToWallet SDK
 **Customization:** Full control over the pass display experience

 Prerequisites
 Before you begin, ensure you have:

 An active AddToWallet account with a **Small Business** or **Enterprise** subscription
 Access to your website's HTML files or content management system
 A custom domain URL where you want to display your passes (e.g., `https://yourdomain.com/passes`)

 Step-by-Step Setup Guide

 Step 1: Navigate to Settings
 Log in to your AddToWallet account and navigate to the **Settings** section. Look for the **Custom Domain** or **Custom Pass Share URL** option.

 *Screenshot of the AddToWallet Custom Domain settings, showing an entered domain and enabled SDK integration.*

 Step 2: Configure Your Custom Domain
 In the Custom Domain settings:

 Enter your custom domain URL in the **Custom Pass Share URL** field (e.g., `https://yourdomain.com/preview`)
 Ensure the URL is valid and accessible (must start with `http://` or `https://`)
 Click **Save** to store your custom domain settings

 **Note:** Make sure your custom domain is properly configured and accessible. The URL should be publicly reachable for the integration to work correctly.

 *Screenshot of the AddToWallet SDK integration code section.*

 Step 3: Enable SDK Integration
 After setting your custom domain:

 Toggle the **SDK Integration** switch to enable it
 Once enabled, you'll see the SDK integration code and setup instructions
 Follow the steps below to integrate the SDK into your website

 SDK Integration Steps

 Step 4: Add the SDK Script to Your Website
 First, you need to include the AddToWallet SDK script in your website. Add this script tag to the `` section of your HTML file:

 Copy
 ``

 Step 5: Create a Container for the Widget
 Next, create a container element where the wallet widget will be displayed. Place this `` where you want the pass to appear on your page:

 Copy
 ``

 Step 6: Initialize the SDK Widget
 Finally, initialize the SDK widget by adding this script before the closing `` tag. Replace `"your-pass-slug-here"` with your actual pass slug:

 Copy
 ``

 **Important:** Replace `"your-pass-slug-here"` with your actual pass slug. You can find your pass slug in the AddToWallet dashboard when viewing or editing your pass.

 Widget Configuration Options
 The AddToWallet SDK supports various configuration options to customize the widget's appearance and behavior. Here are the available options:

 Copy
 `{ // Dimensions and Styling width: "100%", // Width of the widget height: "600px", // Height of the widget borderRadius: "12px", // Border radius of the widget boxShadow: "0 4px 20px rgba(0, 0, 0, 0.1)", // Box shadow minHeight: "400px", // Minimum height maxHeight: "800px", // Maximum height padding: "0px", // Padding inside the widget margin: "0px", // Margin around the widget backgroundColor: "#ffffff", // Background color zIndex: 1000, // Z-index of the widget // Spinner Options showSpinner: false, // Show loading spinner spinnerColor: "#007AFF", // Spinner color spinnerSize: "40px", // Spinner size // Behavior and Callbacks retryAttempts: 3, // Number of retry attempts retryDelay: 2000, // Delay between retries (ms) timeout: 30000, // Timeout for loading (ms) // Event Callbacks onLoad: function() { console.log("Widget loaded successfully!"); }, onError: function(error) { console.error("Widget error:", error); }, onWalletClick: function(wallet) { console.log("User clicked on:", wallet); }, onResize: function(dimensions) { console.log("Widget resized:", dimensions); }, onRetry: function(attempt) { console.log("Retrying attempt:", attempt); }, logEvent: function(eventName, eventData) { console.log("Event:", eventName, eventData); } }`

 Complete Example Website
 Here's a complete example of an HTML page that integrates the AddToWallet SDK:

 Copy
 ` AddToWallet Custom Domain Integration Example Welcome to Our Custom Domain Page! This is an example page demonstrating the AddToWallet SDK integration on a custom domain.

 Your Digital Pass More Content Feel free to add more content here. The AddToWallet widget above will display your digital pass directly on your website.

 `

 Testing Your Integration
 After integrating the SDK:

 Open your website page where you've added the SDK
 Check the browser console for any errors
 Verify that the wallet widget loads and displays your pass correctly
 Test the "Add to Wallet" functionality on both mobile and desktop devices
 Ensure the widget is responsive and looks good on different screen sizes

 Troubleshooting
 If you encounter issues:

 **Widget not loading:** Check that the SDK script URL is correct and accessible
 **Pass not displaying:** Verify that your pass slug is correct and the pass exists in your AddToWallet account
 **Custom domain not working:** Ensure your custom domain URL is properly configured in AddToWallet settings
 **Console errors:** Open your browser's developer console to check for JavaScript errors

 Conclusion
 Congratulations! You've successfully integrated custom domains and the AddToWallet SDK into your website. Your users can now add digital passes directly from your domain, providing a seamless and branded experience.

For more information and advanced customization options, visit the [AddToWallet API Documentation](https://app.addtowallet.co/api-docs).

 function copyCode(elementId) {
 const codeBlock = document.getElementById(elementId);
 const code = codeBlock.querySelector('code').textContent;

 navigator.clipboard.writeText(code).then(function() {
 const button = codeBlock.querySelector('.copy-button');
 const originalText = button.textContent;
 button.textContent = 'Copied!';
 button.style.backgroundColor = '#28a745';

 setTimeout(function() {
 button.textContent = originalText;
 button.style.backgroundColor = '#007AFF';
 }, 2000);
 }).catch(function(err) {
 console.error('Failed to copy code:', err);
 alert('Failed to copy code. Please select and copy manually.');
 });
 }

{{ brizy_dc_global_blocks position='bottom' }}